arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Tooltip): remove useless slots

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-17 12:01:00 +02:00
parent e54dd55053
commit 6f88f355fa
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/runtime/components/Tooltip.vue
View File

@@ -25,8 +25,6 @@ export interface TooltipEmits extends TooltipRootEmits {}
export interface TooltipSlots {
default(): any
content(): any
text(): any
shortcuts(): any
}
</script>
@@ -57,14 +55,10 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })({ side: conte
<TooltipPortal :disabled="!portal">
<TooltipContent v-bind="contentProps" :class="ui.content({ class: props.class })">
<slot name="content">
<span v-if="text || $slots.text" :class="ui.text()">
<slot name="text">{{ text }}</slot>
</span>
<span v-if="text" :class="ui.text()">{{ text }}</span>
<span v-if="shortcuts?.length || $slots.shortcuts" :class="ui.shortcuts()">
<slot name="shortcuts">
<UKbd v-for="(shortcut, index) in shortcuts" :key="index" size="sm" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
</slot>
<span v-if="shortcuts?.length" :class="ui.shortcuts()">
<UKbd v-for="(shortcut, index) in shortcuts" :key="index" size="sm" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
</span>
</slot>

3
test/components/Tooltip.spec.ts
View File

@@ -20,7 +20,8 @@ describe('Tooltip', () => {
['with arrow', { props: { text: 'Tooltip', arrow: true, open: true, portal: false } }],
['with shortcuts', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false } }],
// Slots
['with default slot', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false }, slots: { default: () => 'Default slot' } }]
['with default slot', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false }, slots: { default: () => 'Default slot' } }],
['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TooltipProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, TooltipWrapper)
expect(html).toMatchSnapshot()

12
test/components/__snapshots__/Tooltip.spec.ts.snap
View File

@@ -11,6 +11,18 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
</div>
<!--teleport end-->"
`;
exports[`Tooltip > renders with content slot correctly 1`] = `
"<!--teleport start-->
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out]" data-side="bottom" data-align="center"><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-5" role="tooltip"></span></div>
</div>
<!--teleport end-->"
`;