@wikimedia/codex/dist/modules/ToastDisplay.js

Codex Design System for Wikimedia

"use strict";const t=require("vue"),H=require("./CdxMessage.cjs"),F=require("./constants.js"),G=require("./useSplitAttributes.cjs"),L=require("./useToast.js"),J=require("./_plugin-vue_export-helper.js"),Q=t.defineComponent({name:"CdxToastDisplay",components:{CdxMessage:H},inheritAttrs:!1,props:{type:{type:String,default:"notice",validator:F.statusTypeValidator},icon:{type:[String,Object],default:null},actionButtonLabel:{type:String,default:""},preventUserDismiss:{type:Boolean,default:!1},autoDismiss:{type:[Boolean,Number],default:!1,validator:s=>typeof s=="boolean"||typeof s=="number"&&s>0},renderInPlace:{type:Boolean,default:!1},target:{type:[String,Object],default:void 0}},emits:["user-dismissed","auto-dismissed","action-button-click"],setup(s,{emit:o,attrs:b}){const v=t.ref(!1),u=t.ref(),g=t.ref(""),l=t.ref(null),a=t.ref(!1);let p=null,c=!1,y;function A(){return typeof document=="undefined"?null:document.querySelector(".cdx-toast-container__stack")}const B=t.ref(A()),X=t.inject("CdxTeleportTarget",void 0),q=t.computed(()=>{var e,r,i;return(i=(r=(e=t.unref(s.target))!=null?e:B.value)!=null?r:t.unref(X))!=null?i:"body"}),d=t.computed(()=>s.autoDismiss===!0?4e3:s.autoDismiss),x=t.computed(()=>({["cdx-toast--".concat(s.type)]:!0})),{rootClasses:P}=G(b,x);function D(e){v.value||(f(),g.value=e==="user-dismissed"?"cdx-toast-leave-active-user":"cdx-toast-leave-active-system",l.value=e,v.value=!0)}function I(){l.value&&(o(l.value),l.value=null)}function V(){o("action-button-click")}function O(){c=!0,f()}function R(){c&&d.value&&(c=!1,T())}function f(){p&&(clearTimeout(p),p=null)}function T(){!d.value||c||(p=setTimeout(()=>{if(a.value||L.isUserTouchingToastRef.value){f();return}D("auto-dismissed")},d.value))}t.watch(L.isUserTouchingToastRef,(e,r)=>{r&&!e&&d.value&&!c&&(f(),T())}),t.watch(d,e=>{f(),e&&!c&&T()});function j(){if(!u.value||s.preventUserDismiss)return;const e=u.value,r=.35;let i=null,m=0;function W(){return s.renderInPlace?"":"translateX(-50%)"}function K(n){const C=e.offsetWidth*r,h=Math.max(.95,1-Math.abs(n)/C*.05);e.style.opacity=String(h),s.renderInPlace?e.style.transform="translateX(".concat(n,"px)"):e.style.transform="translateX(calc(-50% + ".concat(n,"px))")}function k(){e.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",e.style.transform=W(),e.style.opacity="";const n=()=>{e.removeEventListener("transitionend",n),e.style.transition="",e.style.transform=""};e.addEventListener("transitionend",n)}function z(){const n=m>=0?1:-1,C=e.offsetWidth*1.2,h=n*C;e.style.transition="transform 0.25s ease-out, opacity 0.25s ease-out",e.style.opacity="0",s.renderInPlace?e.style.transform="translateX(".concat(h,"px)"):e.style.transform="translateX(calc(-50% + ".concat(h,"px))");const U=()=>{e.removeEventListener("transitionend",U),D("user-dismissed")};e.addEventListener("transitionend",U)}function E(n){a.value=n,L.isUserTouchingToastRef.value=n}const M=n=>{i=n.touches[0].clientX,m=0,e.style.transition="",E(!0)},$=n=>{i!==null&&(n.preventDefault(),m=n.touches[0].clientX-i,K(m))},S=()=>{if(E(!1),i===null)return;const n=e.offsetWidth*r;Math.abs(m)>=n?z():k(),i=null},w=()=>{E(!1),i!==null&&(k(),i=null)};return e.addEventListener("touchstart",M,{passive:!0}),e.addEventListener("touchmove",$,{passive:!1}),e.addEventListener("touchend",S,{passive:!0}),e.addEventListener("touchcancel",w,{passive:!0}),()=>{e.removeEventListener("touchstart",M),e.removeEventListener("touchmove",$),e.removeEventListener("touchend",S),e.removeEventListener("touchcancel",w)}}async function N(){await t.nextTick(),u.value&&u.value.focus()}return t.onMounted(async()=>{B.value=A(),d.value&&T(),y=j(),await N()}),t.onUnmounted(()=>{f(),y==null||y()}),{dismissed:v,toastElement:u,rootClasses:P,leaveActiveClass:g,onDismiss:D,onActionButtonClick:V,onAfterLeave:I,onMouseEnter:O,onMouseLeave:R,computedTarget:q}}});function Y(s,o,b,v,u,g){const l=t.resolveComponent("cdx-message");return t.openBlock(),t.createBlock(t.Teleport,{disabled:s.renderInPlace,to:s.computedTarget},[t.createVNode(t.Transition,{name:"cdx-toast",appear:"","leave-active-class":s.leaveActiveClass,onAfterLeave:s.onAfterLeave},{default:t.withCtx(()=>[s.dismissed?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("div",{key:0,ref:"toastElement",class:t.normalizeClass(["cdx-toast",s.rootClasses]),tabindex:-1,onMouseenter:o[2]||(o[2]=(...a)=>s.onMouseEnter&&s.onMouseEnter(...a)),onMouseleave:o[3]||(o[3]=(...a)=>s.onMouseLeave&&s.onMouseLeave(...a)),onKeydown:o[4]||(o[4]=t.withKeys(a=>s.onDismiss("user-dismissed"),["esc"]))},[t.createVNode(l,{type:s.type,icon:s.icon,"action-button-label":s.actionButtonLabel,"allow-user-dismiss":!s.preventUserDismiss,class:"cdx-toast__message",onUserDismissed:o[0]||(o[0]=a=>s.onDismiss("user-dismissed")),onAutoDismissed:o[1]||(o[1]=a=>s.onDismiss("auto-dismissed")),onActionButtonClick:s.onActionButtonClick},{default:t.withCtx(()=>[t.renderSlot(s.$slots,"default")]),_:3},8,["type","icon","action-button-label","allow-user-dismiss","onActionButtonClick"])],34))]),_:3},8,["leave-active-class","onAfterLeave"])],8,["disabled","to"])}const Z=J._export_sfc(Q,[["render",Y]]);exports.CdxToastDisplay=Z;