mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Modal): new component
This commit is contained in:
Benjamin Canac
@@ -5,13 +5,13 @@ useHead({
|
||||
}
|
||||
})
|
||||
|
||||
const components = ['avatar', 'badge', 'button', 'chip', 'collapsible', 'kbd', 'popover', 'skeleton', 'tabs', 'tooltip']
|
||||
const components = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'tabs', 'tooltip']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UProvider>
|
||||
<UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
|
||||
<div class="flex gap-1.5 py-4">
|
||||
<div class="flex gap-1.5 py-4 overflow-x-auto w-full">
|
||||
<ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary-500 dark:text-primary-400 font-medium" class="capitalize text-sm">
|
||||
{{ component }}
|
||||
</ULink>
|
||||
|
||||
49
playground/pages/modal.vue
Normal file
49
playground/pages/modal.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<UModal title="First" description="My first modal">
|
||||
<UButton color="white" label="Open with nested" />
|
||||
|
||||
<template #footer>
|
||||
<UModal title="Second" description="My second modal">
|
||||
<UButton label="Open second" />
|
||||
</UModal>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<UModal v-model:open="open" title="Modal with v-model" description="This can be useful to control the state of the modal yourself." />
|
||||
|
||||
<UButton label="Open with v-model" color="gray" @click="open = true" />
|
||||
|
||||
<UModal title="Modal without overlay" description="This modal has `overlay: false` prop." :overlay="false">
|
||||
<UButton label="Open without overlay" color="white" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal without modal & overlay" description="This modal has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
|
||||
<UButton label="Open without modal" color="gray" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal without transition" description="This modal has `transition: false` prop." :transition="false">
|
||||
<UButton label="Open without transition" color="white" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
|
||||
<UButton label="Open fullscreen" color="gray" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
|
||||
<UButton label="Open unclosable" color="white" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal without close button" description="This modal has `close: null` prop." :close="null">
|
||||
<UButton label="Open without close button" color="gray" />
|
||||
</UModal>
|
||||
|
||||
<UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
|
||||
<UButton label="Open with custom close button" color="white" />
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const open = ref(false)
|
||||
</script>
|
||||
163
src/runtime/components/Modal.vue
Normal file
163
src/runtime/components/Modal.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
import { tv } from 'tailwind-variants'
|
||||
import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/modal'
|
||||
import type { ButtonProps } from './Button.vue'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
|
||||
|
||||
const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })
|
||||
|
||||
export interface ModalProps extends DialogRootProps {
|
||||
title?: string
|
||||
description?: string
|
||||
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
|
||||
overlay?: boolean
|
||||
transition?: boolean
|
||||
fullscreen?: boolean
|
||||
preventClose?: boolean
|
||||
portal?: boolean
|
||||
close?: ButtonProps | null
|
||||
class?: any
|
||||
ui?: Partial<typeof modal.slots>
|
||||
}
|
||||
|
||||
export interface ModalEmits extends DialogRootEmits {}
|
||||
|
||||
export interface ModalSlots {
|
||||
default(): any
|
||||
content(): any
|
||||
header(): any
|
||||
title(): any
|
||||
description(): any
|
||||
close(): any
|
||||
body(): any
|
||||
footer(): any
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, toRef } from 'vue'
|
||||
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useAppConfig } from '#app'
|
||||
|
||||
const props = withDefaults(defineProps<ModalProps>(), { portal: true, overlay: true, transition: true })
|
||||
const emits = defineEmits<ModalEmits>()
|
||||
defineSlots<ModalSlots>()
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
|
||||
const contentProps = toRef(() => props.content)
|
||||
const contentEvents = computed(() => {
|
||||
if (props.preventClose) {
|
||||
return {
|
||||
'pointerDownOutside': (e: Event) => e.preventDefault(),
|
||||
'interactOutside': (e: Event) => e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
return {}
|
||||
})
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
const ui = computed(() => tv({ extend: modal, slots: props.ui })({
|
||||
transition: props.transition,
|
||||
fullscreen: props.fullscreen
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot v-bind="rootProps">
|
||||
<DialogTrigger v-if="$slots.default" as-child>
|
||||
<slot />
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogPortal :disabled="!portal">
|
||||
<DialogOverlay v-if="overlay" :class="ui.overlay()" />
|
||||
|
||||
<DialogContent :class="ui.content({ class: props.class })" v-bind="contentProps" v-on="contentEvents">
|
||||
<slot name="content">
|
||||
<div :class="ui.header({ body: !!$slots.body, footer: !!$slots.footer })">
|
||||
<slot name="header">
|
||||
<DialogTitle v-if="title || $slots.title" :class="ui.title()">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogDescription v-if="description || $slots.description" :class="ui.description()">
|
||||
<slot name="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</DialogDescription>
|
||||
|
||||
<DialogClose as-child>
|
||||
<slot name="close">
|
||||
<UButton
|
||||
v-if="close !== null"
|
||||
:icon="appConfig.ui.icons.close"
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
aria-label="Close"
|
||||
v-bind="close"
|
||||
:class="ui.close()"
|
||||
/>
|
||||
</slot>
|
||||
</DialogClose>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.body" :class="ui.body()">
|
||||
<slot name="body" />
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.footer" :class="ui.footer({ body: !!$slots.body })">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</slot>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</DialogRoot>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@keyframes modal-overlay-open {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes modal-overlay-closed {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes modal-content-open {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes modal-content-closed {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@ export { default as collapsible } from './collapsible'
|
||||
export { default as container } from './container'
|
||||
export { default as icons } from './icons'
|
||||
export { default as kbd } from './kbd'
|
||||
export { default as modal } from './modal'
|
||||
export { default as popover } from './popover'
|
||||
export { default as skeleton } from './skeleton'
|
||||
export { default as tabs } from './tabs'
|
||||
|
||||
39
src/theme/modal.ts
Normal file
39
src/theme/modal.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export default {
|
||||
slots: {
|
||||
overlay: 'fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75',
|
||||
content: 'fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 focus:outline-none',
|
||||
header: 'p-4 sm:px-6',
|
||||
body: 'flex-1 p-4 sm:p-6',
|
||||
footer: 'flex items-center gap-x-1.5 p-4 sm:px-6',
|
||||
title: 'text-gray-900 dark:text-white font-semibold',
|
||||
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
|
||||
close: 'absolute top-3 right-4'
|
||||
},
|
||||
variants: {
|
||||
footer: {
|
||||
true: {
|
||||
header: 'pb-0'
|
||||
}
|
||||
},
|
||||
body: {
|
||||
true: {
|
||||
header: 'pb-0',
|
||||
footer: 'pt-0'
|
||||
}
|
||||
},
|
||||
transition: {
|
||||
true: {
|
||||
overlay: 'data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]',
|
||||
content: 'data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in]'
|
||||
}
|
||||
},
|
||||
fullscreen: {
|
||||
true: {
|
||||
content: 'inset-0'
|
||||
},
|
||||
false: {
|
||||
content: '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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
test/components/Modal.spec.ts
Normal file
27
test/components/Modal.spec.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Modal, { type ModalProps } from '../../src/runtime/components/Modal.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Modal', () => {
|
||||
it.each([
|
||||
['basic case', { props: { open: true, portal: false } }],
|
||||
['with title', { props: { open: true, portal: false, title: 'Title' } }],
|
||||
['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
|
||||
['with fullscreen', { props: { open: true, portal: false, fullscreen: true, title: 'Title', description: 'Description' } }],
|
||||
['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
|
||||
['without transition', { props: { open: true, portal: false, transition: false, title: 'Title', description: 'Description' } }],
|
||||
['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
|
||||
['with ui', { props: { open: true, portal: false, ui: { close: 'right-2' } } }],
|
||||
['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
|
||||
['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
|
||||
['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
|
||||
['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
|
||||
['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
|
||||
['with close slot', { props: { open: true, portal: false }, slots: { close: () => 'Close slot' } }],
|
||||
['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
|
||||
['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ModalProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Modal)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
347
test/components/__snapshots__/Modal.spec.ts.snap
Normal file
347
test/components/__snapshots__/Modal.spec.ts.snap
Normal file
@@ -0,0 +1,347 @@
|
||||
// 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 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="p-4 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 sm:px-6 pb-0">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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 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 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="p-4 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 sm:px-6 pb-0">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button type="button" 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-3 right-2" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--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 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="p-4 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" 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-3 right-4" aria-label="Close">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
Reference in New Issue
Block a user