mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
348 lines
24 KiB
Plaintext
348 lines
24 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Modal > renders basic case correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-2" aria-labelledby="radix-vue-dialog-title-1" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800" style="pointer-events: auto;">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with body slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-31" aria-labelledby="radix-vue-dialog-title-30" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 p-4 sm:p-6">Body slot</div>
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with class correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-14" aria-labelledby="radix-vue-dialog-title-13" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800 bg-gray-50 dark:bg-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with close slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-29" aria-labelledby="radix-vue-dialog-title-28" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if-->Close slot
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with content slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-21" aria-labelledby="radix-vue-dialog-title-20" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">Content slot</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with default slot correctly 1`] = `
|
|
"Default slot
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-17" role="dialog" aria-describedby="radix-vue-dialog-description-19" aria-labelledby="radix-vue-dialog-title-18" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with description correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-6" aria-labelledby="radix-vue-dialog-title-5" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-5" class="text-gray-900 dark:text-white font-semibold">Title</h2>
|
|
<p id="radix-vue-dialog-description-6" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with description slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-27" aria-labelledby="radix-vue-dialog-title-26" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<p id="radix-vue-dialog-description-27" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description slot</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with footer slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-33" aria-labelledby="radix-vue-dialog-title-32" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<div class="flex items-center gap-x-1.5 p-4 sm:px-6">Footer slot</div>
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with fullscreen correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-8" aria-labelledby="radix-vue-dialog-title-7" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] inset-0">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-7" class="text-gray-900 dark:text-white font-semibold">Title</h2>
|
|
<p id="radix-vue-dialog-description-8" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with header slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-23" aria-labelledby="radix-vue-dialog-title-22" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">Header slot</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with title correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-4" aria-labelledby="radix-vue-dialog-title-3" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-3" class="text-gray-900 dark:text-white font-semibold">Title</h2>
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with title slot correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-25" aria-labelledby="radix-vue-dialog-title-24" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-24" class="text-gray-900 dark:text-white font-semibold">Title slot</h2>
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders with ui correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75 data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-16" aria-labelledby="radix-vue-dialog-title-15" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-2">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders without overlay correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<!--v-if-->
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-10" aria-labelledby="radix-vue-dialog-title-9" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in] top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-9" class="text-gray-900 dark:text-white font-semibold">Title</h2>
|
|
<p id="radix-vue-dialog-description-10" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|
|
|
|
exports[`Modal > renders without transition correctly 1`] = `
|
|
"<!--v-if-->
|
|
<!--teleport start-->
|
|
|
|
|
|
<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
|
|
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-12" aria-labelledby="radix-vue-dialog-title-11" data-state="open" tabindex="-1" class="fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="radix-vue-dialog-title-11" class="text-gray-900 dark:text-white font-semibold">Title</h2>
|
|
<p id="radix-vue-dialog-description-12" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 absolute top-4 right-4">
|
|
<!---->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
|
|
|
|
<!--teleport end-->"
|
|
`;
|