mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
chore(Modal): refactor component with headlessui
This commit is contained in:
Benjamin Canac
@@ -1,8 +1,36 @@
|
||||
<template>
|
||||
<div class="mx-auto max-w-80em">
|
||||
<div class="mx-auto max-w-7xl flex flex-col">
|
||||
Welcome
|
||||
<NuButton class="ml-3" variant="primary" icon="heroicons-outline:check-circle">
|
||||
<UButton class="ml-3" variant="primary" icon="mdi:bed-single">
|
||||
toto
|
||||
</NuButton>
|
||||
</UButton>
|
||||
|
||||
<UIcon name="mdi:bullhorn" class="w-4 h-4 text-black" />
|
||||
|
||||
<UAvatar class="ml-3" src="https://picsum.photos/200/300" />
|
||||
|
||||
<UButton @click="toggleModalIsOpen()">
|
||||
Toggle modal!
|
||||
</UButton>
|
||||
|
||||
{{ isModalOpen }}
|
||||
|
||||
<UModal v-model="isModalOpen" title="Modal">
|
||||
Body
|
||||
</UModal>
|
||||
|
||||
<!-- <UPopover v-slot="{ open }">
|
||||
<UButton trailing variant="white" :icon="open ? 'heroicons-outline:chevron-up' : 'heroicons-outline:chevron-down'">
|
||||
toto
|
||||
</UButton>
|
||||
</UPopover> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const isModalOpen = ref(false)
|
||||
|
||||
function toggleModalIsOpen () {
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,179 +1,117 @@
|
||||
<template>
|
||||
<div v-if="showModal" class="fixed inset-0 z-50 overflow-hidden modal">
|
||||
<div class="flex items-start justify-center min-h-screen">
|
||||
<transition
|
||||
appear
|
||||
enter-class="opacity-0"
|
||||
enter-active-class="duration-300 ease-out"
|
||||
enter-to-class="opacity-100"
|
||||
leave-class="opacity-100"
|
||||
leave-active-class="duration-200 ease-in"
|
||||
leave-to-class="opacity-0"
|
||||
@before-leave="backdropLeaving = true"
|
||||
@after-leave="backdropLeaving = false"
|
||||
>
|
||||
<div v-if="showBackdrop" class="fixed inset-0 transition-opacity bg-gray-800 sm:bg-opacity-75" @click="open = false" />
|
||||
</transition>
|
||||
<TransitionRoot :show="isOpen" as="template">
|
||||
<Dialog @close="setIsOpen">
|
||||
<div class="fixed z-10 inset-0 overflow-y-auto">
|
||||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-75"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-75"
|
||||
leave-to="opacity-0"
|
||||
entered="opacity-75"
|
||||
>
|
||||
<DialogOverlay class="fixed inset-0 bg-gray-500 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<transition
|
||||
appear
|
||||
enter-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
|
||||
enter-active-class="duration-300 ease-out"
|
||||
enter-to-class="translate-y-0 opacity-100 sm:scale-100"
|
||||
leave-class="translate-y-0 opacity-100 sm:scale-100"
|
||||
leave-active-class="duration-200 ease-in"
|
||||
leave-to-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
|
||||
@before-leave="contentLeaving = true"
|
||||
@after-leave="contentLeaving = false"
|
||||
>
|
||||
<Card
|
||||
v-if="showContent"
|
||||
v-bind="$attrs"
|
||||
class="z-50 flex flex-col flex-1 w-screen h-screen mx-auto overflow-hidden shadow-xl"
|
||||
:class="modalClass"
|
||||
variant="white"
|
||||
ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
|
||||
aria-modal="true"
|
||||
>
|
||||
<template v-if="$slots.header" #header>
|
||||
<slot name="header" />
|
||||
</template>
|
||||
<template v-else-if="title" #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-medium sm:text-lg sm:leading-6 text-tw-gray-900">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close panel"
|
||||
class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
@click="open = false"
|
||||
>
|
||||
<Icon name="outline/x" class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
<template v-if="$slots.footer" #footer>
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</Card>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<TransitionChild
|
||||
enter="ease-out transform duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in transform duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
|
||||
<Card
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
v-bind="$attrs"
|
||||
variant="white"
|
||||
ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700"
|
||||
>
|
||||
<template v-if="$slots.header" #header>
|
||||
<slot name="header" />
|
||||
</template>
|
||||
<template v-else-if="title" #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-medium sm:text-lg sm:leading-6 text-tw-gray-900">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close panel"
|
||||
class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
<Icon name="heroicons-outline:x" class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
<template v-if="$slots.footer" #footer>
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</Card>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../elements/Icon'
|
||||
import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
|
||||
|
||||
import Card from '../layout/Card'
|
||||
import Icon from '../elements/Icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
Card
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
TransitionRoot,
|
||||
TransitionChild,
|
||||
Card,
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'sm:my-20 sm:max-w-xl sm:h-auto'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false,
|
||||
showBackdrop: false,
|
||||
showContent: false,
|
||||
backdropLeaving: false,
|
||||
contentLeaving: false
|
||||
}
|
||||
},
|
||||
head () {
|
||||
if (this.open) {
|
||||
return {
|
||||
bodyAttrs: {
|
||||
class: ['overflow-hidden']
|
||||
},
|
||||
htmlAttrs: {
|
||||
style: ['touch-action: none;']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
},
|
||||
computed: {
|
||||
modalClass () {
|
||||
return this.fullscreen ? 'sm:m-10 sm:h-[calc(100vh-5rem)]' : this.baseClass
|
||||
},
|
||||
leaving () {
|
||||
return this.backdropLeaving || this.contentLeaving
|
||||
},
|
||||
open: {
|
||||
emits: ['update:modelValue'],
|
||||
setup (props, { emit }) {
|
||||
const isOpen = computed({
|
||||
get () {
|
||||
return this.value
|
||||
return props.modelValue
|
||||
},
|
||||
set (open) {
|
||||
this.$emit('input', open)
|
||||
set (value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
open: {
|
||||
handler (newValue) {
|
||||
if (newValue) {
|
||||
this.show()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
setIsOpen (value) {
|
||||
isOpen.value = value
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
leaving (newValue) {
|
||||
if (newValue === false) {
|
||||
this.showModal = false
|
||||
this.open = false
|
||||
toggleIsOpen () {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
}
|
||||
},
|
||||
shortcuts: {
|
||||
disabled () {
|
||||
return !this.open
|
||||
},
|
||||
esc: 'esc'
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.showModal = true
|
||||
this.showBackdrop = true
|
||||
this.showContent = true
|
||||
},
|
||||
close () {
|
||||
this.showBackdrop = false
|
||||
this.showContent = false
|
||||
},
|
||||
esc () {
|
||||
this.$listeners.close ? this.$listeners.close() : this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user