arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Slideover): add top / bottom sides

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 21:36:05 +01:00
parent da9ea7ac17
commit 3e8a99244e
5 changed files with 142 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/runtime/components/Slideover.vue
View File

@@ -16,7 +16,7 @@ export interface SlideoverProps extends DialogRootProps {
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
overlay?: boolean
transition?: boolean
side?: 'left' | 'right'
side?: 'left' | 'right' | 'top' | 'bottom'
preventClose?: boolean
portal?: boolean
close?: ButtonProps | null
@@ -173,4 +173,36 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
transform: translateX(-100%);
}
}
@keyframes slideover-content-top-open {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-top-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideover-content-bottom-open {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-bottom-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
</style>

14
src/theme/slideover.ts
View File

@@ -1,7 +1,7 @@
export default {
slots: {
overlay: 'fixed inset-0 z-30 bg-gray-200/75 dark:bg-gray-800/75',
content: 'fixed inset-y-0 z-50 sm:shadow-lg w-full max-w-md bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 flex flex-col focus:outline-none',
content: 'fixed z-50 bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 sm:ring ring-gray-200 dark:ring-gray-800 sm:shadow-lg flex flex-col focus:outline-none',
header: 'px-4 py-5 sm:px-6',
body: 'flex-1 overflow-y-auto p-4 sm:p-6',
footer: 'flex items-center gap-x-1.5 p-4 sm:px-6',
@@ -12,16 +12,22 @@ export default {
variants: {
side: {
left: {
content: 'left-0'
content: 'left-0 inset-y-0 w-full max-w-md'
},
right: {
content: 'right-0'
content: 'right-0 inset-y-0 w-full max-w-md'
},
top: {
content: 'inset-x-0 top-0'
},
bottom: {
content: 'inset-x-0 bottom-0'
}
},
transition: {
true: {
overlay: 'data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]',
content: 'data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out]'
content: 'data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out] data-[state=open]:data-[side=top]:animate-[slideover-content-top-open_200ms_ease-in-out] data-[state=open]:data-[side=bottom]:animate-[slideover-content-bottom-open_200ms_ease-in-out] data-[state=closed]:data-[side=top]:animate-[slideover-content-top-closed_200ms_ease-in-out] data-[state=closed]:data-[side=bottom]:animate-[slideover-content-bottom-closed_200ms_ease-in-out]'
}
}
}