vue components refactoring

resources/js/components/Popups/Components/PopupActions.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PopupActions',
+}
+</script>

resources/js/components/Popups/Components/PopupContent.vue

@@ -0,0 +1,15 @@
+<template>
+    <div
+        :class="type"
+        class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-auto px-6 md:relative md:top-0 md:bottom-0"
+    >
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PopupContent',
+    props: ['type'],
+}
+</script>

resources/js/components/Popups/Components/PopupHeader.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="flex items-center justify-between px-6 pt-6 pb-6">
+        <div class="flex items-center">
+            <div class="mr-3">
+                <upload-cloud-icon v-if="icon === 'upload'" size="18" class="vue-feather text-theme" />
+                <corner-down-right-icon v-if="icon === 'move'" size="18" class="vue-feather text-theme" />
+                <share-icon v-if="icon === 'share'" size="18" class="vue-feather text-theme" />
+                <edit2-icon v-if="icon === 'edit'" size="18" class="vue-feather text-theme" />
+                <key-icon v-if="icon === 'key'" size="18" class="vue-feather text-theme" />
+                <users-icon v-if="icon === 'users'" size="18" class="vue-feather text-theme" />
+                <user-plus-icon v-if="icon === 'user-plus'" size="18" class="vue-feather text-theme" />
+                <credit-card-icon v-if="icon === 'credit-card'" size="18" class="vue-feather text-theme" />
+                <bell-icon v-if="icon === 'bell'" size="18" class="vue-feather text-theme" />
+            </div>
+
+            <b class="text-base font-bold">
+                {{ title }}
+            </b>
+        </div>
+        <div @click="closePopup" class="-m-3 cursor-pointer p-3">
+            <x-icon size="14" class="hover-text-theme vue-feather" />
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+	BellIcon,
+	UploadCloudIcon,
+    CreditCardIcon,
+    KeyIcon,
+    UserPlusIcon,
+    CornerDownRightIcon,
+    LinkIcon,
+    XIcon,
+    Edit2Icon,
+    ShareIcon,
+    UsersIcon,
+} from 'vue-feather-icons'
+import { events } from '../../../bus'
+
+export default {
+    name: 'PopupHeader',
+    props: ['title', 'icon'],
+    components: {
+		BellIcon,
+		UploadCloudIcon,
+        CornerDownRightIcon,
+        CreditCardIcon,
+        UserPlusIcon,
+        UsersIcon,
+        ShareIcon,
+        Edit2Icon,
+        LinkIcon,
+        KeyIcon,
+        XIcon,
+    },
+    methods: {
+        closePopup() {
+            events.$emit('popup:close')
+        },
+    },
+}
+</script>

resources/js/components/Popups/Components/PopupWrapper.vue

@@ -0,0 +1,89 @@
+<template>
+    <transition name="popup">
+        <div
+            v-if="isVisibleWrapper"
+            @click.self="closePopup"
+            class="popup fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10 lg:absolute"
+        >
+            <div
+                class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl"
+            >
+                <slot />
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import { events } from '../../../bus'
+
+export default {
+    name: 'PopupWrapper',
+    props: ['name'],
+    data() {
+        return {
+            isVisibleWrapper: false,
+        }
+    },
+    methods: {
+        closePopup() {
+            events.$emit('popup:close')
+        },
+    },
+    created() {
+        // Open called popup
+        events.$on('popup:open', ({ name }) => {
+            if (this.name === name) this.isVisibleWrapper = true
+
+            if (this.name !== name) this.isVisibleWrapper = false
+        })
+
+        // Open called popup
+        events.$on('confirm:open', ({ name }) => {
+            if (this.name === name) this.isVisibleWrapper = true
+        })
+
+        // Close popup
+        events.$on('popup:close', () => (this.isVisibleWrapper = false))
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.popup-leave-active {
+    animation: popup-slide-in 0.15s ease reverse;
+}
+
+@media only screen and (min-width: 960px) {
+    .popup-enter-active {
+        animation: popup-slide-in 0.25s 0.1s ease both;
+    }
+
+    @keyframes popup-slide-in {
+        0% {
+            opacity: 0;
+            transform: translateY(100px);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+@media only screen and (max-width: 960px) {
+    .popup-enter-active {
+        animation: popup-slide-in 0.35s 0.15s ease both;
+    }
+
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
+</style>