2022-03-26 14:52:54 +00:00
|
|
|
import type { ExtractPropTypes, PropType } from 'vue';
|
2021-06-26 01:35:40 +00:00
|
|
|
import { defineComponent, computed } from 'vue';
|
2020-09-23 09:51:02 +00:00
|
|
|
import classNames from '../_util/classNames';
|
2021-06-09 14:50:40 +00:00
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
2020-08-23 11:33:01 +00:00
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
const checkableTagProps = () => ({
|
|
|
|
prefixCls: String,
|
|
|
|
checked: { type: Boolean, default: undefined },
|
|
|
|
onChange: {
|
|
|
|
type: Function as PropType<(checked: boolean) => void>,
|
|
|
|
},
|
|
|
|
onClick: {
|
|
|
|
type: Function as PropType<(e: MouseEvent) => void>,
|
|
|
|
},
|
|
|
|
'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
|
|
|
|
});
|
|
|
|
export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof checkableTagProps>>>;
|
|
|
|
|
2020-10-04 14:08:12 +00:00
|
|
|
const CheckableTag = defineComponent({
|
2022-09-26 13:33:41 +00:00
|
|
|
compatConfig: { MODE: 3 },
|
2020-10-04 14:08:12 +00:00
|
|
|
name: 'ACheckableTag',
|
2022-03-26 14:52:54 +00:00
|
|
|
props: checkableTagProps(),
|
|
|
|
// emits: ['update:checked', 'change', 'click'],
|
2020-10-04 14:08:12 +00:00
|
|
|
setup(props, { slots, emit }) {
|
2021-06-09 14:50:40 +00:00
|
|
|
const { prefixCls } = useConfigInject('tag', props);
|
2020-10-04 14:08:12 +00:00
|
|
|
const handleClick = (e: MouseEvent) => {
|
|
|
|
const { checked } = props;
|
|
|
|
emit('update:checked', !checked);
|
|
|
|
emit('change', !checked);
|
|
|
|
emit('click', e);
|
|
|
|
};
|
2020-08-23 11:33:01 +00:00
|
|
|
|
2021-06-09 14:50:40 +00:00
|
|
|
const cls = computed(() =>
|
|
|
|
classNames(prefixCls.value, {
|
|
|
|
[`${prefixCls.value}-checkable`]: true,
|
|
|
|
[`${prefixCls.value}-checkable-checked`]: props.checked,
|
|
|
|
}),
|
|
|
|
);
|
2020-08-23 11:33:01 +00:00
|
|
|
|
2021-06-09 14:50:40 +00:00
|
|
|
return () => {
|
2020-10-04 14:08:12 +00:00
|
|
|
return (
|
2021-06-09 14:50:40 +00:00
|
|
|
<span class={cls.value} onClick={handleClick}>
|
2020-10-04 14:08:12 +00:00
|
|
|
{slots.default?.()}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
2020-08-23 11:33:01 +00:00
|
|
|
|
|
|
|
export default CheckableTag;
|