refactor(presence): enhance slot handling and attribute forwarding

This commit is contained in:
2026-03-26 17:19:31 +07:00
parent fe527daad1
commit 333a18cbaf
3 changed files with 70 additions and 3 deletions
+8 -2
View File
@@ -3,9 +3,14 @@ export interface PresenceProps {
present: boolean; present: boolean;
forceMount?: boolean; forceMount?: boolean;
} }
export default {
inheritAttrs: false,
};
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { Slot } from '../primitive/Slot';
import { usePresence } from './usePresence'; import { usePresence } from './usePresence';
const { const {
@@ -23,6 +28,7 @@ defineExpose({ present: isPresent });
</script> </script>
<template> <template>
<!-- @vue-expect-error ref is forwarded to slot --> <Slot v-if="forceMount || isPresent" :ref="setRef" v-bind="$attrs">
<slot v-if="forceMount || present || isPresent" :ref="setRef" :present="isPresent" /> <slot :present="isPresent" />
</Slot>
</template> </template>
@@ -203,6 +203,67 @@ describe('Presence', () => {
expect(slotPresent).toBe(false); expect(slotPresent).toBe(false);
wrapper.unmount(); wrapper.unmount();
}); });
it('forwards attrs to slot child', () => {
const wrapper = mount(Presence, {
props: { present: true },
attrs: { class: 'fade', 'data-testid': 'box' },
slots: { default: () => h('div', 'content') },
});
const div = wrapper.find('div');
expect(div.classes()).toContain('fade');
expect(div.attributes('data-testid')).toBe('box');
wrapper.unmount();
});
it('forwards style to slot child', () => {
const wrapper = mount(Presence, {
props: { present: true },
attrs: { style: 'color: red' },
slots: { default: () => h('div', 'content') },
});
expect(wrapper.find('div').attributes('style')).toContain('color: red');
wrapper.unmount();
});
it('merges attrs when child already has attrs', () => {
const wrapper = mount(Presence, {
props: { present: true },
attrs: { class: 'outer' },
slots: { default: () => h('div', { class: 'inner' }, 'content') },
});
const div = wrapper.find('div');
expect(div.classes()).toContain('outer');
expect(div.classes()).toContain('inner');
wrapper.unmount();
});
it('does not render attrs when not present', () => {
const wrapper = mount(Presence, {
props: { present: false },
attrs: { class: 'fade' },
slots: { default: () => h('div', 'content') },
});
expect(wrapper.find('div').exists()).toBe(false);
wrapper.unmount();
});
it('forwards attrs with forceMount', () => {
const wrapper = mount(Presence, {
props: { present: false, forceMount: true },
attrs: { class: 'fade', 'data-testid': 'forced' },
slots: { default: () => h('div', 'content') },
});
const div = wrapper.find('div');
expect(div.classes()).toContain('fade');
expect(div.attributes('data-testid')).toBe('forced');
wrapper.unmount();
});
}); });
describe('usePresence (animation)', () => { describe('usePresence (animation)', () => {
+1 -1
View File
@@ -1,5 +1,5 @@
import type { SetupContext } from 'vue';
import { cloneVNode, warn } from 'vue'; import { cloneVNode, warn } from 'vue';
import type { SetupContext } from 'vue';
import { getRawChildren } from '../utils/getRawChildren'; import { getRawChildren } from '../utils/getRawChildren';
type FunctionalComponentContext = Omit<SetupContext, 'expose'>; type FunctionalComponentContext = Omit<SetupContext, 'expose'>;