Add global slideover

Author: Jade-GG

resources/js/components/GlobalSlideover.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+    props: {
+        title: String,
+        position: String,
+        contents: String,
+    },
+
+    render() {
+        return this.$scopedSlots.default(this)
+    },
+
+    methods: {
+        open() {
+            this.$root.globalSlideover.content = this.slideoverContents
+            this.$root.globalSlideover.title = this.title
+            this.$root.globalSlideover.position = this.position
+        },
+    },
+
+    computed: {
+        slideoverContents() {
+            if (this.contents) {
+                return this.contents
+            }
+
+            return this.$el.querySelector('.global-slideover-wrapper').innerHTML;
+        }
+    },
+}
+</script>

resources/js/package.js

@@ -94,6 +94,11 @@ function init() {
                 // implement payment providers.
                 doNotGoToTheNextStep: false,
             },
+            globalSlideover: {
+                title: '',
+                position: 'left',
+                content: '',
+            },
         },
         methods: {
             search(value) {

resources/js/vue-components.js

@@ -18,6 +18,8 @@ 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 images from './components/Product/Images.vue'
 Vue.component('images', images)

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

@@ -0,0 +1,26 @@
+{{--
+    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.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+    </x-rapidez::slideover.global>
+--}}
+
+@props(['title', 'position' => 'left'])
+@slots(['label', 'contents'])
+
+<global-slideover title="{{ $title }}" position="{{ $position }}" contents="{{ $slot->toHtml() }}" v-slot="slideover">
+    <label {{ $label->attributes->class('global-slideover-label cursor-pointer') }} for="slideover-global" 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,12 @@
+<template v-if="globalSlideover.content ?? false" v-cloak>
+    <x-rapidez::slideover
+        id="slideover-global"
+        v-bind:class="{ '-right-full peer-checked:right-0 !left-auto': (globalSlideover.position ?? 'left') === 'right' }"
+    >
+        <x-slot:title>
+            <div v-html="globalSlideover.title ?? ''"></div>
+        </x-slot:title>
+
+        <div v-html="globalSlideover.content ?? ''"></div>
+    </x-rapidez::slideover>
+</template>