mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
||
<transition name="popup">
|
||
<div
|
||
v-if="isVisibleWrapper"
|
||
@click.self="closePopup"
|
||
class="fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10"
|
||
>
|
||
<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">
|
||
<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/1f627.svg" alt="" class="mx-auto mb-4 w-20 md:mt-6 min-h-[80px]" />
|
||
|
||
<h1 v-if="title" class="mb-2 text-2xl font-bold">
|
||
{{ title }}
|
||
</h1>
|
||
<p v-if="message" class="mb-4 text-sm overflow-anywhere">
|
||
{{ message }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<PopupActions>
|
||
<ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="w-full">
|
||
{{ button }}
|
||
</ButtonBase>
|
||
</PopupActions>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</template>
|
||
|
||
<script>
|
||
import ButtonBase from './ButtonBase'
|
||
import { events } from '../../bus'
|
||
import PopupActions from "../Others/Popup/PopupActions";
|
||
|
||
export default {
|
||
name: 'AlertPopup',
|
||
components: {
|
||
PopupActions,
|
||
ButtonBase,
|
||
},
|
||
data() {
|
||
return {
|
||
isVisibleWrapper: false,
|
||
buttonStyle: undefined,
|
||
message: undefined,
|
||
title: undefined,
|
||
button: undefined,
|
||
emoji: undefined,
|
||
}
|
||
},
|
||
methods: {
|
||
closePopup() {
|
||
events.$emit('popup:close')
|
||
},
|
||
},
|
||
mounted() {
|
||
// Show alert
|
||
events.$on('alert:open', (args) => {
|
||
this.isVisibleWrapper = true
|
||
|
||
this.title = args.title || undefined
|
||
this.message = args.message || undefined
|
||
|
||
this.button = this.$te('alerts.error_confirm') ? this.$t('alerts.error_confirm') : 'That’s horrible!'
|
||
this.emoji = '😢😢😢'
|
||
this.buttonStyle = 'danger'
|
||
|
||
if (args.emoji) {
|
||
this.emoji = args.emoji
|
||
}
|
||
|
||
if (args.buttonStyle) {
|
||
this.buttonStyle = args.buttonStyle
|
||
}
|
||
|
||
if (args.button) {
|
||
this.button = args.button
|
||
}
|
||
})
|
||
|
||
// Show alert
|
||
events.$on('success:open', (args) => {
|
||
this.isVisibleWrapper = true
|
||
|
||
this.title = args.title
|
||
this.message = args.message
|
||
|
||
this.button = this.$t('alerts.success_confirm')
|
||
this.emoji = '🥳🥳🥳'
|
||
this.buttonStyle = 'theme'
|
||
|
||
if (args.emoji) {
|
||
this.emoji = args.emoji
|
||
}
|
||
})
|
||
|
||
// Close popup
|
||
events.$on('popup:close', () => {
|
||
this.isVisibleWrapper = false
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
// 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);
|
||
}
|
||
}
|
||
</style>
|