<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>