vue components refactoring

2026-04-26 10:30:38 +00:00 · 2022-04-13 16:19:10 +02:00
parent 6a4bfa8bfe
commit 338f8664b7
251 changed files with 1068 additions and 1943 deletions
@@ -0,0 +1,127 @@
+<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 '../UI/Buttons/ButtonBase'
+import { events } from '../../bus'
+import PopupActions from "./Components/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>