<script>
import Vue from "vue";
import Swal from "sweetalert2";
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import appConfig from "@/app.config";
/**
* Sweet-alert component
*/
export default {
page: {
title: "Sweet Alert",
meta: [{ name: "description", content: appConfig.description }]
},
components: { Layout, PageHeader },
data() {
return {
title: "SweetAlert 2",
items: [
{
text: "UI Elements",
href: "/"
},
{
text: "SweetAlert 2",
active: true
}
]
};
},
methods: {
showAlert() {
Vue.swal("Any fool can use a computer!");
},
titleText() {
Swal.fire("The Internet?", "That thing is still around?", "question");
},
successmsg() {
Swal.fire("Good job!", "You clicked the button!", "success");
},
position() {
Vue.swal({
position: "top-end",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500
});
},
confirm() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#34c38f",
cancelButtonColor: "#f46a6a",
confirmButtonText: "Yes, delete it!"
}).then(result => {
if (result.value) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
},
cancel() {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-success",
cancelButton: "btn btn-danger ml-2"
},
buttonsStyling: false
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
showCancelButton: true
})
.then(result => {
if (result.value) {
swalWithBootstrapButtons.fire(
"Deleted!",
"Your file has been deleted.",
"success"
);
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
"Cancelled",
"Your imaginary file is safe :)",
"error"
);
}
});
},
imageHeader() {
Swal.fire({
title: "Sweet!",
text: "Modal with a custom image.",
imageUrl: require("@/assets/images/logo-dark.png"),
imageHeight: 20,
confirmButtonColor: "#556ee6"
});
},
timer() {
let timerInterval;
Swal.fire({
title: "Auto close alert!",
html: "I will close in <b></b> milliseconds.",
timer: 2000,
timerProgressBar: true,
onBeforeOpen: () => {
Swal.showLoading();
timerInterval = setInterval(() => {
Swal.getContent().querySelector(
"b"
).textContent = Swal.getTimerLeft();
}, 100);
},
onClose: () => {
clearInterval(timerInterval);
}
}).then(result => {
if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.timer
) {
console.log("I was closed by the timer"); // eslint-disable-line
}
});
},
custom() {
Swal.fire({
title: "<strong>HTML <u>example</u></strong>",
icon: "info",
html:
"You can use <b>bold text</b>, " +
'<a href="//sweetalert2.github.io">links</a> ' +
"and other HTML tags",
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: "Thumbs up, great!",
cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: "Thumbs down"
});
},
customBackground() {
Swal.fire({
title: "Custom width, padding, background.",
width: 600,
padding: 100,
confirmButtonColor: "#556ee6",
background:
"#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)"
});
},
ajax() {
Swal.fire({
title: "Submit email to run ajax request",
input: "email",
showCancelButton: true,
confirmButtonText: "Submit",
showLoaderOnConfirm: true,
confirmButtonColor: "#556ee6",
cancelButtonColor: "#f46a6a",
preConfirm: email => {
// eslint-disable-next-line no-unused-vars
return new Promise(function(resolve, reject) {
setTimeout(function() {
if (email === "taken@example.com") {
Promise.reject(new Error("This email is already taken."));
} else {
resolve();
}
}, 2000);
});
},
allowOutsideClick: false
}).then(email => {
Swal.fire({
title: "Ajax request finished!",
html: "Submitted email: " + email
});
});
},
chain() {
Swal.mixin({
input: "text",
confirmButtonText: "Next →",
showCancelButton: true,
confirmButtonColor: "#556ee6",
cancelButtonColor: "#74788d",
progressSteps: ["1", "2", "3"]
})
.queue([
{
title: "Question 1",
text: "Chaining swal2 modals is easy"
},
"Question 2",
"Question 3"
])
.then(result => {
if (result.value) {
Swal.fire({
title: "All done!",
html:
"Your answers: <pre><code>" +
JSON.stringify(result.value) +
"</code></pre>",
confirmButtonText: "Lovely!"
});
}
});
},
dynamicQueue() {
var ipAPI = "https://api.ipify.org?format=json";
Swal.queue([
{
title: "Your public IP",
confirmButtonText: "Show my public IP",
text: "Your public IP will be received " + "via AJAX request",
showLoaderOnConfirm: true,
preConfirm: () => {
return fetch(ipAPI)
.then(response => response.json())
.then(data => Swal.insertQueueStep(data.ip))
.catch(() => {
Swal.insertQueueStep({
type: "error",
title: "Unable to get your public IP"
});
});
}
}
]);
}
}
};
</script>
<template>
<Layout>
<PageHeader :title="title" :items="items" />
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Examples</h4>
<p class="card-title-desc">
A beautiful, responsive, customizable
and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero
dependencies.
</p>
<div class="row text-center">
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A basic message</p>
<button type="button" class="btn btn-primary" @click="showAlert">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A title with a text under</p>
<button type="button" class="btn btn-primary" @click="titleText">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A success message!</p>
<button type="button" class="btn btn-primary" @click="successmsg">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A warning message, with a function attached to the "Confirm"-button...</p>
<button type="button" class="btn btn-primary" @click="confirm">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>By passing a parameter, you can execute something else for "Cancel".</p>
<button type="button" class="btn btn-primary" @click="cancel">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A message with custom Image Header</p>
<button type="button" class="btn btn-primary" @click="imageHeader">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A message with auto close timer</p>
<button type="button" class="btn btn-primary" @click="timer">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>Custom HTML description and buttons</p>
<button type="button" class="btn btn-primary" @click="custom">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A custom positioned dialog</p>
<button type="button" class="btn btn-primary" @click="position">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>A message with custom width, padding and background</p>
<button type="button" class="btn btn-primary" @click="customBackground">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<p>Ajax request example</p>
<button type="button" class="btn btn-primary" @click="ajax">Click me</button>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>Chaining modals (queue) example</p>
<button type="button" class="btn btn-primary" @click="chain">Click me</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 mb-2">
<div class="p-3">
<p>Dynamic queue example</p>
<button type="button" class="btn btn-primary" @click="dynamicQueue">Click me</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Layout>
</template>
