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

chore: update components

Browse Source
This commit is contained in:
Benjamin Canac
2021-11-22 17:29:54 +01:00
parent e76b4b2951
commit 199c466e62
4 changed files with 82 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/overlays/Modal.vue
View File

@@ -7,54 +7,34 @@
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-75"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-75"
leave-from="opacity-100"
leave-to="opacity-0"
entered="opacity-75"
>
<DialogOverlay class="fixed inset-0 bg-gray-500 transition-opacity" />
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</TransitionChild>
<!-- 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">&#8203;</span>
<TransitionChild
enter="ease-out transform duration-300"
as="template"
enter="ease-out 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="ease-in 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">
&#8203;
</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" />
@@ -71,7 +51,6 @@
import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
import Card from '../layout/Card'
import Icon from '../elements/Icon'
export default {
components: {
@@ -79,8 +58,7 @@ export default {
DialogOverlay,
TransitionRoot,
TransitionChild,
Card,
Icon
Card
},
props: {
modelValue: {