Global slideover (#619)

resources/js/components/GlobalSlideover.vue

@@ -0,0 +1,19 @@
+<script>
+export default {
+    props: {
+        title: String,
+        position: String,
+        content: String,
+    },
+
+    render() {
+        return this.$scopedSlots.default(this)
+    },
+
+    methods: {
+        open() {
+            this.$root.$emit('global-slideover-open', { content: this.content, title: this.title, position: this.position })
+        },
+    },
+}
+</script>

resources/js/components/GlobalSlideoverInstance.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+    render() {
+        return this.$scopedSlots.default(this)
+    },
+
+    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
+        })
+    },
+}
+</script>

resources/js/vue-components.js

@@ -18,6 +18,10 @@ Vue.component('graphql-mutation', graphqlMutation)
 
 import notifications from './components/Notifications/Notifications.vue'
 Vue.component('notifications', notifications)
+import globalSlideover from './components/GlobalSlideover.vue'
+Vue.component('global-slideover', globalSlideover)
+import globalSlideoverInstance from './components/GlobalSlideoverInstance.vue'
+Vue.component('global-slideover-instance', globalSlideoverInstance)
 
 import images from './components/Product/Images.vue'
 Vue.component('images', images)

resources/views/components/slideover/global.blade.php

@@ -0,0 +1,25 @@
+{{--
+This is a wrapper for the global slideover. Use this as much as possible to reduce the amount of html elements in the DOM.
+
+Standard usage may look like this:
+```
+<x-rapidez::slideover.global :title="__('My slideover')">
+    <x-slot:label class="rounded p-3 border">
+        Click me
+    </x-slot:label>
+
+    <div class="font-semibold">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</x-rapidez::slideover.global>
+```
+--}}
+
+@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>

resources/views/layouts/app.blade.php

@@ -34,6 +34,8 @@
         </main>
         @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.footer')
         @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.footer')
+
+        @include('rapidez::layouts.partials.global-slideover')
         @stack('page_end')
     </div>
 

resources/views/layouts/partials/global-slideover.blade.php

@@ -0,0 +1,14 @@
+<global-slideover-instance>
+    <template v-slot="{ content, title, position }" v-cloak>
+        <x-rapidez::slideover
+            id="slideover-global"
+            v-bind:class="{ '-right-full peer-checked:right-0 !left-auto': (position ?? 'left') === 'right' }"
+        >
+            <x-slot:title>
+                <div v-html="title"></div>
+            </x-slot:title>
+
+            <div v-html="content"></div>
+        </x-rapidez::slideover>
+    </template>
+</global-slideover-instance>