|
|
@ -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} |
|
|
|