ant-design-vue/components/form/FormItemLabel.tsx
2023-01-28 08:39:47 +08:00

103 lines
3.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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/en_US';
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,
labelWrap,
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,
{
[`${labelClsBasic}-wrap`]: !!labelWrap.value,
},
);
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
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;