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

Farris Vue, a Farris Design based Vue3 component library.

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