import type { HTMLAttributes, App, PropType, ExtractPropTypes, Plugin } from 'vue';
import { ref, defineComponent, watchEffect, computed } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import Wave from '../_util/wave';
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
import type { LiteralUnion } from '../_util/type';
import CheckableTag from './CheckableTag';
import useConfigInject from '../_util/hooks/useConfigInject';
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
const tagProps = {
prefixCls: PropTypes.string,
color: {
type: String as PropType>,
},
closable: PropTypes.looseBool.def(false),
closeIcon: PropTypes.VNodeChild,
visible: PropTypes.looseBool,
onClose: {
type: Function as PropType<(e: MouseEvent) => void>,
},
icon: PropTypes.VNodeChild,
};
export type TagProps = HTMLAttributes & Partial>;
const Tag = defineComponent({
name: 'ATag',
props: tagProps,
emits: ['update:visible', 'close'],
slots: ['closeIcon', 'icon'],
setup(props: TagProps, { slots, emit, attrs }) {
const { prefixCls, direction } = useConfigInject('tag', props);
const visible = ref(true);
watchEffect(() => {
if (props.visible !== undefined) {
visible.value = props.visible!;
}
});
const handleCloseClick = (e: MouseEvent) => {
e.stopPropagation();
emit('update:visible', false);
emit('close', e);
if (e.defaultPrevented) {
return;
}
if (props.visible === undefined) {
visible.value = false;
}
};
const isPresetColor = computed(() => {
const { color } = props;
if (!color) {
return false;
}
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
});
const tagClassName = computed(() =>
classNames(prefixCls.value, {
[`${prefixCls.value}-${props.color}`]: isPresetColor.value,
[`${prefixCls.value}-has-color`]: props.color && !isPresetColor.value,
[`${prefixCls.value}-hidden`]: !visible.value,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
}),
);
return () => {
const {
icon = slots.icon?.(),
color,
closeIcon = slots.closeIcon?.(),
closable = false,
} = props;
const renderCloseIcon = () => {
if (closable) {
return closeIcon ? (
{closeIcon}
) : (
);
}
return null;
};
const tagStyle = {
backgroundColor: color && !isPresetColor.value ? color : undefined,
};
const iconNode = icon || null;
const children = slots.default?.();
const kids = iconNode ? (
<>
{iconNode}
{children}
>
) : (
children
);
const isNeedWave = 'onClick' in attrs;
const tagNode = (
{kids}
{renderCloseIcon()}
);
return isNeedWave ? {tagNode} : tagNode;
};
},
});
Tag.CheckableTag = CheckableTag;
Tag.install = function (app: App) {
app.component(Tag.name, Tag);
app.component(CheckableTag.name, CheckableTag);
return app;
};
export { CheckableTag };
export default Tag as typeof Tag &
Plugin & {
readonly CheckableTag: typeof CheckableTag;
};