@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 2.8 kB
JavaScript
;const e=require("vue"),C=require("./ToastDisplay.js"),a=require("./useToast.js"),v=require("./_plugin-vue_export-helper.js"),T=e.defineComponent({name:"CdxToastContainer",components:{CdxToastDisplay:C.CdxToastDisplay},props:{target:{type:[String,Object],default:void 0}},setup(i){const{dismiss:l}=a.useToast(),c=e.ref(!1),p=e.inject("CdxTeleportTarget",void 0),m=e.computed(()=>{var o,t;return(t=e.unref((o=i.target)!=null?o:p))!=null?t:"body"});function f(o,t){const n=a.contentRefsById.get(o);if(n){const r=t&&"$el"in t?t.$el:t;n.value=r}}function u(o){var n;const t=a.toastStore.toasts.find(r=>r.id===o);l(o),(n=t==null?void 0:t.onUserDismissed)==null||n.call(t)}function s(o){var n;const t=a.toastStore.toasts.find(r=>r.id===o);l(o),(n=t==null?void 0:t.onAutoDismissed)==null||n.call(t)}function d(o){var n;const t=a.toastStore.toasts.find(r=>r.id===o);(n=t==null?void 0:t.actionButton)==null||n.onClick()}return e.onMounted(()=>{if(a.isToastContainerInitialized.value){console.warn("CdxToastContainer: Only one ToastContainer should be mounted in the app. Multiple instances may cause duplicate or missing toasts. This instance will not render.");return}a.isToastContainerInitialized.value=!0,c.value=!0}),e.onUnmounted(()=>{c.value&&(a.isToastContainerInitialized.value=!1)}),{toastStore:a.toastStore,computedTarget:m,isInitialized:c,setToastContentRef:f,handleUserDismissed:u,handleAutoDismissed:s,handleActionButtonClick:d}}}),k={class:"cdx-toast-container"},y={class:"cdx-toast-container__stack"};function g(i,l,c,p,m,f){const u=e.resolveComponent("cdx-toast-display");return i.isInitialized?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:i.computedTarget},[e.createElementVNode("div",k,[e.createElementVNode("div",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.toastStore.toasts,s=>{var d,o,t;return e.openBlock(),e.createBlock(u,{key:s.id,type:s.type,icon:(d=s.icon)!=null?d:void 0,"action-button-label":(t=(o=s.actionButton)==null?void 0:o.label)!=null?t:"","auto-dismiss":s.autoDismiss,"prevent-user-dismiss":s.preventUserDismiss,"render-in-place":"",onUserDismissed:n=>i.handleUserDismissed(s.id),onAutoDismissed:n=>i.handleAutoDismissed(s.id),onActionButtonClick:n=>i.handleActionButtonClick(s.id)},{default:e.withCtx(()=>[s.message?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.message),1)],64)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_for:!0,ref:n=>i.setToastContentRef(s.id,n),class:"cdx-toast__content-target"},null,512))]),_:2},1032,["type","icon","action-button-label","auto-dismiss","prevent-user-dismiss","onUserDismissed","onAutoDismissed","onActionButtonClick"])}),128))])])],8,["to"])):e.createCommentVNode("v-if",!0)}const B=v._export_sfc(T,[["render",g]]);module.exports=B;