@wikimedia/codex/dist/modules/CdxPopover.cjs

Codex Design System for Wikimedia

"use strict";var b=(o,a,l)=>new Promise((c,u)=>{var m=t=>{try{r(l.next(t))}catch(f){u(f)}},p=t=>{try{r(l.throw(t))}catch(f){u(f)}},r=t=>t.done?c(t.value):Promise.resolve(t.value).then(m,p);r((l=l.apply(o,a)).next())});const e=require("vue"),w=require("./unwrapElement.js"),B=require("./Icon.js"),I=require("./CdxButton.cjs"),H=require("./useI18nWithOverride.js"),M=require("./constants.js"),h=require("./floating-ui.dom.js"),j=require("./_plugin-vue_export-helper.js"),R=e.defineComponent({name:"CdxPopover",components:{CdxButton:I,CdxIcon:B.CdxIcon},inheritAttrs:!1,props:{anchor:{type:Object,default:null},open:{type:Boolean,default:!1},title:{type:String,default:""},icon:{type:[String,Object],default:""},useCloseButton:{type:Boolean,default:!1},closeButtonLabel:{type:String,default:"Close"},primaryAction:{type:Object,default:null},defaultAction:{type:Object,default:null},stackedActions:{type:Boolean,default:!1},renderInPlace:{type:Boolean,default:!1},placement:{type:String,default:"bottom"}},emits:["update:open","primary","default"],setup(o,{emit:a}){const l=e.toRef(o,"placement"),c=e.ref(),u=e.toRef(o,"anchor"),m=e.ref(),p=16,r=256,t=200,f=512,E=Math.sqrt(16**2+16**2)/2+4,x=e.computed(()=>[h.offset(E),h.flip(),h.size({padding:p,apply({availableWidth:n,availableHeight:i,elements:y}){const P=Math.min(f,n);Object.assign(y.floating.style,{maxWidth:"".concat(Math.max(r,P),"px"),maxHeight:"".concat(Math.max(t,i),"px")})}}),w.arrow({element:m})]),{floatingStyles:A,middlewareData:k,placement:$,x:S,y:L}=w.useFloating(u,c,{whileElementsMounted:h.autoUpdate,placement:l,middleware:x}),d=e.reactive({left:"0",top:"0",right:"0",bottom:"0",transform:"none"}),_=e.computed(()=>M.oppositeSides[$.value]);e.watch([S,L],()=>{if(k.value.arrow){const{x:n,y:i}=k.value.arrow;d.left=n?"".concat(n,"px"):"",d.top=i?"".concat(i,"px"):"",d.right="",d.bottom="",d[_.value]="".concat(-16/2-1,"px");const y={top:"rotate( 45deg )",right:"rotate( 135deg )",bottom:"rotate( 225deg )",left:"rotate( 315deg )"};d.transform=y[_.value]}});const C=e.inject("CdxTeleportTarget",void 0),V=e.computed(()=>C!=null?C:"body"),N=H.useI18nWithOverride(e.toRef(o,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),O=e.computed(()=>!!o.title||!!o.icon||o.useCloseButton),T=e.computed(()=>!!o.primaryAction||!!o.defaultAction),q=e.computed(()=>({"cdx-popover__footer__actions--vertical":o.stackedActions,"cdx-popover__footer__actions--horizontal":!o.stackedActions}));function g(){a("update:open",!1)}function v(n){n.key==="Escape"&&g()}function s(n){const i=w.unwrapElement(u.value);c.value&&!c.value.contains(n.target)&&!(i!=null&&i.contains(n.target))&&g()}return e.watch(()=>o.open,n=>{n?(document.addEventListener("keydown",v),document.addEventListener("mousedown",s),document.addEventListener("focusin",s)):(document.removeEventListener("keydown",v),document.removeEventListener("mousedown",s),document.removeEventListener("focusin",s))}),e.onMounted(()=>b(this,null,function*(){o.open&&(document.addEventListener("keydown",v),document.addEventListener("mousedown",s),document.addEventListener("focusin",s)),yield e.nextTick(),o.anchor===null&&console.warn('[CdxPopover]: The "anchor" prop must be provided to position the CdxPopover.')})),e.onUnmounted(()=>{document.removeEventListener("keydown",v),document.removeEventListener("mousedown",s),document.removeEventListener("focusin",s)}),{computedTarget:V,translatedCloseButtonLabel:N,showHeader:O,showFooter:T,footerActionsClasses:q,close:g,cdxIconClose:B.h4,floating:c,floatingStyles:A,arrowRef:m,arrowStyles:d}}}),W={key:0,class:"cdx-popover__header"},D={key:1,class:"cdx-popover__header__title"},z={class:"cdx-popover__header__button-wrapper"},F={class:"cdx-popover__body"},U={key:1,class:"cdx-popover__footer"};function K(o,a,l,c,u,m){const p=e.resolveComponent("cdx-icon"),r=e.resolveComponent("cdx-button");return e.openBlock(),e.createBlock(e.Teleport,{to:o.computedTarget,disabled:o.renderInPlace},[o.open?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref:"floating",class:"cdx-popover",style:o.floatingStyles},o.$attrs),[o.showHeader||o.$slots.header?(e.openBlock(),e.createElementBlock("header",W,[e.renderSlot(o.$slots,"header",{},()=>[o.icon?(e.openBlock(),e.createBlock(p,{key:0,class:"cdx-popover__header__icon",icon:o.icon},null,8,["icon"])):e.createCommentVNode("v-if",!0),o.title?(e.openBlock(),e.createElementBlock("div",D,e.toDisplayString(o.title),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",z,[o.useCloseButton?(e.openBlock(),e.createBlock(r,{key:0,class:"cdx-popover__header__close-button",weight:"quiet",type:"button","aria-label":o.translatedCloseButtonLabel,onClick:o.close},{default:e.withCtx(()=>[e.createVNode(p,{icon:o.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("v-if",!0)])])])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",F,[e.renderSlot(o.$slots,"default")]),o.showFooter||o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",U,[e.renderSlot(o.$slots,"footer",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(["cdx-popover__footer__actions",o.footerActionsClasses])},[o.primaryAction?(e.openBlock(),e.createBlock(r,{key:0,class:"cdx-popover__footer__primary-action",weight:"primary",action:o.primaryAction.actionType,disabled:o.primaryAction.disabled,onClick:a[0]||(a[0]=t=>o.$emit("primary"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.primaryAction.label),1)]),_:1},8,["action","disabled"])):e.createCommentVNode("v-if",!0),o.defaultAction?(e.openBlock(),e.createBlock(r,{key:1,class:"cdx-popover__footer__default-action",disabled:o.defaultAction.disabled,onClick:a[1]||(a[1]=t=>o.$emit("default"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.defaultAction.label),1)]),_:1},8,["disabled"])):e.createCommentVNode("v-if",!0)],2)])])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",{ref:"arrowRef",class:"cdx-popover__arrow",style:e.normalizeStyle(o.arrowStyles)},null,4)],16)):e.createCommentVNode("v-if",!0)],8,["to","disabled"])}const X=j._export_sfc(R,[["render",K]]);module.exports=X;