antd-mobile 5.2.2 → 5.3.0

package/2x/es/locales/zh-CN.d.ts

@@ -31,6 +31,57 @@ declare const zhCN: {
             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;
     };

package/2x/es/locales/zh-CN.js

@@ -1,5 +1,6 @@
 import { mergeLocale } from '../utils/merge-locale';
 import { base } from './base';
+const typeTemplate = '${label}不是一个有效的${type}';
 const zhCN = mergeLocale(base, {
   common: {
     confirm: '确定',
@@ -33,6 +34,57 @@ const zhCN = mergeLocale(base, {
       description: '找找其他的吧'
     }
   },
+  Form: {
+    required: '必填',
+    optional: '选填',
+    defaultValidateMessages: {
+      default: '字段验证错误${label}',
+      required: '请输入${label}',
+      enum: '${label}必须是其中一个[${enum}]',
+      whitespace: '${label}不能为空字符',
+      date: {
+        format: '${label}日期格式无效',
+        parse: '${label}不能转换为日期',
+        invalid: '${label}是一个无效日期'
+      },
+      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}须为${len}个字符',
+        min: '${label}最少${min}个字符',
+        max: '${label}最多${max}个字符',
+        range: '${label}须在${min}-${max}字符之间'
+      },
+      number: {
+        len: '${label}必须等于${len}',
+        min: '${label}最小值为${min}',
+        max: '${label}最大值为${max}',
+        range: '${label}须在${min}-${max}之间'
+      },
+      array: {
+        len: '须为${len}个${label}',
+        min: '最少${min}个${label}',
+        max: '最多${max}个${label}',
+        range: '${label}数量须在${min}-${max}之间'
+      },
+      pattern: {
+        mismatch: '${label}与模式不匹配${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: '上传中...'
   },

package/2x/package.json

@@ -1,17 +1,17 @@
 {
   "name": "antd-mobile",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "dependencies": {
     "@react-spring/web": "^9.4.3",
     "@types/resize-observer-browser": "^0.1.7",
-    "@use-gesture/react": "^10.2.6",
+    "@use-gesture/react": "^10.2.7",
     "ahooks": "^3.1.10",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "lodash": "^4.17.21",
-    "rc-field-form": "^1.23.0",
+    "rc-field-form": "^1.23.1",
     "rc-tooltip": "^5.1.1",
     "staged-components": "^1.1.2",
     "tslib": "^2.3.1",

package/cjs/components/date-picker/date-picker.js

@@ -50,14 +50,10 @@ const DatePicker = p => {
   });
   const now = (0, _react.useMemo)(() => new Date(), []);
   const pickerValue = (0, _react.useMemo)(() => {
-    let date = value;
-
-    if (date === null) {
-      date = new Date((0, _bound.bound)(now.getTime(), props.min.getTime(), props.max.getTime()));
-    }
-
+    let date = value !== null && value !== void 0 ? value : now;
+    date = new Date((0, _bound.bound)(date.getTime(), props.min.getTime(), props.max.getTime()));
     return (0, _datePickerUtils.convertDateToStringArray)(date, props.precision);
-  }, [value, props.precision]);
+  }, [value, props.precision, props.min, props.max]);
   const onConfirm = (0, _react.useCallback)(val => {
     setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
   }, [setValue, props.precision]);

package/cjs/components/ellipsis/ellipsis.d.ts

@@ -1,10 +1,12 @@
 import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type EllipsisProps = {
     content: string;
     direction?: 'start' | 'end' | 'middle';
     rows?: number;
     expandText?: string;
     collapseText?: string;
+    stopPropagationForActionButtons?: PropagationEvent[];
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

package/cjs/components/ellipsis/ellipsis.js

@@ -15,6 +15,8 @@ var _useResizeEffect = require("../../utils/use-resize-effect");
 
 var _ahooks = require("ahooks");
 
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
 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,7 +26,8 @@ const defaultProps = {
   direction: 'end',
   rows: 1,
   expandText: '',
-  collapseText: ''
+  collapseText: '',
+  stopPropagationForActionButtons: []
 };
 
 const Ellipsis = p => {
@@ -134,16 +137,16 @@ const Ellipsis = p => {
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
-  const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
+  const expandActionElement = exceeded && props.expandText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
     onClick: () => {
       setExpanded(true);
     }
-  }, props.expandText) : null;
-  const collapseActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
+  }, props.expandText)) : null;
+  const collapseActionElement = exceeded && props.expandText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }
-  }, props.collapseText) : null;
+  }, props.collapseText)) : null;
 
   const renderContent = () => {
     if (!exceeded) {

package/cjs/components/form/context.d.ts

@@ -4,8 +4,9 @@ import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
 };
-export declare const DEFAULT_FORM_CONTEXT: FormContextType;
+export declare const defaultFormContext: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;
 export declare type OnSubMetaChange = (meta: Meta & {
     destroy?: boolean;

package/cjs/components/form/context.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NoStyleItemContext = exports.FormContext = exports.DEFAULT_FORM_CONTEXT = void 0;
+exports.defaultFormContext = exports.NoStyleItemContext = exports.FormContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DEFAULT_FORM_CONTEXT = {
+const defaultFormContext = {
   hasFeedback: true,
-  layout: 'vertical'
+  layout: 'vertical',
+  requiredMarkStyle: 'asterisk'
 };
-exports.DEFAULT_FORM_CONTEXT = DEFAULT_FORM_CONTEXT;
+exports.defaultFormContext = defaultFormContext;
 
-const FormContext = _react.default.createContext(DEFAULT_FORM_CONTEXT);
+const FormContext = _react.default.createContext(defaultFormContext);
 
 exports.FormContext = FormContext;
 

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

@@ -9,7 +9,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -17,8 +17,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);

package/cjs/components/form/form-item.d.ts

@@ -16,6 +16,7 @@ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePr
     disabled?: boolean;
     hidden?: boolean;
     layout?: FormLayout;
+    childElementPosition?: 'normal' | 'right';
     children: ChildrenType;
 } & NativeProps;
 export declare const FormItem: FC<FormItemProps>;

package/cjs/components/form/form-item.js

@@ -27,6 +27,8 @@ var _popover = _interopRequireDefault(require("../popover"));
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
+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); }
@@ -54,18 +56,47 @@ const FormItemLayout = props => {
     hidden,
     errors,
     arrow,
-    description
+    description,
+    childElementPosition = 'normal'
   } = props;
   const context = (0, _react.useContext)(_context.FormContext);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   const layout = props.layout || context.layout;
   const feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
+
+  const requiredMark = (() => {
+    const {
+      requiredMarkStyle
+    } = context;
+
+    switch (requiredMarkStyle) {
+      case 'asterisk':
+        return required && _react.default.createElement("span", {
+          className: `${classPrefix}-required-asterisk`
+        }, "*");
+
+      case 'text-required':
+        return required && _react.default.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.required, ")");
+
+      case 'text-optional':
+        return !required && _react.default.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.optional, ")");
+
+      default:
+        return null;
+    }
+  })();
+
   const labelElement = label ? _react.default.createElement("label", {
     className: `${classPrefix}-label`,
     htmlFor: htmlFor
-  }, label, required && _react.default.createElement("span", {
-    className: `${classPrefix}-label-required`
-  }, "*"), help && _react.default.createElement("span", {
+  }, label, requiredMark, help && _react.default.createElement("span", {
     className: `${classPrefix}-label-help`
   }, _react.default.createElement(_popover.default, {
     content: help,
@@ -87,7 +118,11 @@ const FormItemLayout = props => {
     disabled: disabled,
     onClick: props.onClick,
     arrow: arrow
-  }, children);
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-child-inner`)
+  }, children)));
 };
 
 const FormItem = props => {
@@ -105,6 +140,7 @@ const FormItem = props => {
     noStyle,
     hidden,
     layout,
+    childElementPosition,
     description,
     // Field 相关
     disabled,
@@ -118,7 +154,7 @@ const FormItem = props => {
     dependencies,
     arrow
   } = props,
-        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -179,6 +215,7 @@ const FormItem = props => {
       onClick: onClick,
       hidden: hidden,
       layout: layout,
+      childElementPosition: childElementPosition,
       arrow: arrow
     }, _react.default.createElement(_context.NoStyleItemContext.Provider, {
       value: onSubMetaChange
@@ -221,13 +258,7 @@ const FormItem = props => {
     messageVariables: Variables
   }), (control, meta, context) => {
     let childNode = null;
-    const isRequired = required !== undefined ? required : !!(rules && rules.some(rule => {
-      if (rule && typeof rule === 'object' && rule.required) {
-        return true;
-      }
-
-      return false;
-    }));
+    const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
     const fieldId = ((0, _utils.toArray)(name).length && meta ? meta.name : []).join('_');
 
     if (shouldUpdate && dependencies) {

package/cjs/components/form/form.js

@@ -21,6 +21,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _header = require("./header");
 
+var _configProvider = require("../config-provider");
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
 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); }
@@ -28,10 +32,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 classPrefix = 'adm-form';
-const defaultProps = {
-  hasFeedback: true,
-  layout: 'vertical'
-};
+const defaultProps = _context.defaultFormContext;
 const Form = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
@@ -41,9 +42,14 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     children,
     layout,
     footer,
-    mode
+    mode,
+    requiredMarkStyle
   } = props,
-        formProps = (0, _tslib.__rest)(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
+        formProps = (0, _tslib.__rest)(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const validateMessages = (0, _react.useMemo)(() => (0, _merge.default)({}, locale.Form.defaultValidateMessages, formProps.validateMessages), [locale.Form.defaultValidateMessages, formProps.validateMessages]);
   const lists = [];
   let currentHeader = null;
   let items = [];
@@ -74,10 +80,13 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     className: (0, _classnames.default)(classPrefix, className),
     style: style,
     ref: ref
-  }, formProps), _react.default.createElement(_context.FormContext.Provider, {
+  }, formProps, {
+    validateMessages: validateMessages
+  }), _react.default.createElement(_context.FormContext.Provider, {
     value: {
-      hasFeedback: hasFeedback,
-      layout
+      hasFeedback,
+      layout,
+      requiredMarkStyle
     }
   }, lists), footer && _react.default.createElement("div", {
     className: `${classPrefix}-footer`

package/cjs/components/form/index.css

@@ -27,7 +27,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -35,8 +35,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);

package/cjs/components/input/input.js

@@ -78,7 +78,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     let nextValue = value;
 
     if (props.type === 'number') {
-      nextValue = (0, _bound.bound)(parseFloat(nextValue), props.min, props.max).toString();
+      nextValue = nextValue && (0, _bound.bound)(parseFloat(nextValue), props.min, props.max).toString();
     }
 
     if (nextValue !== value) {
@@ -126,7 +126,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     onKeyUp: props.onKeyUp,
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd
-  }), props.clearable && !!value && !props.readOnly && _react.default.createElement("div", {
+  }), props.clearable && !!value && !props.readOnly && hasFocus && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -131,7 +131,7 @@ const PullToRefresh = p => {
       if (!element) return;
       const scrollParent = (0, _getScrollParent.getScrollParent)(element);
       if (!scrollParent) return;
-      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.pageYOffset;
+      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.scrollY;
 
       if (top <= 0 && y > 0) {
         pullingRef.current = true;

package/cjs/locales/base.d.ts

@@ -31,6 +31,57 @@ export declare const base: {
             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;
     };

package/cjs/locales/base.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.base = void 0;
+const typeTemplate = '${label} is not a valid ${type}';
 const base = {
   common: {
     confirm: 'Confirm',
@@ -37,6 +38,57 @@ const base = {
       description: 'Want to try a new search?'
     }
   },
+  Form: {
+    required: 'Required',
+    optional: 'Optional',
+    defaultValidateMessages: {
+      default: 'Field validation error for ${label}',
+      required: 'Please enter ${label}',
+      enum: '${label} must be one of [${enum}]',
+      whitespace: '${label} cannot be a blank character',
+      date: {
+        format: '${label} date format is invalid',
+        parse: '${label} cannot be converted to a date',
+        invalid: '${label} is an invalid date'
+      },
+      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} must be ${len} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
+        range: '${label} must be between ${min}-${max} characters'
+      },
+      number: {
+        len: '${label} must be equal to ${len}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
+        range: '${label} must be between ${min}-${max}'
+      },
+      array: {
+        len: 'Must be ${len} ${label}',
+        min: 'At least ${min} ${label}',
+        max: 'At most ${max} ${label}',
+        range: 'The amount of ${label} must be between ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} does not match the pattern ${pattern}'
+      }
+    }
+  },
   ImageUploader: {
     uploading: 'Uploading...'
   },