ant-design-vue/components/vc-overflow/RawItem.tsx
Garret MH a2f7d6d062
feat: Vue 3 Migration Build support (#5973), close #5765
closes vueComponent/ant-design-vue#5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.
2022-09-26 21:33:41 +08:00

52 lines
1.5 KiB
Vue

import { defineComponent } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import { OverflowContextProvider, useInjectOverflowContext } from './context';
import Item from './Item';
export default defineComponent({
compatConfig: { MODE: 3 },
name: 'RawItem',
inheritAttrs: false,
props: {
component: PropTypes.any,
title: PropTypes.any,
id: String,
onMouseenter: { type: Function },
onMouseleave: { type: Function },
onClick: { type: Function },
onKeydown: { type: Function },
onFocus: { type: Function },
},
setup(props, { slots, attrs }) {
const context = useInjectOverflowContext();
return () => {
// Render directly when context not provided
if (!context.value) {
const { component: Component = 'div', ...restProps } = props;
return (
<Component {...restProps} {...attrs}>
{slots.default?.()}
</Component>
);
}
const { className: contextClassName, ...restContext } = context.value;
const { class: className, ...restProps } = attrs;
// Do not pass context to sub item to avoid multiple measure
return (
<OverflowContextProvider value={null}>
<Item
class={classNames(contextClassName, className)}
{...restContext}
{...restProps}
{...props}
v-slots={slots}
></Item>
</OverflowContextProvider>
);
};
},
});