adminforth 2.4.0-next.263 → 2.4.0-next.264
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,32 +1,21 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
<div class="afcl-toast flex items-center w-full
|
|
4
|
+
<div class="afcl-toast flex items-center w-full rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText"
|
|
5
5
|
role="alert"
|
|
6
6
|
>
|
|
7
|
-
<div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-
|
|
8
|
-
<
|
|
9
|
-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
|
|
10
|
-
</svg>
|
|
11
|
-
<span class="sr-only">{{ $t('Fire icon') }}</span>
|
|
7
|
+
<div v-if="toast.variant == 'info'" class="my-4 ml-2 inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-darkPrimary dark:!text-blue-100">
|
|
8
|
+
<IconInfoCircleSolid class="w-5 h-5" aria-hidden="true" />
|
|
12
9
|
</div>
|
|
13
|
-
<div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
|
14
|
-
<
|
|
15
|
-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
|
|
16
|
-
</svg>
|
|
17
|
-
<span class="sr-only">{{ $t('Error icon') }}</span>
|
|
10
|
+
<div v-else-if="toast.variant == 'danger'" class="my-4 ml-2 inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
|
11
|
+
<IconCloseCircleSolid class="w-5 h-5" aria-hidden="true" />
|
|
18
12
|
</div>
|
|
19
|
-
<div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
</svg>
|
|
23
|
-
<span class="sr-only">{{ $t('Warning icon') }}</span>
|
|
13
|
+
<div v-else-if="toast.variant == 'warning'"class="my-4 ml-2 inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
|
|
14
|
+
<IconExclamationCircleSolid class="w-5 h-5" aria-hidden="true" />
|
|
15
|
+
|
|
24
16
|
</div>
|
|
25
|
-
<div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
|
26
|
-
<
|
|
27
|
-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
|
|
28
|
-
</svg>
|
|
29
|
-
<span class="sr-only">{{ $t('Check icon') }}</span>
|
|
17
|
+
<div v-else class="my-4 ml-2 inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
|
18
|
+
<IconCheckCircleSolid class="w-5 h-5" aria-hidden="true" />
|
|
30
19
|
</div>
|
|
31
20
|
|
|
32
21
|
<div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
|
|
@@ -47,6 +36,7 @@
|
|
|
47
36
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
48
37
|
</svg>
|
|
49
38
|
</button>
|
|
39
|
+
<div class="h-full ml-2 w-1 rounded-r-lg" :class="toast.variant == 'info' ? 'bg-lightPrimary dark:bg-darkPrimary' : toast.variant == 'danger' ? 'bg-red-500 dark:bg-red-800' : toast.variant == 'warning' ? 'bg-orange-500 dark:bg-orange-700' : 'bg-green-500 dark:bg-green-800'"></div>
|
|
50
40
|
</div>
|
|
51
41
|
|
|
52
42
|
|
|
@@ -55,6 +45,8 @@
|
|
|
55
45
|
<script setup lang="ts">
|
|
56
46
|
import { onMounted } from 'vue';
|
|
57
47
|
import { useToastStore } from '@/stores/toast';
|
|
48
|
+
import { IconInfoCircleSolid, IconCloseCircleSolid, IconExclamationCircleSolid, IconCheckCircleSolid } from '@iconify-prerendered/vue-flowbite';
|
|
49
|
+
|
|
58
50
|
const toastStore = useToastStore();
|
|
59
51
|
const emit = defineEmits(['close']);
|
|
60
52
|
const props = defineProps<{
|