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

Farris Vue, a Farris Design based Vue3 component library.

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