Ryan/drop-base
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-base.git synced 2025-11-10 04:22:15 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: fade in fade out + styling

Browse Source
This commit is contained in:
DecDuck
2025-07-27 20:25:21 +10:00
parent 893a4fe8a9
commit 04125e89be
4 changed files with 128 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/ConfirmationModal.vue
View File

@ -1,36 +1,10 @@
<template> <template>
<TransitionRoot <div class="relative z-50" @close="emit('event', 'cancel')">
as="template" <div class="fixed inset-0 bg-zinc-950/75" />
:show="true"
:style="{ 'z-index': props.zHeight }"
>
<Dialog class="relative z-50" @close="emit('event', 'cancel')">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
/>
</TransitionChild>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto"> <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div <div
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0" class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
>
<TransitionChild
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 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"
> >
<div <div
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg" class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
@ -38,11 +12,9 @@
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4"> <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left"> <div class="mt-3 text-center sm:mt-0 sm:text-left">
<DialogTitle <h3 class="text-base font-semibold text-zinc-100">
as="h3" {{ props.data.title }}
class="text-base font-semibold text-zinc-100" </h3>
>{{ props.data.title }}
</DialogTitle>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-zinc-400"> <p class="text-sm text-zinc-400">
{{ props.data.description }} {{ props.data.description }}
@ -72,11 +44,9 @@
</button> </button>
</div> </div>
</div> </div>
</TransitionChild>
</div> </div>
</div> </div>
</Dialog> </div>
</TransitionRoot>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

26
components/ModalStack.vue
View File

@ -1,15 +1,39 @@
<template> <template>
<TransitionGroup name="modal">
<component <component
v-for="(modal, modalIdx) in stack" v-for="(modal, modalIdx) in stack"
:key="modal.data"
:is="modal.component" :is="modal.component"
:z-height="(modalIdx + 1) * 50" :z-height="(modalIdx + 1) * 50"
:loading="modal.loading" :loading="modal.loading"
:data="modal.data" :data="modal.data"
@event="(event: string, ...args: any[]) => handleCallback(modalIdx, event, args)" @event="
(event: string, ...args: any[]) => handleCallback(modalIdx, event, args)
"
/> />
</TransitionGroup>
<div id="modalstack" /> <div id="modalstack" />
</template> </template>
<style>
.modal-enter-active,
.modal-leave-active {
transition: all 0.2s ease;
}
.modal-enter-from {
opacity: 0;
}
.modal-enter-to {
opacity: 100;
}
.modal-leave-from {
opacity: 100;
}
.modal-leave-to {
opacity: 0;
}
</style>
<script setup lang="ts"> <script setup lang="ts">
const stack = useModalStack(); const stack = useModalStack();

37
components/NotificationModal.vue
View File

@ -1,36 +1,12 @@
<template> <template>
<TransitionRoot <div class="relative z-50" @close="emit('event', 'close')">
as="template"
:show="true"
:style="{ 'z-index': props.zHeight }"
>
<Dialog class="relative z-50" @close="emit('event', 'close')">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div <div
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity" class="fixed inset-0 bg-zinc-950/75"
/> />
</TransitionChild>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto"> <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div <div
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0" class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
>
<TransitionChild
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 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"
> >
<div <div
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg" class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
@ -38,11 +14,10 @@
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4"> <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left"> <div class="mt-3 text-center sm:mt-0 sm:text-left">
<DialogTitle <h3
as="h3"
class="text-base font-semibold text-zinc-100" class="text-base font-semibold text-zinc-100"
>{{ props.data.title }} >{{ props.data.title }}
</DialogTitle> </h3>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-zinc-400"> <p class="text-sm text-zinc-400">
{{ props.data.description }} {{ props.data.description }}
@ -64,11 +39,9 @@
</LoadingButton> </LoadingButton>
</div> </div>
</div> </div>
</TransitionChild>
</div> </div>
</div> </div>
</Dialog> </div>
</TransitionRoot>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

55
components/TextInputModal.vue
View File

@ -1,58 +1,33 @@
<template> <template>
<TransitionRoot <div class="relative z-50" @close="emit('event', 'cancel')">
as="template" <div class="fixed inset-0 bg-zinc-950/75" />
:show="true"
:style="{ 'z-index': props.zHeight }"
>
<Dialog class="relative z-50" @close="emit('event', 'cancel')">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
/>
</TransitionChild>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto"> <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div <div
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0" class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
>
<TransitionChild
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 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"
> >
<div <div
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg" class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
> >
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4"> <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left"> <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
<DialogTitle <h3 class="text-base font-semibold text-zinc-100">
as="h3" {{ props.data.title }}
class="text-base font-semibold text-zinc-100" </h3>
>{{ props.data.title }} <div class="mt-1">
</DialogTitle>
<div class="mt-2">
<p class="text-sm text-zinc-400"> <p class="text-sm text-zinc-400">
{{ props.data.description }} {{ props.data.description }}
</p> </p>
</div> </div>
<form @submit.prevent="() => emit('event', 'submit', v)"> <form
class="mt-4 w-full"
@submit.prevent="() => emit('event', 'submit', v)"
>
<input <input
v-model="v" v-model="v"
type="text" type="text"
:placeholder="$t('library.collection.namePlaceholder')" :placeholder="props.data.placeholder"
class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
/> />
<button class="hidden" type="submit" /> <button class="hidden" type="submit" />
@ -69,7 +44,7 @@
type="submit" type="submit"
class="w-full sm:w-fit" class="w-full sm:w-fit"
> >
{{ props.data.buttonText ?? "Confirm" }} {{ props.data.buttonText ?? "Submit" }}
</LoadingButton> </LoadingButton>
<button <button
type="button" type="button"
@ -81,11 +56,9 @@
</button> </button>
</div> </div>
</div> </div>
</TransitionChild>
</div> </div>
</div> </div>
</Dialog> </div>
</TransitionRoot>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">