Skip to content

Commit 7b8637e

Browse files
committed
fix: fix confirm return type, should be boolean instead of void
1 parent 5f7305c commit 7b8637e

File tree

2 files changed

+56
-8
lines changed

2 files changed

+56
-8
lines changed

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,76 @@ For example if fetch to the API fails you might want to show an error message to
66

77
AdminForth has very simple [frontend API](/docs/api/FrontendAPI/interfaces/FrontendAPIInterface) for this.
88

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
1038

1139
Create a Vue component in the custom directory of your project, e.g. Alerts.vue:
1240

1341
```html title="./custom/Alerts.vue"
1442
<template>
1543
<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>
1955
</div>
2056
</template>
2157
<script setup>
2258
import adminforth from '@/adminforth';
59+
import { Button } from '@/afcl'
2360
import { useI18n } from 'vue-i18n';
61+
2462
const { t } = useI18n();
2563
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'})
2870
};
29-
async function callConfirmation(){
71+
72+
async function doConfirm() {
3073
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+
}
3179
}
3280
</script>
3381
```

adminforth/types/FrontendAPI.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export interface FrontendAPIInterface {
3838
* @param params - The parameters of the dialog
3939
* @returns A promise that resolves when the user confirms the dialog
4040
*/
41-
confirm(params:ConfirmParams ): Promise<void>;
41+
confirm(params: ConfirmParams): Promise<boolean>;
4242

4343
/**
4444
* Show an alert

0 commit comments

Comments
 (0)