antd-mobile 5.28.2 → 5.29.1

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

@@ -88,17 +88,19 @@ const Popup = p => {
     className: bodyCls,
     style: Object.assign(Object.assign({}, props.bodyStyle), {
       transform: percent.to(v => {
-        if (props.position === 'bottom') {
-          return `translate(0, ${v}%)`;
-        }
-        if (props.position === 'top') {
-          return `translate(0, -${v}%)`;
-        }
-        if (props.position === 'left') {
-          return `translate(-${v}%, 0)`;
-        }
-        if (props.position === 'right') {
-          return `translate(${v}%, 0)`;
+        if (v) {
+          if (props.position === 'bottom') {
+            return `translate(0, ${v}%)`;
+          }
+          if (props.position === 'top') {
+            return `translate(0, -${v}%)`;
+          }
+          if (props.position === 'left') {
+            return `translate(-${v}%, 0)`;
+          }
+          if (props.position === 'right') {
+            return `translate(${v}%, 0)`;
+          }
         }
         return 'none';
       })

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

@@ -20,7 +20,7 @@
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-radio .adm-radio-icon > svg {
@@ -49,7 +49,7 @@
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-radio .adm-radio-custom-icon {

package/2x/cjs/components/search-bar/search-bar.css

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;
-  --background: var(--adm-color-box);
+  --background: var(--adm-color-fill-content);
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);

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

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: var(--adm-color-box);
+  --color: var(--adm-color-fill-content);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);

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

@@ -12,6 +12,7 @@ var _space = _interopRequireDefault(require("../space"));
 var _grid = _interopRequireDefault(require("../grid"));
 var _usePropsValue = require("../../utils/use-props-value");
 var _checkMark = require("./check-mark");
+var _configProvider = require("../config-provider");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const classPrefix = `adm-selector`;
 const defaultProps = {
@@ -34,6 +35,9 @@ const Selector = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
     }
   });
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const items = props.options.map(option => {
     const active = (value || []).includes(option.value);
     const disabled = option.disabled || props.disabled;
@@ -56,7 +60,9 @@ const Selector = p => {
           const val = active ? [] : [option.value];
           setValue(val);
         }
-      }
+      },
+      role: 'option',
+      "aria-selected": active && !props.multiple || active && props.multiple
     }, option.label, option.description && _react.default.createElement("div", {
       className: `${classPrefix}-item-description`
     }, option.description), active && props.showCheckMark && _react.default.createElement("div", {
@@ -64,7 +70,9 @@ const Selector = p => {
     }, _react.default.createElement(_checkMark.CheckMark, null)));
   });
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: classPrefix
+    className: classPrefix,
+    role: 'listbox',
+    "aria-label": locale.Selector.name
   }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
   }, items), props.columns && _react.default.createElement(_grid.default, {

package/2x/cjs/components/side-bar/side-bar.css

@@ -2,7 +2,7 @@
   --height: 100%;
   --width: 210px;
   --item-border-radius: 16px;
-  --background-color: var(--adm-color-box);
+  --background-color: var(--adm-color-fill-content);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;

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

@@ -14,7 +14,7 @@
   position: relative;
   width: 100%;
   height: 6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 6px;
 }
 
@@ -39,7 +39,7 @@
   width: 14px;
   height: 14px;
   margin-left: -6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 50%;
 }
 
@@ -54,7 +54,7 @@
   border-radius: 50%;
   text-align: center;
   line-height: 56px;
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
   color: var(--fill-color);
 }

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: var(--adm-color-box);
+  --input-background-color: var(--adm-color-fill-content);
   --border-radius: 4px;
   --border: none;
   --border-inner: solid 4px transparent;
   --active-border: var(--border);
   --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: var(--adm-color-box);
+  --button-background-color: var(--adm-color-fill-content);
   --button-width: var(--height);
   display: flex;
   align-items: center;

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

@@ -36,7 +36,7 @@
 .adm-swipe-action-action-button.adm-button {
   --border-radius: 0;
   --border-width: 0;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   padding-left: 40px;
   padding-right: 40px;
 }

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

@@ -57,7 +57,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -93,7 +93,7 @@
 
 .adm-switch.adm-switch-checked .adm-switch-inner {
   margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 20px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-switch.adm-switch-disabled {

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

@@ -192,7 +192,8 @@ const Tabs = p => {
     className: `${classPrefix}-tab-list`,
     ref: tabListContainerRef,
     scrollLeft: scrollLeft,
-    onScroll: updateMask
+    onScroll: updateMask,
+    role: 'tablist'
   }, _react.default.createElement(_web.animated.div, {
     ref: activeLineRef,
     className: `${classPrefix}-tab-line`,
@@ -219,7 +220,9 @@ const Tabs = p => {
     className: (0, _classnames.default)(`${classPrefix}-tab`, {
       [`${classPrefix}-tab-active`]: pane.key === activeKey,
       [`${classPrefix}-tab-disabled`]: pane.props.disabled
-    })
+    }),
+    role: 'tab',
+    "aria-selected": pane.key === activeKey
   }, pane.props.title)))))), panes.map(pane => {
     if (pane.props.children === undefined) {
       return null;

package/2x/cjs/components/text-area/text-area.d.ts

@@ -21,7 +21,7 @@ export declare type TextAreaRef = {
     blur: () => void;
     nativeElement: HTMLTextAreaElement | null;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/cjs/components/text-area/text-area.js

@@ -126,6 +126,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     ref: hiddenTextAreaRef,
     className: `${classPrefix}-element ${classPrefix}-element-hidden`,
     value: value,
+    rows: props.rows,
     "aria-hidden": true,
     readOnly: true
   })));

package/2x/cjs/components/virtual-input/virtual-input.js

@@ -11,6 +11,7 @@ var _usePropsValue = require("../../utils/use-props-value");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _antdMobileIcons = require("antd-mobile-icons");
 var _ahooks = require("ahooks");
+var _configProvider = require("../config-provider");
 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; }
@@ -24,6 +25,9 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
   const rootRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   function scrollToEnd() {
     const root = rootRef.current;
     if (!root) return;
@@ -88,12 +92,15 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
       [`${classPrefix}-disabled`]: props.disabled
     }),
     tabIndex: props.disabled ? undefined : 0,
+    role: 'option',
     onFocus: onFocus,
     onBlur: onBlur,
     onClick: props.onClick
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`,
-    ref: contentRef
+    ref: contentRef,
+    "aria-disabled": props.disabled,
+    "aria-label": props.placeholder
   }, value, _react.default.createElement("div", {
     className: `${classPrefix}-caret-container`
   }, hasFocus && _react.default.createElement("div", {
@@ -105,7 +112,9 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
       e.stopPropagation();
       setValue('');
       (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
+    },
+    role: 'button',
+    "aria-label": locale.Input.clear
   }, _react.default.createElement(_antdMobileIcons.CloseCircleFill, null)), !value && _react.default.createElement("div", {
     className: `${classPrefix}-placeholder`
   }, props.placeholder), keyboardElement));

package/2x/cjs/global/global.css

@@ -16,14 +16,17 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
-  --adm-color-white: #ffffff;
   --adm-color-text: #333333;
   --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
   --adm-color-border: #eeeeee;
-  --adm-color-box: #f5f5f5;
   --adm-color-background: #ffffff;
+  --adm-color-white: #ffffff;
+  --adm-color-box: #f5f5f5;
+  --adm-color-text-light-solid: var(--adm-color-white);
+  --adm-color-text-dark-solid: #000000;
+  --adm-color-fill-content: var(--adm-color-box);
   --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',

package/2x/cjs/global/theme-default.css

@@ -16,14 +16,17 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
-  --adm-color-white: #ffffff;
   --adm-color-text: #333333;
   --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
   --adm-color-border: #eeeeee;
-  --adm-color-box: #f5f5f5;
   --adm-color-background: #ffffff;
+  --adm-color-white: #ffffff;
+  --adm-color-box: #f5f5f5;
+  --adm-color-text-light-solid: var(--adm-color-white);
+  --adm-color-text-dark-solid: #000000;
+  --adm-color-fill-content: var(--adm-color-box);
   --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',

package/2x/cjs/locales/base.d.ts

@@ -127,5 +127,8 @@ export declare const base: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export declare type Locale = typeof base;

package/2x/cjs/locales/base.js

@@ -133,6 +133,9 @@ const base = {
   },
   Switch: {
     name: 'Switch'
+  },
+  Selector: {
+    name: 'Selector'
   }
 };
 exports.base = base;

package/2x/cjs/locales/da-DK.d.ts

@@ -0,0 +1,134 @@
+declare const daDK: {
+    locale: string;
+    common: {
+        confirm: string;
+        cancel: string;
+        loading: string;
+        close: string;
+    };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
+    Cascader: {
+        placeholder: string;
+    };
+    Dialog: {
+        ok: string;
+    };
+    DatePicker: {
+        tillNow: string;
+    };
+    ErrorBlock: {
+        default: {
+            title: string;
+            description: string;
+        };
+        busy: {
+            title: string;
+            description: string;
+        };
+        disconnected: {
+            title: string;
+            description: string;
+        };
+        empty: {
+            title: string;
+            description: string;
+        };
+    };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+    ImageUploader: {
+        uploading: string;
+        upload: string;
+    };
+    InfiniteScroll: {
+        noMore: string;
+        failedToLoad: string;
+        retry: string;
+    };
+    Input: {
+        clear: string;
+    };
+    Mask: {
+        name: string;
+    };
+    Modal: {
+        ok: string;
+    };
+    PasscodeInput: {
+        name: string;
+    };
+    PullToRefresh: {
+        pulling: string;
+        canRelease: string;
+        complete: string;
+    };
+    SearchBar: {
+        name: string;
+    };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
+    Selector: {
+        name: string;
+    };
+};
+export default daDK;

package/2x/cjs/locales/da-DK.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _mergeLocale = require("../utils/merge-locale");
+var _base = require("./base");
+const typeTemplate = '${label} er ikke gyldig som ${type}';
+const daDK = (0, _mergeLocale.mergeLocale)(_base.base, {
+  locale: 'da-DK',
+  common: {
+    confirm: 'Bekræft',
+    cancel: 'Afbestille',
+    loading: 'Indlæser',
+    close: 'Luk'
+  },
+  Calendar: {
+    markItems: ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'],
+    renderYearAndMonth: (year, month) => `${month}.${year}`
+  },
+  Cascader: {
+    placeholder: 'Vælger'
+  },
+  Dialog: {
+    ok: 'Bekræft'
+  },
+  DatePicker: {
+    tillNow: 'Indtil nu'
+  },
+  ErrorBlock: {
+    default: {
+      title: 'Oops, noget gik galt',
+      description: 'Vent et minut og prøv igen'
+    },
+    busy: {
+      title: 'Oops, ikke indlæser',
+      description: 'Prøv at opdatere siden'
+    },
+    disconnected: {
+      title: 'Netværket er optaget',
+      description: 'Prøv at opdatere siden'
+    },
+    empty: {
+      title: 'Hmm, kunne ikke finde det...',
+      description: 'Vil du prøve en ny søgning?'
+    }
+  },
+  Form: {
+    required: 'Påkrævet',
+    optional: 'Valgfri',
+    defaultValidateMessages: {
+      default: 'Feltvalideringsfejl for ${label}',
+      required: 'Indtast venligst ${label}',
+      enum: '${label} skal være en af [${enum}]',
+      whitespace: '${label} kan ikke være et tomt tegn',
+      date: {
+        format: '${label} datoformatet er ugyldigt',
+        parse: '${label} kan ikke konverteres til en dato',
+        invalid: '${label} er en ugyldig dato'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} må være ${len} tegn',
+        min: '${label} skal være mindst ${min} tegn',
+        max: '${label} skal være op til ${max} tegn',
+        range: '${label} skal være imellem ${min}-${max} tegn'
+      },
+      number: {
+        len: '${label} skal være lig med ${len}',
+        min: '${label} skal være minimum ${min}',
+        max: '${label} skal være maksimalt ${max}',
+        range: '${label} skal være imellem ${min}-${max}'
+      },
+      array: {
+        len: 'Må være ${len} ${label}',
+        min: 'I det mindste ${min} ${label}',
+        max: 'Højst ${max} ${label}',
+        range: 'Mængden af ${label} skal være imellem ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} stemmer ikke overens med mønsteret ${pattern}'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: 'Uploader...',
+    upload: 'Upload'
+  },
+  InfiniteScroll: {
+    noMore: 'Ikke mere',
+    failedToLoad: 'Kunne ikke indlæses',
+    retry: 'Prøve igen'
+  },
+  Input: {
+    clear: 'slette'
+  },
+  Mask: {
+    name: 'Maske'
+  },
+  Modal: {
+    ok: 'Bekræft'
+  },
+  PullToRefresh: {
+    pulling: 'Rul ned for at opdatere',
+    canRelease: 'Slip for at opdatere med det samme',
+    complete: 'Opdatering lykkedes'
+  },
+  Stepper: {
+    decrease: 'aftage',
+    increase: 'øge'
+  },
+  Selector: {
+    name: 'Vælger'
+  }
+});
+var _default = daDK;
+exports.default = _default;

package/2x/cjs/locales/en-US.d.ts

@@ -127,5 +127,8 @@ declare const enUS: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default enUS;

package/2x/cjs/locales/es-ES.d.ts

@@ -127,5 +127,8 @@ declare const esES: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default esES;

package/2x/cjs/locales/fa-IR.d.ts

@@ -127,5 +127,8 @@ declare const faIR: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default faIR;

package/2x/cjs/locales/fr-FR.d.ts

@@ -127,5 +127,8 @@ declare const frFR: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default frFR;

package/2x/cjs/locales/id-ID.d.ts

@@ -127,5 +127,8 @@ declare const idID: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default idID;