antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,69 @@
+.adm-form-item + .adm-form-item {
+  border-top: none;
+}
+.adm-form-item-label {
+  display: block;
+  height: 100%;
+  line-height: 1.5;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--adm-color-text-secondary);
+}
+.adm-form-item-label .adm-form-item-required-asterisk {
+  position: absolute;
+  left: -0.6em;
+  top: 0;
+  font-family: SimSun, sans-serif;
+  color: var(--adm-color-danger);
+  -webkit-user-select: none;
+          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: flex-end;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
+}
+.adm-form-item-feedback-error {
+  color: var(--adm-color-danger);
+  margin-top: 4px;
+}
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 4px;
+}
+.adm-form-item.adm-form-item-hidden {
+  display: none;
+}
+.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 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: var(--adm-font-size-7);
+  margin-bottom: 4px;
+}

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

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { FormInstance } from 'rc-field-form';
+import type { FieldProps } from 'rc-field-form/lib/Field';
+import { ListItemProps } from '../list';
+import type { FormLayout } from './index';
+declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
+declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
+declare type RcFieldProps = Omit<FieldProps, 'children'>;
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
+    label?: React.ReactNode;
+    help?: React.ReactNode;
+    hasFeedback?: boolean;
+    required?: boolean;
+    noStyle?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    layout?: FormLayout;
+    childElementPosition?: 'normal' | 'right';
+    children?: ChildrenType;
+    onClick?: (e: React.MouseEvent, widgetRef: React.MutableRefObject<any>) => void;
+} & NativeProps;
+export declare const FormItem: FC<FormItemProps>;
+export {};

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

@@ -0,0 +1,334 @@
+import { __rest } from "tslib";
+import React, { useContext, useCallback, useState, useRef } from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { Field } from 'rc-field-form';
+import FieldContext from 'rc-field-form/lib/FieldContext';
+import { devWarning } from '../../utils/dev-log';
+import { FormContext, NoStyleItemContext } from './context';
+import { toArray, isSafeSetRefComponent } from './utils';
+import List from '../list';
+import Popover from '../popover';
+import { QuestionCircleOutline } from 'antd-mobile-icons';
+import { useConfig } from '../config-provider';
+import { undefinedFallback } from '../../utils/undefined-fallback';
+const NAME_SPLIT = '__SPLIT__';
+const classPrefix = `adm-form-item`;
+const MemoInput = React.memo(({
+  children
+}) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
+
+const FormItemLayout = props => {
+  var _a;
+
+  const {
+    className,
+    style,
+    extra,
+    label,
+    help,
+    required,
+    children,
+    htmlFor,
+    hidden,
+    arrow,
+    childElementPosition = 'normal'
+  } = props;
+  const context = useContext(FormContext);
+  const {
+    locale
+  } = useConfig();
+  const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
+  const layout = props.layout || context.layout;
+  const disabled = (_a = props.disabled) !== null && _a !== void 0 ? _a : context.disabled;
+
+  const requiredMark = (() => {
+    const {
+      requiredMarkStyle
+    } = context;
+
+    switch (requiredMarkStyle) {
+      case 'asterisk':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-asterisk`
+        }, "*");
+
+      case 'text-required':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.required, ")");
+
+      case 'text-optional':
+        return !required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.optional, ")");
+
+      default:
+        return null;
+    }
+  })();
+
+  const labelElement = label ? React.createElement("label", {
+    className: `${classPrefix}-label`,
+    htmlFor: htmlFor
+  }, label, requiredMark, help && React.createElement(Popover, {
+    content: help,
+    mode: 'dark',
+    trigger: 'click'
+  }, React.createElement("span", {
+    className: `${classPrefix}-label-help`,
+    onClick: e => {
+      e.preventDefault();
+    }
+  }, React.createElement(QuestionCircleOutline, null)))) : null;
+  const description = props.description || hasFeedback ? React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+    key: `error-${index}`,
+    className: `${classPrefix}-feedback-error`
+  }, error)), props.warnings.map((warning, index) => React.createElement("div", {
+    key: `warning-${index}`,
+    className: `${classPrefix}-feedback-warning`
+  }, warning)))) : null;
+  return withNativeProps(props, React.createElement(List.Item, {
+    style: style,
+    title: layout === 'vertical' && labelElement,
+    prefix: layout === 'horizontal' && labelElement,
+    extra: extra,
+    description: description,
+    className: classNames(classPrefix, className, `${classPrefix}-${layout}`, {
+      [`${classPrefix}-hidden`]: hidden,
+      [`${classPrefix}-has-error`]: props.errors.length
+    }),
+    disabled: disabled,
+    onClick: props.onClick,
+    clickable: props.clickable,
+    arrow: arrow
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child-inner`)
+  }, children))));
+};
+
+export const FormItem = props => {
+  const {
+    // 样式相关
+    className,
+    style,
+    // FormItem 相关
+    label,
+    help,
+    extra,
+    hasFeedback,
+    name,
+    required,
+    noStyle,
+    hidden,
+    layout,
+    childElementPosition,
+    description,
+    // Field 相关
+    disabled,
+    rules,
+    children,
+    messageVariables,
+    trigger = 'onChange',
+    validateTrigger = trigger,
+    onClick,
+    shouldUpdate,
+    dependencies,
+    clickable,
+    arrow
+  } = props,
+        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "clickable", "arrow"]);
+
+  const {
+    name: formName
+  } = useContext(FormContext);
+  const {
+    validateTrigger: contextValidateTrigger
+  } = useContext(FieldContext);
+  const mergedValidateTrigger = undefinedFallback(validateTrigger, contextValidateTrigger, trigger);
+  const widgetRef = useRef(null);
+  const updateRef = useRef(0);
+  updateRef.current += 1;
+  const [subMetas, setSubMetas] = useState({});
+  const onSubMetaChange = useCallback((subMeta, namePath) => {
+    setSubMetas(prevSubMetas => {
+      const nextSubMetas = Object.assign({}, prevSubMetas);
+      const nameKey = namePath.join(NAME_SPLIT);
+
+      if (subMeta.destroy) {
+        delete nextSubMetas[nameKey];
+      } else {
+        nextSubMetas[nameKey] = subMeta;
+      }
+
+      return nextSubMetas;
+    });
+  }, [setSubMetas]);
+
+  function renderLayout(baseChildren, fieldId, meta, isRequired) {
+    var _a, _b;
+
+    if (noStyle && !hidden) {
+      return baseChildren;
+    }
+
+    const curErrors = (_a = meta === null || meta === void 0 ? void 0 : meta.errors) !== null && _a !== void 0 ? _a : [];
+    const errors = Object.keys(subMetas).reduce((subErrors, key) => {
+      var _a, _b;
+
+      const errors = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : [];
+
+      if (errors.length) {
+        subErrors = [...subErrors, ...errors];
+      }
+
+      return subErrors;
+    }, curErrors);
+    const curWarnings = (_b = meta === null || meta === void 0 ? void 0 : meta.warnings) !== null && _b !== void 0 ? _b : [];
+    const warnings = Object.keys(subMetas).reduce((subWarnings, key) => {
+      var _a, _b;
+
+      const warnings = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : [];
+
+      if (warnings.length) {
+        subWarnings = [...subWarnings, ...warnings];
+      }
+
+      return subWarnings;
+    }, curWarnings);
+    return withNativeProps(props, React.createElement(FormItemLayout, {
+      className: className,
+      style: style,
+      label: label,
+      extra: extra,
+      help: help,
+      description: description,
+      required: isRequired,
+      disabled: disabled,
+      hasFeedback: hasFeedback,
+      htmlFor: fieldId,
+      errors: errors,
+      warnings: warnings,
+      onClick: onClick && (e => onClick(e, widgetRef)),
+      hidden: hidden,
+      layout: layout,
+      childElementPosition: childElementPosition,
+      clickable: clickable,
+      arrow: arrow
+    }, React.createElement(NoStyleItemContext.Provider, {
+      value: onSubMetaChange
+    }, baseChildren)));
+  }
+
+  const isRenderProps = typeof children === 'function';
+
+  if (!name && !isRenderProps && !props.dependencies) {
+    return renderLayout(children);
+  }
+
+  let Variables = {};
+  Variables.label = typeof label === 'string' ? label : '';
+
+  if (messageVariables) {
+    Variables = Object.assign(Object.assign({}, Variables), messageVariables);
+  }
+
+  const notifyParentMetaChange = useContext(NoStyleItemContext);
+
+  const onMetaChange = meta => {
+    if (noStyle && notifyParentMetaChange) {
+      const namePath = meta.name;
+      notifyParentMetaChange(meta, namePath);
+    }
+  };
+
+  return React.createElement(Field, Object.assign({}, fieldProps, {
+    name: name,
+    shouldUpdate: shouldUpdate,
+    dependencies: dependencies,
+    rules: rules,
+    trigger: trigger,
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange,
+    messageVariables: Variables
+  }), (control, meta, context) => {
+    let childNode = null;
+    const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
+    const nameList = toArray(name).length && meta ? meta.name : [];
+    const fieldId = (nameList.length > 0 && formName ? [formName, ...nameList] : nameList).join('_');
+
+    if (shouldUpdate && dependencies) {
+      devWarning('Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together.");
+    }
+
+    if (isRenderProps) {
+      if ((shouldUpdate || dependencies) && !name) {
+        childNode = children(context);
+      } else {
+        if (!(shouldUpdate || dependencies)) {
+          devWarning('Form.Item', '`children` of render props only work with `shouldUpdate` or `dependencies`.');
+        }
+
+        if (name) {
+          devWarning('Form.Item', "Do not use `name` with `children` of render props since it's not a field.");
+        }
+      } // not render props
+
+    } else if (dependencies && !name) {
+      devWarning('Form.Item', 'Must set `name` or use render props when `dependencies` is set.');
+    } else if (React.isValidElement(children)) {
+      if (children.props.defaultValue) {
+        devWarning('Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
+      }
+
+      const childProps = Object.assign(Object.assign({}, children.props), control);
+
+      if (isSafeSetRefComponent(children)) {
+        childProps.ref = instance => {
+          const originRef = children.ref;
+
+          if (originRef) {
+            if (typeof originRef === 'function') {
+              originRef(instance);
+            }
+
+            if ('current' in originRef) {
+              originRef.current = instance;
+            }
+          }
+
+          widgetRef.current = instance;
+        };
+      }
+
+      if (!childProps.id) {
+        childProps.id = fieldId;
+      } // We should keep user origin event handler
+
+
+      const triggers = new Set([...toArray(trigger), ...toArray(mergedValidateTrigger)]);
+      triggers.forEach(eventName => {
+        childProps[eventName] = (...args) => {
+          var _a, _b, _c;
+
+          (_a = control[eventName]) === null || _a === void 0 ? void 0 : _a.call(control, ...args);
+          (_c = (_b = children.props)[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
+        };
+      });
+      childNode = React.createElement(MemoInput, {
+        value: control[props.valuePropName || 'value'],
+        update: updateRef.current
+      }, React.cloneElement(children, childProps));
+    } else {
+      if (name) {
+        devWarning('Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
+      }
+
+      childNode = children;
+    }
+
+    return renderLayout(childNode, fieldId, meta, isRequired);
+  });
+};

package/es/components/form/form-subscribe.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import type { FormInstance } from 'rc-field-form';
+import type { NamePath } from 'rc-field-form/es/interface';
+declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
+declare type ChildrenType<Values = any> = RenderChildren<Values>;
+export interface FormSubscribeProps {
+    to: NamePath[];
+    children: ChildrenType;
+}
+export declare const FormSubscribe: FC<FormSubscribeProps>;
+export declare const Watcher: React.NamedExoticComponent<{
+    form: FormInstance;
+    namePath: NamePath;
+    onChange: () => void;
+}>;
+export {};

package/es/components/form/form-subscribe.js

@@ -0,0 +1,21 @@
+import React, { memo, useContext } from 'react';
+import { FieldContext, useWatch } from 'rc-field-form';
+import { useUpdate } from 'ahooks';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+export const FormSubscribe = props => {
+  const update = useUpdate();
+  const form = useContext(FieldContext);
+  return React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
+    key: namePath.toString(),
+    form: form,
+    namePath: namePath,
+    onChange: update
+  })));
+};
+export const Watcher = memo(props => {
+  const value = useWatch(props.namePath, props.form);
+  useIsomorphicUpdateLayoutEffect(() => {
+    props.onChange();
+  }, [value]);
+  return null;
+});

package/es/components/form/form.css

@@ -0,0 +1,22 @@
+.adm-form {
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
+  ---border-inner: var(--border-inner);
+  ---border-top: var(--border-top);
+  ---border-bottom: var(--border-bottom);
+}
+.adm-form .adm-list.adm-list {
+  --padding-left: 16px;
+  --padding-right: 12px;
+  --border-inner: var(---border-inner);
+  --border-top: var(---border-top);
+  --border-bottom: var(---border-bottom);
+}
+.adm-form .adm-form-footer {
+  padding: 20px 12px;
+}
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
+}

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+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> & {
+    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;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & Partial<FormContextType> & {
+    footer?: ReactNode;
+    mode?: ListProps['mode'];
+} & React.RefAttributes<FormInstance>>;

package/es/components/form/form.js

@@ -0,0 +1,86 @@
+import { __rest } from "tslib";
+import React, { forwardRef, useMemo } from 'react';
+import classNames from 'classnames';
+import List from '../list';
+import RcForm from 'rc-field-form';
+import { defaultFormContext, FormContext } from './context';
+import { mergeProps } from '../../utils/with-default-props';
+import { Header } from './header';
+import { useConfig } from '../config-provider';
+import merge from 'lodash/merge';
+import { FormArray } from './form-array';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+const classPrefix = 'adm-form';
+const defaultProps = defaultFormContext;
+export const Form = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+
+  const {
+    className,
+    style,
+    hasFeedback,
+    children,
+    layout,
+    footer,
+    mode,
+    disabled,
+    requiredMarkStyle
+  } = props,
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
+
+  const {
+    locale
+  } = useConfig();
+  const validateMessages = useMemo(() => merge({}, locale.Form.defaultValidateMessages, formProps.validateMessages), [locale.Form.defaultValidateMessages, formProps.validateMessages]);
+  const lists = [];
+  let currentHeader = null;
+  let items = [];
+  let count = 0;
+
+  function collect() {
+    if (items.length === 0) return;
+    count += 1;
+    lists.push(React.createElement(List, {
+      header: currentHeader,
+      key: count,
+      mode: mode
+    }, items));
+    items = [];
+  }
+
+  traverseReactNode(props.children, child => {
+    if (React.isValidElement(child)) {
+      if (child.type === Header) {
+        collect();
+        currentHeader = child.props.children;
+        return;
+      }
+
+      if (child.type === FormArray) {
+        collect();
+        lists.push(child);
+        return;
+      }
+    }
+
+    items.push(child);
+  });
+  collect();
+  return React.createElement(RcForm, Object.assign({
+    className: classNames(classPrefix, className),
+    style: style,
+    ref: ref
+  }, formProps, {
+    validateMessages: validateMessages
+  }), React.createElement(FormContext.Provider, {
+    value: {
+      name: formProps.name,
+      hasFeedback,
+      layout,
+      requiredMarkStyle,
+      disabled: disabled
+    }
+  }, lists), footer && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, footer));
+});

package/es/components/form/header.d.ts

@@ -0,0 +1,4 @@
+import { FC, ReactNode } from 'react';
+export declare const Header: FC<{
+    children?: ReactNode;
+}>;

package/es/components/form/header.js

@@ -0,0 +1 @@
+export const Header = () => null;

package/es/components/form/index.css

@@ -0,0 +1,91 @@
+.adm-form {
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
+  ---border-inner: var(--border-inner);
+  ---border-top: var(--border-top);
+  ---border-bottom: var(--border-bottom);
+}
+.adm-form .adm-list.adm-list {
+  --padding-left: 16px;
+  --padding-right: 12px;
+  --border-inner: var(---border-inner);
+  --border-top: var(---border-top);
+  --border-bottom: var(---border-bottom);
+}
+.adm-form .adm-form-footer {
+  padding: 20px 12px;
+}
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
+}
+.adm-form-item + .adm-form-item {
+  border-top: none;
+}
+.adm-form-item-label {
+  display: block;
+  height: 100%;
+  line-height: 1.5;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--adm-color-text-secondary);
+}
+.adm-form-item-label .adm-form-item-required-asterisk {
+  position: absolute;
+  left: -0.6em;
+  top: 0;
+  font-family: SimSun, sans-serif;
+  color: var(--adm-color-danger);
+  -webkit-user-select: none;
+          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: flex-end;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
+}
+.adm-form-item-feedback-error {
+  color: var(--adm-color-danger);
+  margin-top: 4px;
+}
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 4px;
+}
+.adm-form-item.adm-form-item-hidden {
+  display: none;
+}
+.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 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: var(--adm-font-size-7);
+  margin-bottom: 4px;
+}