vuux/dist/lib/Dialog/src/dialog.cjs

Vue3 Nuxt3 Nuxt4 组件库

"use strict";const f=require("@vuux/utils");class e{static isOpen=!1;static createDialog(t){const{title:n="提示信息",content:c,confirmText:s="确认",cancelText:a,type:l="info",onConfirm:o,onCancel:d}=t,i=document.createElement("div");return i.classList.add("app-dialog"),i.classList.add(`is-${l}`),i.innerHTML=`
        <div class="dialog-data">
            <div class="dialog-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="var(--app-text-color)" opacity="0.62" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>
                <p class="dialog-title">${n}</p>
            </div>
            <div class="dialog-content">${c}</div>
            <div class="dialog-footer"> 
                ${a?`<div class="is-cancel">${a}</div>`:""}
                <div class="is-confirm">${s}</div>
            </div>
        </div>
        `,i.addEventListener("keydown",r=>{(r.key===" "||r.key==="Enter")&&r.preventDefault()}),a&&i.querySelector(".is-cancel")?.addEventListener("click",()=>{d?.(),e.remove(i),e.isOpen=!1}),i.querySelector(".is-confirm")?.addEventListener("click",()=>{o(),e.remove(i),e.isOpen=!1}),i}static add(t){document.body.appendChild(t),t.focus()}static async remove(t){document.body.contains(t)&&(t.classList.add("is-leave"),await f.Utils.wait(200),document.body.contains(t)&&document.body.removeChild(t))}static confirm(t={}){if(e.isOpen)return Promise.resolve(!1);e.isOpen=!0;let n;return typeof t=="string"?n={title:"提示信息",content:t,confirmText:"确认",cancelText:"取消",type:"info"}:n={title:t.title??"提示信息",content:t.content??"提示信息",confirmText:t.confirmText??"确认",cancelText:t.cancelText??"取消",type:t.type??"info"},new Promise(c=>{const s=e.createDialog({...n,onConfirm:()=>c(!0),onCancel:()=>c(!1)});e.add(s)})}static alert(t){if(e.isOpen)return Promise.resolve();e.isOpen=!0;let n;return typeof t=="string"?n={title:"提示信息",content:t,confirmText:"确认",type:"info"}:n={title:t.title??"提示信息",content:t.content??"提示信息",confirmText:t.confirmText??"确认",type:t.type??"info"},new Promise(c=>{const s=e.createDialog({...n,onConfirm:()=>c()});e.add(s)})}}module.exports=e;