mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-09 20:47:24 +00:00
introduce notification type
This commit is contained in:
parent
480695974e
commit
6c997c8795
@ -1,15 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="new-notification rounded" v-if="store.visible">
|
<div
|
||||||
<div>{{ store.text }}</div>
|
class="new-notif rounded"
|
||||||
|
:class="{ 'notif-error': notif.type == NotificationType.Error }"
|
||||||
|
v-if="notif.visible"
|
||||||
|
>
|
||||||
|
<div>{{ notif.text }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useNotificationStore } from "../stores/notification";
|
import { useNotificationStore, NotificationType } from "../stores/notification";
|
||||||
const store = useNotificationStore();
|
|
||||||
|
const notif = useNotificationStore();
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.new-notification {
|
.new-notif {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
@ -26,4 +31,8 @@ const store = useNotificationStore();
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notif-error {
|
||||||
|
background-color: $red;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,13 +1,21 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
|
|
||||||
|
enum NotificationType {
|
||||||
|
Success,
|
||||||
|
Error,
|
||||||
|
}
|
||||||
|
|
||||||
const useNotificationStore = defineStore("notification", {
|
const useNotificationStore = defineStore("notification", {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
text: "",
|
text: "",
|
||||||
|
type: NotificationType.Success,
|
||||||
visible: false,
|
visible: false,
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
showNotification(new_text: string) {
|
showNotification(new_text: string, new_type?: NotificationType) {
|
||||||
|
console.log(arguments);
|
||||||
this.text = new_text;
|
this.text = new_text;
|
||||||
|
this.type = new_type;
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -18,9 +26,9 @@ const useNotificationStore = defineStore("notification", {
|
|||||||
});
|
});
|
||||||
|
|
||||||
class Notification {
|
class Notification {
|
||||||
constructor(text: string) {
|
constructor(text: string, type?: NotificationType) {
|
||||||
useNotificationStore().showNotification(text);
|
useNotificationStore().showNotification(text, type);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { useNotificationStore, Notification };
|
export { useNotificationStore, Notification, NotificationType };
|
||||||
|
Loading…
x
Reference in New Issue
Block a user