@farris/ui-vue/components/notify/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../locale/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../locale/index.umd.js"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.notify={},i.Vue,i.locale))})(this,function(i,t,p){"use strict";var F=Object.defineProperty;var P=(i,t,p)=>t in i?F(i,t,{enumerable:!0,configurable:!0,writable:!0,value:p}):i[t]=p;var T=(i,t,p)=>P(i,typeof t!="symbol"?t+"":t,p);const w={showCloseButton:{type:Boolean,default:!0},position:{type:String,default:"top-center"},timeout:{type:Number,default:3e3},theme:{type:String,default:"bootstrap"},left:{type:Number},right:{type:Number},top:{type:Number},bottom:{type:Number},id:{type:String},animate:{type:String,default:"fadeIn"},options:{type:Object},safeHtml:{type:Boolean,default:!0}},S={showCloseButton:{type:Boolean,default:!0},animate:{type:String,default:"fadeIn"},options:{type:Object}},C=t.defineComponent({name:"Toast",props:S,emits:["close","click"],setup:(s,e)=>{const n=t.ref(s.animate),r="fadeOut",o=t.computed(()=>s.options),l=t.ref(!1),a=t.computed(()=>o.value.title&&o.value.message),c=t.computed(()=>!o.value.title&&o.value.message),y=t.computed(()=>{const u={animated:l.value,toast:!0,"toast--only-content":!a.value};return u[s.animate]=!1,u[r]=l.value,u["toasty-type-"+o.value.type]=!0,o.value.theme&&(u[o.value.theme]=!0),u}),f=t.computed(()=>{const B=`f-icon-${o.value&&o.value.type?o.value.type.replace("toasty-type-",""):"default"}`,x={"f-icon":!0};return x[B]=!0,x}),m=t.computed(()=>o.value.title||o.value.message),N=t.computed(()=>s.showCloseButton),d=t.computed(()=>!!o.value.buttons||!!e.slots.default),b=t.computed(()=>p.LocaleService.getLocale()==="en"?{wordBreak:"keep-all",overflowWrap:"break-word"}:{});function h(u){u.stopPropagation(),u.preventDefault(),l.value=!1,setTimeout(()=>{e.emit("close",o.value)},200)}function E(u,v){}function R(u){return`f-preten-link ${u.customClass?u.customClass:""}`}t.watch(n,()=>{n.value});const V=()=>{var u;return t.createVNode(t.Fragment,null,[t.createVNode("div",{class:"after-toast-msg text-right"},[!e.slots.default&&((u=o.value.buttons)==null?void 0:u.map(v=>t.createVNode("span",{class:R(v),onClick:B=>void 0},[v.text]))),e.slots.default&&e.slots.default()])])};return()=>t.createVNode("div",{class:y.value,style:"min-height:44px"},[N.value&&t.createVNode("button",{title:p.LocaleService.getLocaleValue("messageBox.close"),class:"toast-close f-btn-icon f-bare",onClick:h},[t.createVNode("span",{class:"f-icon modal_close"},null)]),m.value&&t.createVNode("section",{class:"modal-tips"},[!a.value&&t.createVNode("div",{class:"float-left modal-tips-iconwrap"},[t.createVNode("span",{class:f.value},null)]),t.createVNode("div",{class:"modal-tips-content"},[a.value&&t.createVNode(t.Fragment,null,[t.createVNode("h5",{class:"toast-title modal-tips-title",innerHTML:o.value.title},null),t.createVNode("p",{class:"toast-msg",innerHTML:o.value.message,style:b.value},null),d.value&&V()]),c.value&&(o.value.buttons?t.createVNode("div",{class:"toast-title-btns-wrapper d-flex"},[t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:b.value,innerHTML:o.value.message},null),t.createVNode("div",{class:"after-toast-title text-right ml-auto"},[V()])]):t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:b.value,innerHTML:o.value.message},null))])])])}}),g=t.defineComponent({name:"Notify",props:w,emits:["close","empty"],setup(s,e){const n=t.computed(()=>({"farris-notify":!0})),r={left:12,right:12,top:20,bottom:12},o=t.ref(),l=t.ref(s.options),a=t.ref(s.showCloseButton),c=t.computed(()=>s.position||"bottom-right"),y=t.computed(()=>s.timeout!=null?s.timeout:3e3),f=t.computed(()=>{const d=s.bottom?s.bottom:r.bottom,b=s.top?s.top:r.top,h={transition:"all 0.2s ease",left:c.value.indexOf("left")>-1?`${s.left?s.left:r.left}px`:"",right:c.value.indexOf("right")>-1?`${s.right?s.right:r.right}px`:"",top:c.value.indexOf("top")>-1?`${b}px`:"",bottom:c.value.indexOf("bottom")>-1?`${d}px`:""};return c.value.indexOf("center")>-1&&(h.left="50%",h.marginLeft="calc(-24rem / 2)",c.value==="center-center"&&(h.top="50%",h.transform="translate(-50%, -50%)")),h});function m(d){e.emit("close")}y.value&&setTimeout(()=>{m()},y.value),e.expose({closeToast:m,container:o,notifyPosition:c});function N(d,b){m()}return()=>t.createVNode("div",{class:n.value,style:f.value,ref:o},[t.createVNode(C,{options:l.value,showCloseButton:a.value,animate:s.animate,onClose:d=>N(d,l.value)},null)])}});class I{constructor(){T(this,"notifyRefs",[]);T(this,"globalConfig",t.reactive({}))}escapeAllHtml(e){if(typeof e!="string"||!e)return"";const n=document.createElement("div");return n.textContent=e||"",n.innerHTML.replace(/\\n/g,"<br>").replace(/\\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;").replace(/\\r/g,"")}createNotifyInstance(e){const n=this,o=Object.assign({timeout:3e3,position:"bottom-right",showCloseButton:!0,safeHtml:!0},this.globalConfig,{...e}),l=document.createElement("div");l.style.display="contents";const a=t.createApp({setup(){var f;const c=t.ref();function y(){c.value.container.style.transform="scale(0)",setTimeout(()=>{n.updateNotifyPositionForClose(o,c),a.unmount()},220)}if(o.position.indexOf("top")>-1){const m=n.getNotifyInstances(o.position),N=m[m.length-1];if(N){const d=N.value.container.getBoundingClientRect();o.top=d.bottom}}return o.safeHtml&&((f=o.options)!=null&&f.message)&&(o.options.message=n.escapeAllHtml(o.options.message)),t.onUnmounted(()=>{document.body.removeChild(l)}),t.onMounted(()=>{n.updateNotifyPositionForCreate(o,c)}),()=>t.createVNode(t.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[t.createVNode(g,t.mergeProps({ref:c},o,{onClose:y}),null)]})}});return a.provide("NotifyService",this),document.body.appendChild(l),a.use(p.LocaleService.i18n),a.mount(l),a}getNotifyInstances(e){return this.notifyRefs.filter(n=>n.value.notifyPosition===e)}updateNotifyPositionForCreate(e,n){if(this.notifyRefs&&this.notifyRefs.length){const r=window.innerHeight;e.position.indexOf("bottom")>-1&&this.getNotifyInstances(e.position).forEach(o=>{const l=o.value.container.getBoundingClientRect();o.value.container.style.bottom=l.height+r-l.bottom+"px"})}this.notifyRefs=[...this.notifyRefs,n]}updateNotifyPositionForClose(e,n){const r=this.notifyRefs.indexOf(n);if(e.position.indexOf("top")>-1){const o=this.getNotifyInstances(e.position),l=o.indexOf(n);o.slice(l+1).forEach(a=>{a.value.container.style.top=a.value.container.offsetTop-a.value.container.offsetHeight+"px"})}r>-1&&this.notifyRefs.splice(r,1)}show(e){return this.createNotifyInstance(e)}buildNotifyProps(e,n){let r="",o="",l,a,c;typeof n=="string"?r=n:n&&(r=n.message||"",o=n.title||"",a=n.position||null,c=n.showCloseButton!=null?n.showCloseButton:null,l=n.timeout!=null?n.timeout:null);const f={options:{type:e,message:r,title:o}};return a!=null&&(f.position=a),c!=null&&(f.showCloseButton=c),l!=null&&(f.timeout=l),f}info(e){const n=this.buildNotifyProps("info",e);return this.show(n)}success(e){const n=this.buildNotifyProps("success",e);return this.show(n)}warning(e){const n=this.buildNotifyProps("warning",e);return this.show(n)}error(e){const n=this.buildNotifyProps("error",e);return this.show(n)}close(e){e&&e.unmount()}closeAll(){this.notifyRefs.forEach(e=>{e==null||e.value.closeToast()}),this.notifyRefs.length=0}}const O=Symbol("NOTIFY_SERVICE_TOKEN");g.install=s=>{s.component(g.name,g),s.component(C.name,C);const e=new I;s.provide(O,e),s.provide("FNotifyService",e)},i.FNotify=g,i.FNotifyService=I,i.FToast=C,i.F_NOTIFY_SERVICE_TOKEN=O,i.default=g,i.notifyProps=w,i.toastProps=S,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});