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

Codex Design System for Wikimedia

"use strict";var b=(t,a,l)=>new Promise((c,u)=>{var m=n=>{try{r(l.next(n))}catch(f){u(f)}},p=n=>{try{r(l.throw(n))}catch(f){u(f)}},r=n=>n.done?c(n.value):Promise.resolve(n.value).then(m,p);r((l=l.apply(t,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(t,{emit:a}){const l=e.toRef(t,"placement"),c=e.ref(),u=e.toRef(t,"anchor"),m=e.ref(),p=16,r=192,n=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:o,availableHeight:i,elements:y}){const P=Math.min(f,o);Object.assign(y.floating.style,{maxWidth:"".concat(Math.max(r,P),"px"),maxHeight:"".concat(Math.max(n,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:o,y:i}=k.value.arrow;d.left=o?"".concat(o,"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 g=e.inject("CdxTeleportTarget",void 0),V=e.computed(()=>g!=null?g:"body"),N=H.useI18nWithOverride(e.toRef(t,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),O=e.computed(()=>!!t.title||!!t.icon||t.useCloseButton),T=e.computed(()=>!!t.primaryAction||!!t.defaultAction),q=e.computed(()=>({"cdx-popover__footer__actions--vertical":t.stackedActions,"cdx-popover__footer__actions--horizontal":!t.stackedActions}));function C(){a("update:open",!1)}function v(o){o.key==="Escape"&&C()}function s(o){const i=w.unwrapElement(u.value);o.target!==document.documentElement&&c.value&&!c.value.contains(o.target)&&!(i!=null&&i.contains(o.target))&&C()}return e.watch(()=>t.open,o=>{o?(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*(){t.open&&(document.addEventListener("keydown",v),document.addEventListener("mousedown",s),document.addEventListener("focusin",s)),yield e.nextTick(),t.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:C,cdxIconClose:B.l4,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(t,a,l,c,u,m){const p=e.resolveComponent("cdx-icon"),r=e.resolveComponent("cdx-button");return e.openBlock(),e.createBlock(e.Teleport,{to:t.computedTarget,disabled:t.renderInPlace},[t.open?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref:"floating",class:"cdx-popover",style:t.floatingStyles},t.$attrs),[t.showHeader||t.$slots.header?(e.openBlock(),e.createElementBlock("header",W,[e.renderSlot(t.$slots,"header",{},()=>[t.icon?(e.openBlock(),e.createBlock(p,{key:0,class:"cdx-popover__header__icon",icon:t.icon},null,8,["icon"])):e.createCommentVNode("v-if",!0),t.title?(e.openBlock(),e.createElementBlock("div",D,e.toDisplayString(t.title),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",z,[t.useCloseButton?(e.openBlock(),e.createBlock(r,{key:0,class:"cdx-popover__header__close-button",weight:"quiet",type:"button","aria-label":t.translatedCloseButtonLabel,onClick:t.close},{default:e.withCtx(()=>[e.createVNode(p,{icon:t.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(t.$slots,"default")]),t.showFooter||t.$slots.footer?(e.openBlock(),e.createElementBlock("footer",U,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(["cdx-popover__footer__actions",t.footerActionsClasses])},[t.primaryAction?(e.openBlock(),e.createBlock(r,{key:0,class:"cdx-popover__footer__primary-action",weight:"primary",action:t.primaryAction.actionType,disabled:t.primaryAction.disabled,onClick:a[0]||(a[0]=n=>t.$emit("primary"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.primaryAction.label),1)]),_:1},8,["action","disabled"])):e.createCommentVNode("v-if",!0),t.defaultAction?(e.openBlock(),e.createBlock(r,{key:1,class:"cdx-popover__footer__default-action",disabled:t.defaultAction.disabled,onClick:a[1]||(a[1]=n=>t.$emit("default"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.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(t.arrowStyles)},null,4)],16)):e.createCommentVNode("v-if",!0)],8,["to","disabled"])}const X=j._export_sfc(R,[["render",K]]);module.exports=X;