103 lines
3.1 KiB
Vue
103 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,
|
||
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
|
||
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;
|