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

feat(Popover): new

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-12 15:42:07 +01:00
parent c384ec94a2
commit c131ce955f
7 changed files with 206 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
test/components/Popover.spec.ts Normal file
View File

@@ -0,0 +1,12 @@
import { describe, it, expect } from 'vitest'
import Popover, { type PopoverProps } from '../../src/runtime/components/Popover.vue'
import ComponentRender from '../component-render'
describe('Popover', () => {
it.each([
['basic case', { props: { open: true, arrow: true }, slots: { default: () => 'Click me', content: () => 'Popover content' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: PopoverProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Popover)
expect(html).toMatchSnapshot()
})
})

14
test/components/__snapshots__/Popover.spec.ts.snap Normal file
View File

@@ -0,0 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Popover > renders basic case correctly 1`] = `
"Click me
<!--teleport start-->
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
<div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-1" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-[popover-down-open_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[popover-down-closed_200ms_ease-in] data-[state=open]:data-[side=right]:animate-[popover-left-open_200ms_ease-out] data-[state=closed]:data-[side=right]:animate-[popover-left-closed_200ms_ease-in] data-[state=open]:data-[side=left]:animate-[popover-right-open_200ms_ease-out] data-[state=closed]:data-[side=left]:animate-[popover-right-closed_200ms_ease-in] data-[state=open]:data-[side=bottom]:animate-[popover-up-open_200ms_ease-out] data-[state=closed]:data-[side=bottom]:animate-[popover-up-closed_200ms_ease-in]" data-side="bottom" data-align="center">Popover content<span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-gray-200 dark:fill-gray-800" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span></div>
</div>
<!--teleport end-->"
`;