Skip to content

Commit

Permalink
fix: wrap teleports in client-only (#367)
Browse files Browse the repository at this point in the history 
* fix: wrap teleports in client-only

* cleanup

* cleanup
  • Loading branch information
@andreiio
andreiio authored May 17, 2024
1 parent 79535fe commit 695b1cb
Show file tree
Hide file tree
Showing 10 changed files with 1,304 additions and 939 deletions.
733 changes: 523 additions & 210 deletions package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,25 @@
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/server-renderer": "^3.4.18",
"@vueform/multiselect": "^2.6.6",
"@vuepic/vue-datepicker": "^6.0.3",
"@vueuse/core": "^10.7.2",
"autoprefixer": "^10.4.17",
"axios": "^1.6.7",
"chart.js": "^4.4.1",
"laravel-vite-plugin": "^0.8.1",
"laravel-vite-plugin": "^1.0.3",
"laravel-vue-i18n": "^2.7.6",
"photoswipe": "^5.4.3",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.1",
"tippy.js": "^6.3.7",
"vite": "^4.5.0",
"vite": "^5.2.11",
"vite-plugin-svg-icons": "^2.0.1",
"vite-svg-loader": "^4.0.0",
"vue": "^3.4.18",
"vite-svg-loader": "^5.1.0",
"vue": "^3.4.27",
"vue-chartjs": "^5.3.0",
"vue3-carousel": "^0.3.1",
"ziggy-js": "^1.8.1"
Expand Down
64 changes: 35 additions & 29 deletions resources/js/Components/OrganizationStatus.vue
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,50 @@
<template>
<Teleport to="#notification-teleport-target">
<transition
enter-active-class="transition duration-300 ease-out transform"
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
leave-active-class="transition duration-100 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-if="isVisible"
class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
<ClientOnly>
<Teleport to="#notification-teleport-target">
<transition
enter-active-class="transition duration-300 ease-out transform"
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
leave-active-class="transition duration-100 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div class="flex items-center gap-3">
<Component :is="ExclamationCircleIcon" class="w-6 h-6 text-red-500 shrink-0" aria-hidden="true" />
<div
v-if="isVisible"
class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
>
<div class="flex items-center gap-3">
<Component
:is="ExclamationCircleIcon"
class="w-6 h-6 text-red-500 shrink-0"
aria-hidden="true"
/>

<div class="flex-1 w-0">
<p class="text-sm font-medium text-gray-900" v-text="message" />
</div>
<div class="flex-1 w-0">
<p class="text-sm font-medium text-gray-900" v-text="message" />
</div>

<button
type="button"
@click="hide"
class="inline-flex text-gray-400 bg-white rounded-md shrink-0 hover:text-gray-500"
>
<span class="sr-only">Close</span>
<XIcon class="w-5 h-5" aria-hidden="true" />
</button>
<button
type="button"
@click="hide"
class="inline-flex text-gray-400 bg-white rounded-md shrink-0 hover:text-gray-500"
>
<span class="sr-only">Close</span>
<XIcon class="w-5 h-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
</transition>
</Teleport>
</transition>
</Teleport>
</ClientOnly>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { ExclamationCircleIcon, XIcon } from '@heroicons/vue/solid';
import { trans } from 'laravel-vue-i18n';
import ClientOnly from '@/Components/ClientOnly.vue';
const status = computed(() => usePage().props.auth.organization.status || null);
Expand All @@ -47,7 +54,6 @@
const show = () => (isVisible.value = true);
const hide = () => (isVisible.value = false);
onMounted(() => {
if (!status || status.value === 'approved') {
hide();
} else {
Expand Down
137 changes: 71 additions & 66 deletions resources/js/Components/modals/ConfirmationModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,81 +8,85 @@
v-text="trigger"
/>

<Teleport to="body">
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="relative z-10" @close="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 class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
</TransitionChild>
<ClientOnly>
<Teleport to="#notification-teleport-target">
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="relative z-10" @close="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 class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
</TransitionChild>

<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div class="flex items-end justify-center min-h-full 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 class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div
class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0"
>
<DialogPanel
class="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
<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 class="sm:flex sm:items-start">
<div
class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full sm:mx-0 sm:h-10 sm:w-10"
:class="iconColor"
>
<component :is="icon" class="w-6 h-6" aria-hidden="true" />
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<DialogTitle
as="h3"
class="text-base font-semibold leading-6 text-gray-900"
<DialogPanel
class="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
>
<div class="sm:flex sm:items-start">
<div
class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full sm:mx-0 sm:h-10 sm:w-10"
:class="iconColor"
>
{{ title }}
</DialogTitle>
<component :is="icon" class="w-6 h-6" aria-hidden="true" />
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<DialogTitle
as="h3"
class="text-base font-semibold leading-6 text-gray-900"
>
{{ title }}
</DialogTitle>

<div class="mt-2 text-sm text-gray-500">
<slot name="content">
{{ content }}
</slot>
<div class="mt-2 text-sm text-gray-500">
<slot name="content">
{{ content }}
</slot>
</div>
</div>
</div>
</div>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button
type="button"
class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold rounded-md shadow-sm sm:ml-3 sm:w-auto"
:class="buttonColor"
@click="confirm"
v-text="confirmActionLabel || trigger"
/>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button
type="button"
class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold rounded-md shadow-sm sm:ml-3 sm:w-auto"
:class="buttonColor"
@click="confirm"
v-text="confirmActionLabel || trigger"
/>

<button
type="button"
class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
@click="close"
ref="cancelButtonRef"
v-text="cancelActionLabel || $t('cancel')"
/>
</div>
</DialogPanel>
</TransitionChild>
<button
type="button"
class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
@click="close"
ref="cancelButtonRef"
v-text="cancelActionLabel || $t('cancel')"
/>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</div>
</Dialog>
</TransitionRoot>
</Teleport>
</Dialog>
</TransitionRoot>
</Teleport>
</ClientOnly>
</div>
</template>

Expand All @@ -91,6 +95,7 @@
import { useForm } from '@inertiajs/vue3';
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
import { ExclamationIcon } from '@heroicons/vue/outline';
import ClientOnly from '@/Components/ClientOnly.vue';
const props = defineProps({
title: {
Expand Down
Loading

0 comments on commit 695b1cb

Please sign in to comment.