5 out-of-the-box presets for sweetalert2, refer to MessageBox of element-plus.
## ⚠ DEPRECATED
> **Warning**
>
> SweetAlert2 Preset has been upgraded to [faim](https://github.com/cloydlau/faim) by the the same author [cloydlau](https://github.com/cloydlau)
>
> Not only are the capabilities enhanced, but for subsequent bug fixes and iterative optimization, please migrate as soon as possible
## Install
### Peer Dependencies
- `sweetalert2`
### NPM
```shell
npm i sweetalert2-preset sweetalert2
```
```ts
import Swal from 'sweetalert2'
import SwalPreset from 'sweetalert2-preset'
Object.assign(Swal, SwalPreset)
Swal.fire()
Swal.success()
Swal.info()
Swal.warning()
Swal.error()
Swal.confirm()
```
### CDN + ESM
> ⚠ Not yet supported because `sweetalert2` does not export ESM.
### CDN + IIFE
```html
```
## Life Cycle
```ts
SwalPreset.success('Operation Success').then(() => {
// onClose
})
SwalPreset.info('Information').then(() => {
// onClose
})
SwalPreset.warning('Warning').then(() => {
// onClose
})
SwalPreset.error('Error Occurred').then(() => {
// onClose
})
SwalPreset.confirm('Are You Sure?').then(() => {
// onConfirmed
}).catch((e) => {
if (e.isDenied) {
// onDenied
} else if (e.isDismissed) {
// onDismissed
}
})
```
## Example: Coercive Confirm
No cancel, must confirm.
```ts
SwalPreset.confirm({
titleText: 'Confirm to continue',
showCancelButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
})
```
## Example: Complex Confirm
```ts
// form with async submitting
SwalPreset.confirm({
input: 'text',
inputAttributes: {
placeholder: 'Remark'
},
confirmButtonText: 'Agree',
showLoaderOnConfirm: true,
preConfirm: (input) => {
return new Promise((resolve) => {
setTimeout(resolve, 500)
}).then(() => {
alert('Agree Success')
}).catch((e) => {
alert('Agree Failed')
})
},
showDenyButton: true,
denyButtonText: 'Deny',
returnInputValueOnDeny: true,
preDeny: (input) => {
if (input) {
return new Promise((resolve, reject) => {
setTimeout(reject, 500)
}).then(() => {
alert('Deny Success')
}).catch((e) => {
alert('Deny Failed')
})
} else {
Swal.showValidationMessage('Please fill in the remark')
return false
}
},
}).then((e) => {
alert('Agreed')
}).catch((e) => {
if (e.isDenied) {
alert('Denied')
} else if (e.isDismissed) {
alert('Dismissed')
}
})
```
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/cloydlau/sweetalert2-preset/releases)
