|
|
@ -7,6 +7,7 @@ import Wave from '../_util/wave';
|
|
|
|
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
|
|
|
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
|
|
|
import { isPresetColor, isPresetStatusColor } from '../_util/colors';
|
|
|
|
import { isPresetColor, isPresetStatusColor } from '../_util/colors';
|
|
|
|
import type { LiteralUnion } from '../_util/type';
|
|
|
|
import type { LiteralUnion } from '../_util/type';
|
|
|
|
|
|
|
|
import { eventType } from '../_util/type';
|
|
|
|
import CheckableTag from './CheckableTag';
|
|
|
|
import CheckableTag from './CheckableTag';
|
|
|
|
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
|
|
|
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
|
|
|
import warning from '../_util/warning';
|
|
|
|
import warning from '../_util/warning';
|
|
|
@ -25,9 +26,7 @@ export const tagProps = () => ({
|
|
|
|
onClose: {
|
|
|
|
onClose: {
|
|
|
|
type: Function as PropType<(e: MouseEvent) => void>,
|
|
|
|
type: Function as PropType<(e: MouseEvent) => void>,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onClick: {
|
|
|
|
onClick: eventType<(e: MouseEvent) => void>(),
|
|
|
|
type: Function as PropType<(e: MouseEvent) => void>,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
|
|
|
|
'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
|
|
|
|
icon: PropTypes.any,
|
|
|
|
icon: PropTypes.any,
|
|
|
|
});
|
|
|
|
});
|
|
|
@ -41,7 +40,7 @@ const Tag = defineComponent({
|
|
|
|
props: tagProps(),
|
|
|
|
props: tagProps(),
|
|
|
|
// emits: ['update:visible', 'close'],
|
|
|
|
// emits: ['update:visible', 'close'],
|
|
|
|
slots: ['closeIcon', 'icon'],
|
|
|
|
slots: ['closeIcon', 'icon'],
|
|
|
|
setup(props: TagProps, { slots, emit, attrs }) {
|
|
|
|
setup(props, { slots, emit, attrs }) {
|
|
|
|
const { prefixCls, direction } = useConfigInject('tag', props);
|
|
|
|
const { prefixCls, direction } = useConfigInject('tag', props);
|
|
|
|
|
|
|
|
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
@ -89,14 +88,16 @@ const Tag = defineComponent({
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const tagClassName = computed(() =>
|
|
|
|
const tagClassName = computed(() =>
|
|
|
|
classNames(prefixCls.value, hashId.value, attrs.class, {
|
|
|
|
classNames(prefixCls.value, hashId.value, {
|
|
|
|
[`${prefixCls.value}-${props.color}`]: isInternalColor.value,
|
|
|
|
[`${prefixCls.value}-${props.color}`]: isInternalColor.value,
|
|
|
|
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
|
|
|
|
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
|
|
|
|
[`${prefixCls.value}-hidden`]: !visible.value,
|
|
|
|
[`${prefixCls.value}-hidden`]: !visible.value,
|
|
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
|
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
const handleClick = (e: MouseEvent) => {
|
|
|
|
|
|
|
|
emit('click', e);
|
|
|
|
|
|
|
|
};
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
icon = slots.icon?.(),
|
|
|
|
icon = slots.icon?.(),
|
|
|
@ -133,12 +134,12 @@ const Tag = defineComponent({
|
|
|
|
children
|
|
|
|
children
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const isNeedWave = 'onClick' in attrs;
|
|
|
|
const isNeedWave = props.onClick !== undefined;
|
|
|
|
|
|
|
|
|
|
|
|
const tagNode = (
|
|
|
|
const tagNode = (
|
|
|
|
<span
|
|
|
|
<span
|
|
|
|
{...attrs}
|
|
|
|
{...attrs}
|
|
|
|
class={tagClassName.value}
|
|
|
|
onClick={handleClick}
|
|
|
|
|
|
|
|
class={[tagClassName.value, attrs.class]}
|
|
|
|
style={[tagStyle, attrs.style as CSSProperties]}
|
|
|
|
style={[tagStyle, attrs.style as CSSProperties]}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{kids}
|
|
|
|
{kids}
|
|
|
|