Global slideover using teleport (#703)

rapidez · Jan 24, 2025 · f2d8a08 · f2d8a08
1 parent 2cdff4d
commit f2d8a08
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
         "vue-clickaway": "^2.2.2",
         "vue-cookies": "^1.8.2",
         "vue-template-compiler": "^2.7.14",
-        "vue-turbolinks": "^2.2.2"
+        "vue-turbolinks": "^2.2.2",
+        "vue2-teleport": "^1.1.4"
     },
     "dependencies": {}
 }
diff --git a/resources/js/components/GlobalSlideover.vue b/resources/js/components/GlobalSlideover.vue
@@ -3,14 +3,23 @@ export default {
     props: {
         title: String,
         position: String,
-        content: String,
+    },
+    data() {
+        return {
+            isCurrentSlideover: false,
+        }
     },
     render() {
         return this.$scopedSlots.default(this)
     },
+    mounted() {
+        this.$root.$on('global-slideover-open', (data) => {
+            this.isCurrentSlideover = data.initiator === this
+        })
+    },
     methods: {
         open() {
-            this.$root.$emit('global-slideover-open', { content: this.content, title: this.title, position: this.position })
+            this.$root.$emit('global-slideover-open', { title: this.title, position: this.position, initiator: this })
         },
     },
 }

diff --git a/resources/js/components/GlobalSlideoverInstance.vue b/resources/js/components/GlobalSlideoverInstance.vue
@@ -5,14 +5,12 @@ export default {
     },
     data() {
         return {
-            content: '',
             title: '',
             position: 'left',
         }
     },
     mounted() {
         this.$root.$on('global-slideover-open', (data) => {
-            this.content = data.content || ''
             this.title = data.title || ''
             this.position = data.position || 'left'
             this.$el.querySelector('#slideover-global').checked = true

diff --git a/resources/js/vue-components.js b/resources/js/vue-components.js
@@ -1,3 +1,6 @@
+import Teleport from 'vue2-teleport'
+Vue.component('teleport', Teleport)
+
 import toggler from './components/Elements/Toggler.vue'
 Vue.component('toggler', toggler)
 

diff --git a/resources/views/checkout/steps/agreements.blade.php b/resources/views/checkout/steps/agreements.blade.php
@@ -1,23 +1,30 @@
 <graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }" cache="checkout.agreements" v-cloak>
     <div slot-scope="{ data }" v-if="data">
         <div v-for="agreement in data.checkoutAgreements" :key="agreement.agreement_id">
-            <global-slideover :title="agreement.name" :content="'<div class=&quot;p-3' + (!agreement.is_html ? ' whitespace-pre-line' : '') + '&quot;>' + agreement.content + '</div>'" v-slot="slideover">
-                <template v-if="agreement.mode == 'AUTO'">
-                    <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
-                        @{{ agreement.checkbox_text }}
-                    </label>
-                </template>
-                <div v-else>
-                    <x-rapidez::input.checkbox
-                        name="agreement_ids[]"
-                        v-bind:value="agreement.agreement_id"
-                        dusk="agreements"
-                        required
-                    >
+            <global-slideover :title="agreement.name" v-slot="slideover">
+                <div>
+                    <div class="hidden">
+                        <teleport to="#global-slideover-content" :disabled="!slideover.isCurrentSlideover">
+                            <div v-bind:class="{'p-3': true, 'whitespace-pre-line': !agreement.is_html}" v-html="agreement.content"></div>
+                        </teleport>
+                    </div>
+                    <template v-if="agreement.mode == 'AUTO'">
                         <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
                             @{{ agreement.checkbox_text }}
                         </label>
-                    </x-rapidez::input.checkbox>
+                    </template>
+                    <template v-else>
+                        <x-rapidez::input.checkbox
+                            name="agreement_ids[]"
+                            v-bind:value="agreement.agreement_id"
+                            dusk="agreements"
+                            required
+                        >
+                            <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
+                                @{{ agreement.checkbox_text }}
+                            </label>
+                        </x-rapidez::input.checkbox>
+                    </template>
                 </div>
             </global-slideover>
         </div>

diff --git a/resources/views/components/slideover/global.blade.php b/resources/views/components/slideover/global.blade.php
@@ -16,8 +16,15 @@
 @props(['title', 'position' => 'left'])
 @slots(['label'])
 
-<global-slideover title="{{ $title }}" position="{{ $position }}" content="{{ $slot->toHtml() }}" v-slot="slideover">
-    <label {{ $label->attributes->class('global-slideover-label cursor-pointer') }} v-on:click="slideover.open">
-        {{ $label }}
-    </label>
+<global-slideover title="{{ $title }}" position="{{ $position }}" v-slot="slideover">
+    <div>
+        <label {{ $label->attributes->class('global-slideover-label cursor-pointer') }} v-on:click="slideover.open">
+            {{ $label }}
+        </label>
+        <div class="hidden">
+            <teleport to="#global-slideover-content" :disabled="!slideover.isCurrentSlideover">
+                <div>{{ $slot }}</div>
+            </teleport>
+        </div>
+    </div>
 </global-slideover>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -27,15 +27,14 @@
 </head>
 <body class="text antialiased has-[.prevent-scroll:checked]:overflow-clip">
     <div id="app" class="flex flex-col min-h-dvh">
+        @include('rapidez::layouts.partials.global-slideover')
         @includeWhen(!request()->routeIs('checkout'), 'rapidez::layouts.partials.header')
         @includeWhen(request()->routeIs('checkout'), 'rapidez::layouts.checkout.header')
         <main>
             @yield('content')
         </main>
         @includeWhen(!request()->routeIs('checkout'), 'rapidez::layouts.partials.footer')
         @includeWhen(request()->routeIs('checkout'), 'rapidez::layouts.checkout.footer')
-
-        @include('rapidez::layouts.partials.global-slideover')
         @stack('page_end')
     </div>
 

diff --git a/resources/views/layouts/partials/global-slideover.blade.php b/resources/views/layouts/partials/global-slideover.blade.php
@@ -8,7 +8,7 @@
                 <div v-html="title"></div>
             </x-slot:title>
 
-            <div v-html="content"></div>
+            <div id="global-slideover-content"></div>
         </x-rapidez::slideover>
     </template>
 </global-slideover-instance>
diff --git a/yarn.lock b/yarn.lock
@@ -1840,8 +1840,16 @@ source-map@^0.7.2, source-map@^0.7.4:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1859,7 +1867,14 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -2115,6 +2130,11 @@ vue-types@^1.7.0:
   dependencies:
     is-plain-object "3.0.0"
 
+vue2-teleport@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
+  integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==
+
 vue@^2.7:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
@@ -2143,8 +2163,16 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==