added prettier

resources/js/components/Others/Popup/ConfirmPopup.vue

@@ -1,83 +1,73 @@
 <template>
     <PopupWrapper>
-        <div class="text-center h-full flex items-center justify-center px-8 transform md:translate-y-0 -translate-y-7">
-			<div>
-				<img src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f914.svg" alt="" class="w-20 mx-auto md:mt-6 mb-4">
+        <div class="flex h-full -translate-y-7 transform items-center justify-center px-8 text-center md:translate-y-0">
+            <div>
+                <img src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f914.svg" alt="" class="mx-auto mb-4 w-20 md:mt-6" />
 
-				<h1 v-if="title" class="text-2xl font-bold mb-2">
-					{{ title }}
-				</h1>
-				<p v-if="message" class="text-sm mb-4">
-					{{ message }}
-				</p>
-			</div>
+                <h1 v-if="title" class="mb-2 text-2xl font-bold">
+                    {{ title }}
+                </h1>
+                <p v-if="message" class="mb-4 text-sm">
+                    {{ message }}
+                </p>
+            </div>
         </div>
 
         <PopupActions>
-            <ButtonBase
-                    @click.native="closePopup"
-                    button-style="secondary"
-                    class="w-full"
-            >{{ $t('global.cancel') }}
-            </ButtonBase>
-            <ButtonBase
-                    @click.native="confirm"
-                    :button-style="buttonColor"
-                    class="w-full"
-            >{{ $t('global.confirm_action') }}
-            </ButtonBase>
+            <ButtonBase @click.native="closePopup" button-style="secondary" class="w-full">{{ $t('global.cancel') }} </ButtonBase>
+            <ButtonBase @click.native="confirm" :button-style="buttonColor" class="w-full">{{ $t('global.confirm_action') }} </ButtonBase>
         </PopupActions>
     </PopupWrapper>
 </template>
 
 <script>
-    import PopupWrapper from "./PopupWrapper";
-    import PopupActions from "./PopupActions";
-    import ButtonBase from "../../FilesView/ButtonBase";
-    import {events} from '../../../bus'
+import PopupWrapper from './PopupWrapper'
+import PopupActions from './PopupActions'
+import ButtonBase from '../../FilesView/ButtonBase'
+import { events } from '../../../bus'
 
-    export default {
-        name: 'ConfirmPopup',
-        components: {
-            PopupWrapper,
-            PopupActions,
-            ButtonBase,
-        },
-        data() {
-            return {
-                confirmationData: [],
-                message: undefined,
-                title: undefined,
-                buttonColor: undefined,
-            }
-        },
-        methods: {
-            closePopup() {
-                events.$emit('popup:close')
-            },
-            confirm() {
-                // Close popup
-                events.$emit('popup:close')
-
-                // Confirmation popup
-                events.$emit('action:confirmed', this.confirmationData)
-
-                // Clear confirmation data
-                this.confirmationData = []
-            }
-        },
-        mounted() {
-            // Show confirm
-            events.$on('confirm:open', args => {
-                this.title = args.title
-                this.message = args.message
-                this.confirmationData = args.action
-                this.buttonColor = 'danger'
-
-                if (args.buttonColor) {
-                    this.buttonColor = args.buttonColor
-                }
-            })
+export default {
+    name: 'ConfirmPopup',
+    components: {
+        PopupWrapper,
+        PopupActions,
+        ButtonBase,
+    },
+    data() {
+        return {
+            confirmationData: [],
+            message: undefined,
+            title: undefined,
+            buttonColor: undefined,
         }
-    }
+    },
+    methods: {
+        closePopup() {
+            events.$emit('popup:close')
+        },
+        confirm() {
+            // Close popup
+            events.$emit('popup:close')
+
+            // Confirmation popup
+            events.$emit('action:confirmed', this.confirmationData)
+
+            // Clear confirmation data
+            this.confirmationData = []
+        },
+    },
+    mounted() {
+        // Show confirm
+        events.$on('confirm:open', (args) => {
+            this.title = args.title
+            this.message = args.message
+            this.confirmationData = args.action
+            this.buttonColor = 'danger'
+
+            if (args.buttonColor) {
+                this.buttonColor = args.buttonColor
+            }
+        })
+    },
+}
 </script>

resources/js/components/Others/Popup/PopupActions.vue

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

resources/js/components/Others/Popup/PopupContent.vue

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

resources/js/components/Others/Popup/PopupHeader.vue

@@ -1,50 +1,48 @@
 <template>
     <div class="flex items-center justify-between px-6 pt-6 pb-6">
         <div class="flex items-center">
-			<div class="mr-3">
-				<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" />
-			</div>
+            <div class="mr-3">
+                <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" />
+            </div>
 
-            <b class="font-bold text-base">
-				{{ title }}
-			</b>
+            <b class="text-base font-bold">
+                {{ title }}
+            </b>
         </div>
-        <div @click="closePopup" class="cursor-pointer p-3 -m-3">
+        <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 {CreditCardIcon, KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon} from 'vue-feather-icons'
-    import {events} from '../../../bus'
+import { 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: {
-            CornerDownRightIcon,
-			CreditCardIcon,
-			UserPlusIcon,
-			UsersIcon,
-            ShareIcon,
-            Edit2Icon,
-            LinkIcon,
-			KeyIcon,
-            XIcon,
+export default {
+    name: 'PopupHeader',
+    props: ['title', 'icon'],
+    components: {
+        CornerDownRightIcon,
+        CreditCardIcon,
+        UserPlusIcon,
+        UsersIcon,
+        ShareIcon,
+        Edit2Icon,
+        LinkIcon,
+        KeyIcon,
+        XIcon,
+    },
+    methods: {
+        closePopup() {
+            events.$emit('popup:close')
         },
-        methods: {
-            closePopup() {
-                events.$emit('popup:close')
-            }
-        }
-    }
+    },
+}
 </script>

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -1,10 +1,6 @@
 <template>
     <transition name="popup">
-        <div
-			class="popup lg:absolute fixed top-0 left-0 right-0 bottom-0 overflow-y-auto grid h-full p-10"
-			@click.self="closePopup"
-			v-if="isVisibleWrapper"
-		>
+        <div class="popup fixed top-0 left-0 right-0 bottom-0 grid h-full overflow-y-auto p-10 lg:absolute" @click.self="closePopup" v-if="isVisibleWrapper">
             <div class="popup-wrapper">
                 <slot></slot>
             </div>
@@ -13,140 +9,132 @@
 </template>
 
 <script>
-    import {events} from '../../../bus'
+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)
+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>
-    @import '../../../../sass/vuefilemanager/variables';
-    @import '../../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
-	.popup {
-		z-index: 41;
-	}
+.popup {
+    z-index: 41;
+}
 
+.popup-wrapper {
+    box-shadow: $light_mode_popup_shadow;
+    border-radius: 8px;
+    background: white;
+    margin: auto;
+    width: 480px;
+    z-index: 12;
+}
+
+// Desktop, tablet
+.medium,
+.large {
+    // Animations
+    .popup-enter-active {
+        animation: popup-in 0.35s 0.15s ease both;
+    }
+
+    .popup-leave-active {
+        animation: popup-in 0.15s ease reverse;
+    }
+}
+
+@keyframes popup-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes popup-slide-in {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@media only screen and (max-width: 690px) {
+    .popup {
+        overflow: hidden;
+    }
     .popup-wrapper {
-        box-shadow: $light_mode_popup_shadow;
-        border-radius: 8px;
-        background: white;
-        margin: auto;
-        width: 480px;
-        z-index: 12;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        transform: translateY(0) scale(1);
+        box-shadow: none;
+        width: 100%;
+        border-radius: 0px;
     }
-
-    // Desktop, tablet
-    .medium, .large {
-        // Animations
-        .popup-enter-active {
-            animation: popup-in 0.35s 0.15s ease both;
-        }
-
-        .popup-leave-active {
-            animation: popup-in 0.15s ease reverse;
-        }
+    // Animations
+    .popup-enter-active {
+        animation: popup-slide-in 0.35s 0.15s ease both;
     }
-
-    @keyframes popup-in {
-        0% {
-            opacity: 0;
-            transform: scale(0.7);
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
+    .popup-leave-active {
+        animation: popup-slide-in 0.15s ease reverse;
     }
+}
 
-    @keyframes popup-slide-in {
-        0% {
-            transform: translateY(100%);
-        }
-        100% {
-            transform: translateY(0);
-        }
+@media only screen and (max-width: 320px) {
+    .popup-wrapper {
+        overflow-y: auto;
     }
+}
 
-    @media only screen and (max-width: 690px) {
-        .popup {
-            overflow: hidden;
-        }
-        .popup-wrapper {
-            position: fixed;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            transform: translateY(0) scale(1);
-            box-shadow: none;
-            width: 100%;
-            border-radius: 0px;
-        }
-        // Animations
-        .popup-enter-active {
-            animation: popup-slide-in 0.35s 0.15s ease both;
-        }
-        .popup-leave-active {
-            animation: popup-slide-in 0.15s ease reverse;
-        }
-    }
-
-    @media only screen and (max-width: 320px){
-        .popup-wrapper {
-            overflow-y: auto;
-        }
+.dark {
+    .popup-wrapper {
+        background: $dark_mode_foreground;
+        box-shadow: $dark_mode_popup_shadow;
     }
+}
 
+@media only screen and (max-width: 690px) {
     .dark {
         .popup-wrapper {
-            background: $dark_mode_foreground;
-            box-shadow: $dark_mode_popup_shadow;
+            background: $dark_mode_background;
         }
     }
-
-	@media only screen and (max-width: 690px) {
-
-		.dark {
-			.popup-wrapper {
-				background: $dark_mode_background;
-			}
-		}
-	}
+}
 </style>