@@ -6,28 +6,76 @@ For example if fetch to the API fails you might want to show an error message to
6
6
7
7
AdminForth has very simple [ frontend API] ( /docs/api/FrontendAPI/interfaces/FrontendAPIInterface ) for this.
8
8
9
- To see an example of alerts, you can call them yourself.
9
+
10
+ ## Alerts
11
+
12
+ To show an alert use ` adminforth.alert ` method:
13
+
14
+ ``` ts
15
+ import adminforth from ' @/adminforth' ;
16
+
17
+ adminforth .alert ({message: ' Hello world' , variant: ' success' })
18
+ ```
19
+
20
+ Next variants are supported:
21
+
22
+ * ` success `
23
+ * ` danger `
24
+ * ` warning `
25
+ * ` info `
26
+
27
+ ## Confirmations
28
+
29
+ To show a confirmation dialog use ` adminforth.confirm ` method:
30
+
31
+ ``` ts
32
+ import adminforth from ' @/adminforth' ;
33
+
34
+ const isConfirmed = await adminforth .confirm ({message: ' Are you sure?' , yes: ' Yes' , no: ' No' })
35
+ ```
36
+
37
+ ## Ussage example
10
38
11
39
Create a Vue component in the custom directory of your project, e.g. Alerts.vue:
12
40
13
41
``` html title="./custom/Alerts.vue"
14
42
<template >
15
43
<div class =" ml-3 mt-16" >
16
- <button @click =" callAlert($t('Example success alert'))" class =" focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800" >{{$t('Call alert')}}</button >
17
- <button @click =" callConfirmation" class =" focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900" >{{$t('Confirmation')}}</button >
18
- <button @click =" callAlert($t('Example danger alert'),'warning')" class =" focus:outline-none text-white bg-orange-500 hover:bg-orange-400 focus:ring-4 focus:ring-orange-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900" >{{$t('Danger alert')}}</button >
44
+ <Button @click =" successAlert($t('Example success alert'))" >
45
+ {{$t('Call success alert')}}
46
+ </Button >
47
+
48
+ <Button @click =" warningAlert($t('Example danger alert'))" >
49
+ {{$t('Call warning alert')}}
50
+ </Button >
51
+
52
+ <Button @click =" doConfirm" >
53
+ {{$t('Call confirm dialog')}}
54
+ </Button >
19
55
</div >
20
56
</template >
21
57
<script setup >
22
58
import adminforth from ' @/adminforth' ;
59
+ import { Button } from ' @/afcl'
23
60
import { useI18n } from ' vue-i18n' ;
61
+
24
62
const { t } = useI18n ();
25
63
26
- function callAlert (message ,variant = ' success' ){
27
- adminforth .alert ({message: message, variant: variant})
64
+ function successAlert (message ) {
65
+ adminforth .alert ({message, variant: ' success' })
66
+ };
67
+
68
+ function warningAlert (message ) {
69
+ adminforth .alert ({message, variant: ' warning' })
28
70
};
29
- async function callConfirmation (){
71
+
72
+ async function doConfirm () {
30
73
const isConfirmed = await adminforth .confirm ({message: t (' Are you sure?' ), yes: t (' Yes' ), no: t (' No' )})
74
+ if (isConfirmed){
75
+ adminforth .alert ({message: t (' Confirmed' ), variant: ' success' })
76
+ } else {
77
+ adminforth .alert ({message: t (' Not confirmed' ), variant: ' warning' })
78
+ }
31
79
}
32
80
</script >
33
81
```
0 commit comments