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

feat(Slideover): allow opening from the right side (#64)

Browse Source
This commit is contained in:
Sylvain Marroufin
2022-06-23 15:58:58 +02:00
committed by GitHub
parent c3a200d450
commit aecfef20e6
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/runtime/components/overlays/Slideover.vue
View File

@@ -1,6 +1,12 @@
<template> <template>
<TransitionRoot as="template" :show="isOpen"> <TransitionRoot as="template" :show="isOpen">
<Dialog class="fixed inset-0 flex z-40" @close="isOpen = false"> <Dialog
class="fixed inset-0 flex z-40"
:class="{
'justify-end': side === 'right'
}"
@close="isOpen = false"
>
<TransitionChild <TransitionChild
as="template" as="template"
enter="transition-opacity ease-linear duration-300" enter="transition-opacity ease-linear duration-300"
@@ -16,11 +22,11 @@
<TransitionChild <TransitionChild
as="template" as="template"
enter="transition ease-in-out duration-300 transform" enter="transition ease-in-out duration-300 transform"
enter-from="-translate-x-full" :enter-from="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
enter-to="translate-x-0" enter-to="translate-x-0"
leave="transition ease-in-out duration-300 transform" leave="transition ease-in-out duration-300 transform"
leave-from="translate-x-0" leave-from="translate-x-0"
leave-to="-translate-x-full" :leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
> >
<DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none"> <DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none">
<div v-if="$slots.header" class="border-b u-border-gray-200"> <div v-if="$slots.header" class="border-b u-border-gray-200">
@@ -45,6 +51,11 @@ const props = defineProps({
modelValue: { modelValue: {
type: Boolean as PropType<boolean>, type: Boolean as PropType<boolean>,
default: false default: false
},
side: {
type: String,
default: 'left',
validator: (value: string) => ['left', 'right'].includes(value)
} }
}) })
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])