balm-ui/plugins/alert/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("$alert",["vue"],t):"object"===typeof exports?exports.$alert=t(require("vue")):e.$alert=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={154:function(t){t.exports=e}},o={};function n(e){var c=o[e];if(void 0!==c)return c.exports;var s=o[e]={exports:{}};return t[e](s,s.exports,n),s.exports}n.d=function(e,t){for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};n.r(c),n.d(c,{default:function(){return $},install:function(){return T},useAlert:function(){return V}});var s=n(154);var a="undefined"===typeof window?s.createSSRApp:s.createApp;const i=["success","info","warn","warning","error","help"],l={defaults:{success:"check_circle",info:"error",error:"cancel",help:"help"},outlined:{success:"check_circle_outline",info:"error_outline",error:"highlight_off",help:"help_outline"}};var r={CLOSING:"mdc-dialog--closing",OPEN:"mdc-dialog--open",OPENING:"mdc-dialog--opening",SCROLLABLE:"mdc-dialog--scrollable",SCROLL_LOCK:"mdc-dialog-scroll-lock",STACKED:"mdc-dialog--stacked",FULLSCREEN:"mdc-dialog--fullscreen",SCROLL_DIVIDER_HEADER:"mdc-dialog-scroll-divider-header",SCROLL_DIVIDER_FOOTER:"mdc-dialog-scroll-divider-footer",SURFACE_SCRIM_SHOWN:"mdc-dialog__surface-scrim--shown",SURFACE_SCRIM_SHOWING:"mdc-dialog__surface-scrim--showing",SURFACE_SCRIM_HIDING:"mdc-dialog__surface-scrim--hiding",SCRIM_HIDDEN:"mdc-dialog__scrim--hidden"};["textarea",".mdc-menu .mdc-list-item",".mdc-menu .mdc-deprecated-list-item"].join(", ");function d(){document.querySelector("body").classList.remove(r.SCROLL_LOCK)}function u(e){document.querySelector("body").classList.contains(r.SCROLL_LOCK)&&(d(),window.removeEventListener("popstate",u))}const m={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return[m.cssClasses.icon,...t]}};var p=m;const f={contentComponentName:"UiDialogContent",cssClasses:{content:"mdc-dialog__content"},EVENTS:{CHANGE:"update:modelValue",CLOSE:"close",CONFIRM:"confirm"}},g={class:"mdc-dialog__container"},_={class:"mdc-dialog__surface"},C={key:0,class:"mdc-dialog__title"},b=["innerHTML"],v={class:"mdc-alert-dialog__message"},O={class:"mdc-dialog__actions"},y=(0,s.createElementVNode)("div",{class:"mdc-dialog__scrim"},null,-1),S={name:"MdcDialog",customOptions:{UI_GLOBAL:p,UI_DIALOG:f}};var E=Object.assign(S,{props:{open:{type:Boolean,default:!1},options:{type:Object,default:()=>({})}},setup(e){const t=e,o=(0,s.reactive)({opening:!0,opened:!1,state:"",stateOutlined:!1}),{stateClassName:n,materialIcon:c}=function(e){const t=(0,s.computed)((()=>{let t=!1;if(i.includes(e.state))switch(e.state){case"success":t="success";break;case"info":case"help":t="info";break;case"warn":case"warning":t="warning";break;case"error":t="error"}return t})),o=(0,s.computed)((()=>{let o="";return t.value&&(o=`md-${t.value}-icon`,e.stateOutlined&&(o+="--outlined")),o})),n=(0,s.computed)((()=>{let t=!1;if(i.includes(e.state)){const o=e.stateOutlined?"outlined":"defaults";t=["info","warn","warning"].includes(e.state)?l[o].info:l[o][e.state]}return t}));return{stateType:t,stateClassName:o,materialIcon:n}}(o),a=(0,s.computed)((()=>["mdc-dialog",t.options.className,{"mdc-dialog--opening":o.opening,"mdc-dialog--open":o.opened}]));return(0,s.watch)((()=>t.open),(e=>{e?(!function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];document.querySelector("body").classList.add(r.SCROLL_LOCK),e&&window.addEventListener("popstate",u)}(),setTimeout((()=>{o.opened=!0,setTimeout((()=>{o.opening=!1}),150)}),150)):(o.opening=!0,o.opened=!1,d())})),(0,s.onBeforeMount)((()=>{t.options.state&&(o.state=t.options.state,o.stateOutlined=t.options.stateOutlined)})),(t,o)=>((0,s.openBlock)(),(0,s.createElementBlock)("div",{class:(0,s.normalizeClass)(a.value)},[(0,s.createElementVNode)("div",g,[(0,s.createElementVNode)("div",_,[e.options.title?((0,s.openBlock)(),(0,s.createElementBlock)("h2",C,(0,s.toDisplayString)(e.options.title),1)):(0,s.createCommentVNode)("",!0),e.options.raw?((0,s.openBlock)(),(0,s.createElementBlock)("div",{key:1,class:(0,s.normalizeClass)((0,s.unref)(f).cssClasses.content),innerHTML:e.options.message},null,10,b)):((0,s.openBlock)(),(0,s.createElementBlock)("div",{key:2,class:(0,s.normalizeClass)((0,s.unref)(f).cssClasses.content)},[(0,s.unref)(c)?((0,s.openBlock)(),(0,s.createElementBlock)("i",{key:0,class:(0,s.normalizeClass)((0,s.unref)(p).getMaterialIconClass([(0,s.unref)(n),"mdc-alert-dialog__icon"]))},(0,s.toDisplayString)((0,s.unref)(c)),3)):(0,s.createCommentVNode)("",!0),(0,s.createElementVNode)("span",v,(0,s.toDisplayString)(e.options.message),1)],2)),(0,s.createElementVNode)("footer",O,[(0,s.renderSlot)(t.$slots,"default")])])]),y],2))}});var L=E;const k=/(?:^\[object\s(.*?)\]$)/;var h=e=>Object.prototype.toString.call(e).replace(k,"$1").toLowerCase();function N(e){return document.getElementById(e)||function(e){const t=document.createElement("div");return t.id=e,document.body.appendChild(t),t}(e)}function I(e){!function(e){document.body.removeChild(e)}(e)}const w="balmui-alert-dialog";function R(e){let{app:t,el:o,constants:n,options:c,done:a,callback:i}=e;const l=(0,s.reactive)({open:!1,options:c});return(0,s.onMounted)((()=>(0,s.nextTick)((()=>l.open=!0)))),(0,s.onBeforeUnmount)((()=>I(o))),{...(0,s.toRefs)(l),handleClick:function(e){l.open=!1,d(),t.unmount(`#${n.id}`),"function"===typeof l.options.callback?l.options.callback(e):n.id===w?a():i(e)}}}const D={id:w},j={className:"",title:"",state:"",stateOutlined:!1,message:"",raw:!1,buttonText:"OK",callback:!1};let B,M=j;const x='<mdc-dialog class="mdc-alert-dialog" :open="open" :options="options">\n  <button type="button"\n    class="mdc-button mdc-button--raised mdc-alert-dialog__button"\n    data-mdc-dialog-button-default\n    @click="handleClick">\n    <span class="mdc-button__label" v-text="options.buttonText"></span>\n  </button>\n</mdc-dialog>';function A(){const e=function(e,t){let o=Object.assign({},e);return"string"===h(t)?o.message=`${t}`:"object"===h(t)&&(o=Object.assign({},o,t)),o}(M,arguments.length>0&&void 0!==arguments[0]?arguments[0]:{});return new Promise((t=>{(function(e,t){const o=N(D.id);return B=a({name:"AlertDialog",components:{MdcDialog:L},setup(){return R({app:B,el:o,constants:D,options:e,done:t})},template:x}),B})(e,t).mount(`#${D.id}`)}))}function T(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};M=Object.assign({},j,t),e.config.globalProperties.$alert=A,e.provide("alert",A)}const V=()=>A;var $={install:T};return c}()}));