@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")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.notify={},l.Vue))})(this,function(l,t){"use strict";var F=Object.defineProperty;var P=(l,t,m)=>t in l?F(l,t,{enumerable:!0,configurable:!0,writable:!0,value:m}):l[t]=m;var w=(l,t,m)=>P(l,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}},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}),a=t.computed(()=>{const V=`f-icon-${o.value&&o.value.type?o.value.type.replace("toasty-type-",""):"default"}`,B={"f-icon":!0};return B[V]=!0,B}),p=t.computed(()=>o.value.title||o.value.message),f=t.computed(()=>o.value.title&&o.value.message),d=t.computed(()=>!o.value.title&&o.value.message),g=t.computed(()=>s.showCloseButton),h=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 S=()=>{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:V=>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)]),p.value&&t.createVNode("section",{class:"modal-tips"},[t.createVNode("div",{class:"float-left modal-tips-iconwrap"},[t.createVNode("span",{class:a.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),h.value&&S()]),d.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"},[S()])]):t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",innerHTML:o.value.message},null))])])])}}),y=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),a=t.computed(()=>s.position||"bottom-right"),p=t.computed(()=>s.timeout!=null?s.timeout:3e3),f=t.computed(()=>{const h=s.bottom?s.bottom:c.bottom,C=s.top?s.top:c.top,N={transition:"all 0.2s ease",left:a.value.indexOf("left")>-1?`${s.left?s.left:c.left}px`:"",right:a.value.indexOf("right")>-1?`${s.right?s.right:c.right}px`:"",top:a.value.indexOf("top")>-1?`${C}px`:"",bottom:a.value.indexOf("bottom")>-1?`${h}px`:""};return a.value.indexOf("center")>-1&&(N.left="50%",N.marginLeft="calc(-24rem / 2)",a.value==="center-center"&&(N.top="50%",N.transform="translate(-50%, -50%)")),N});function d(h){e.emit("close")}p.value&&setTimeout(()=>{d()},p.value),e.expose({closeToast:d,container:o,notifyPosition:a});function g(h,C){d()}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:h=>g(h,i.value)},null)])}});class I{constructor(){w(this,"notifyRefs",[]);w(this,"globalConfig",t.reactive({}))}createNotifyInstance(e){const n=this,o=Object.assign({timeout:3e3,position:"bottom-right",showCloseButton:!0},this.globalConfig,{...e}),i=document.createElement("div");i.style.display="contents";const r=t.createApp({setup(){const a=t.ref();function p(){a.value.container.style.transform="scale(0)",setTimeout(()=>{n.updateNotifyPositionForClose(o,a),r.unmount()},220)}if(o.position.indexOf("top")>-1){const f=n.getNotifyInstances(o.position),d=f[f.length-1];if(d){const g=d.value.container.getBoundingClientRect();o.top=g.bottom}}return t.onUnmounted(()=>{document.body.removeChild(i)}),t.onMounted(()=>{n.updateNotifyPositionForCreate(o,a)}),()=>t.createVNode(t.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[t.createVNode(y,t.mergeProps({ref:a},o,{onClose:p}),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,a;typeof n=="string"?c=n:n&&(c=n.message||"",o=n.title||"",r=n.position||null,a=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),a!=null&&(f.showCloseButton=a),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");y.install=s=>{s.component(y.name,y),s.component(b.name,b);const e=new I;s.provide(O,e),s.provide("FNotifyService",e)},l.FNotify=y,l.FNotifyService=I,l.FToast=b,l.F_NOTIFY_SERVICE_TOKEN=O,l.default=y,l.notifyProps=m,l.toastProps=v,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});