ant-design-vue/components/form/FormItemLabel.tsx

99 lines
3.1 KiB
Vue

import type { ColProps } from '../grid/Col';
import Col from '../grid/Col';
import type { FormLabelAlign } from './interface';
import { useInjectForm } from './context';
import type { RequiredMark } from './Form';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import classNames from '../_util/classNames';
import type { VueNode } from '../_util/type';
import type { FunctionalComponent, HTMLAttributes } from 'vue';
export interface FormItemLabelProps {
colon?: boolean;
htmlFor?: string;
label?: VueNode;
labelAlign?: FormLabelAlign;
labelCol?: ColProps & HTMLAttributes;
requiredMark?: RequiredMark;
required?: boolean;
prefixCls: string;
onClick: Function;
}
const FormItemLabel: FunctionalComponent<FormItemLabelProps> = (props, { slots, emit, attrs }) => {
const { prefixCls, htmlFor, labelCol, labelAlign, colon, required, requiredMark } = {
...props,
...attrs,
};
const [formLocale] = useLocaleReceiver('Form');
const label = props.label ?? slots.label?.();
if (!label) return null;
const {
vertical,
labelAlign: contextLabelAlign,
labelCol: contextLabelCol,
colon: contextColon,
} = useInjectForm();
const mergedLabelCol: FormItemLabelProps['labelCol'] = labelCol || contextLabelCol?.value || {};
const mergedLabelAlign: FormLabelAlign | undefined = labelAlign || contextLabelAlign?.value;
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(
labelClsBasic,
mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
mergedLabelCol.class,
);
let labelChildren = label;
// Keep label is original where there should have no colon
const computedColon = colon === true || (contextColon?.value !== false && colon !== false);
const haveColon = computedColon && !vertical.value;
// Remove duplicated user input colon
if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
labelChildren = (label as string).replace(/[:|:]\s*$/, '');
}
labelChildren = (
<>
{labelChildren}
{slots.tooltip?.({ class: `${prefixCls}-item-tooltip` })}
</>
);
// Add required mark if optional
if (requiredMark === 'optional' && !required) {
labelChildren = (
<>
{labelChildren}
<span class={`${prefixCls}-item-optional`}>
{formLocale.value?.optional || defaultLocale.Form?.optional}
</span>
</>
);
}
const labelClassName = classNames({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-required-mark-optional`]: requiredMark === 'optional',
[`${prefixCls}-item-no-colon`]: !computedColon,
});
return (
<Col {...mergedLabelCol} class={labelColClassName}>
<label
html-for={htmlFor}
class={labelClassName}
title={typeof label === 'string' ? label : ''}
onClick={e => emit('click', e)}
>
{labelChildren}
</label>
</Col>
);
};
FormItemLabel.displayName = 'FormItemLabel';
FormItemLabel.inheritAttrs = false;
export default FormItemLabel;