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

Codex Design System for Wikimedia

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