@wikimedia/codex/dist/sandbox/assets/Popover-C4nGDEs_.js

Codex Design System for Wikimedia

import{a as Re,u as We}from"./floating-ui.vue-BoMgb7aA.js";import{aZ as te,af as ne,ag as ae,d as ze,C as De,c as i,a2 as Ne,ae as qe,a0 as Ue,t as j,r as p,a_ as Ke,B as S,a6 as Ge,aW as Xe,_ as Ye,a as Q,f as E,o as r,b as m,g as l,j as ee,w as M,n as x,e as L,E as Ze,h as I,s as R,q as oe,G as Je,T as Qe,I as eo}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-B2dh5vkz.js";import{C as oo,u as to,b as no,d as ao,e as io}from"./TypeaheadSearch.vue_vue_type_style_index_0_lang-B_b8vN-_.js";import{o as so,f as ro,s as lo,a as uo}from"./floating-ui.dom-CMj0Z5yx.js";const g={mobileMax:639,tabletMin:640,desktopMin:1120,desktopWideMin:1680};function co(){const e=te({mobile:!1,tablet:!1,desktop:!1,"desktop-wide":!1});function n(){if(typeof window!="object")return;const u=window.innerWidth;e.mobile=u<=g.mobileMax,e.tablet=u>=g.tabletMin&&u<g.desktopMin,e.desktop=u>=g.desktopMin&&u<g.desktopWideMin,e["desktop-wide"]=u>=g.desktopWideMin}return ne(()=>{n(),window.addEventListener("resize",n)}),ae(()=>{window.removeEventListener("resize",n)}),e}const po=ze({name:"CdxPopover",components:{CdxButton:oo,CdxIcon:De},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"},useBottomSheet:{type:Boolean,default:!1},hideBackdrop:{type:Boolean,default:!1}},emits:["update:open","primary","default"],setup(e,{emit:n}){const u=co(),t=i(()=>e.useBottomSheet&&u.mobile),W=Ne("CdxTeleportTarget",void 0),z=i(()=>{var o;return(o=qe(W))!=null?o:"body"}),T=Ue(j(e,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),k=i(()=>t.value?"cdx-popover-bottom-sheet":"cdx-popover-floating"),s=i(()=>!!e.title||!!e.icon||e.useCloseButton),ie=i(()=>!!e.primaryAction||!!e.defaultAction),P=p(!1),se=i(()=>({"cdx-popover__footer__actions--vertical":e.stackedActions})),re=i(()=>({"cdx-popover__backdrop--bottom-sheet":t.value,"cdx-popover__backdrop--no-backdrop":t.value&&e.hideBackdrop})),le=i(()=>({"cdx-popover--bottom-sheet":t.value,"cdx-popover--dividers":t.value&&P.value})),de=j(e,"placement"),d=p(),D=p(),N=p(),w=p(),$=j(e,"anchor"),ue=16,ce=192,pe=200,fe=512,ve=Math.sqrt(16**2+16**2)/2+4,me=i(()=>t.value?[]:[so(ve),ro(),lo({padding:ue,apply({availableWidth:o,availableHeight:a,elements:c}){const v=Math.min(fe,o);Object.assign(c.floating.style,{maxWidth:"".concat(Math.max(ce,v),"px"),maxHeight:"".concat(Math.max(pe,a),"px")})}}),Re({element:N})]),{floatingStyles:we,middlewareData:q,placement:ye,x:he,y:be}=We($,d,{whileElementsMounted:uo,placement:de,middleware:me}),f=te({left:"0",top:"0",right:"0",bottom:"0",transform:"none"}),U=i(()=>Ke[ye.value]);S([he,be],()=>{if(t.value||!q.value.arrow)return;const{x:o,y:a}=q.value.arrow;f.left=o?"".concat(o,"px"):"",f.top=a?"".concat(a,"px"):"",f.right="",f.bottom="",f[U.value]="".concat(-16/2-1,"px");const c={top:"rotate( 45deg )",right:"rotate( 135deg )",bottom:"rotate( 225deg )",left:"rotate( 315deg )"};f.transform=c[U.value]});const V=p(0),O=p(0),A=p(0);function ge(){V.value=window.innerHeight,O.value=0,A.value=0}function K(o,a){V.value=o,O.value=a}let y=0;function G(){y!==0&&(cancelAnimationFrame(y),y=0)}function h(){y===0&&(y=requestAnimationFrame(()=>{if(y=0,!window.visualViewport){K(window.innerHeight,0);return}K(window.visualViewport.height,window.visualViewport.offsetTop)}))}function ke(){window.visualViewport&&(window.visualViewport.addEventListener("resize",h),window.visualViewport.addEventListener("scroll",h))}function X(){window.visualViewport&&(window.visualViewport.removeEventListener("resize",h),window.visualViewport.removeEventListener("scroll",h))}const Ce=i(()=>{if(!t.value)return{};const o=V.value>0?V.value:A.value||window.innerHeight,a=O.value,v=(A.value||window.innerHeight)-o-a,B=v>100?Math.max(0,v):0;return B<=0?{}:{paddingBottom:"".concat(B,"px")}}),Be=to(w),Se=i(()=>{var o;return(o=Be.value.height)!=null?o:0});S(Se,()=>{!t.value||!w.value||(P.value=w.value.clientHeight<w.value.scrollHeight)}),S(t,()=>{t.value||(P.value=!1)});const Ee=i(()=>t.value?Ce.value:we.value),Le=i(()=>e.open&&t.value);no(Le);let Y=!1;function H(){n("update:open",!1)}function Te(o){t.value&&o.stopPropagation()}function Ve(o){t.value&&(Y=o.target===D.value)}function Ae(){!t.value||!Y||H()}function C(o){o.key==="Escape"&&H()}function b(o){if(t.value)return;const a=io($.value);o.target!==document.documentElement&&d.value&&!d.value.contains(o.target)&&!(a!=null&&a.contains(o.target))&&H()}const{focusTrapStart:He,focusTrapEnd:Me,focusHolder:Pe,focusFirst:$e,focusLast:Oe,activateFocusTrap:Z,deactivateFocusTrap:F}=ao({containerRef:d,bodyRef:w,anchorRef:$,preventScroll:!0});function Fe(){document.removeEventListener("keydown",C),document.removeEventListener("mousedown",b),document.removeEventListener("focusin",b),F()}async function _e(){document.addEventListener("keydown",C),document.addEventListener("mousedown",b),document.addEventListener("focusin",b),await Z()}function je(){var o,a,c,v,B;(o=d.value)==null||o.style.removeProperty("max-width"),(a=d.value)==null||a.style.removeProperty("max-height"),(c=d.value)==null||c.style.removeProperty("left"),(v=d.value)==null||v.style.removeProperty("top"),(B=d.value)==null||B.style.removeProperty("position")}async function xe(){je(),document.addEventListener("keydown",C),h(),ke(),await Z()}function Ie(){document.removeEventListener("keydown",C),X(),G(),ge(),F()}function J(o){o?Ie():Fe()}async function _(o){o?(A.value=document.documentElement.clientHeight,await xe()):await _e()}return S(()=>e.open,async o=>{if(o){await _(t.value);return}J(t.value)}),S(t,async(o,a)=>{!e.open||o===a||(J(a),await _(o))}),ne(async()=>{e.open&&await _(t.value),t.value&&h(),await Ge(),e.anchor===null&&console.warn('[CdxPopover]: The "anchor" prop must be provided to position the popover in floating mode.')}),ae(()=>{document.removeEventListener("keydown",C),document.removeEventListener("mousedown",b),document.removeEventListener("focusin",b),X(),G(),F()}),{computedTarget:z,translatedCloseButtonLabel:T,showHeader:s,showFooter:ie,footerActionsClasses:se,close:H,cdxIconClose:Xe,transitionName:k,backdropClassObject:re,panelClassObject:le,panelInlineStyles:Ee,backdrop:D,panel:d,arrowRef:N,arrowStyles:f,focusTrapStart:He,focusTrapEnd:Me,focusHolder:Pe,bodyEl:w,focusFirst:$e,focusLast:Oe,isBottomSheet:t,onBackdropMouseDown:Ve,onBackdropClick:Ae,onPanelClick:Te}}}),fo=["role","aria-modal"],vo={ref:"focusHolder",class:"cdx-popover-focus-trap",tabindex:"-1"},mo={key:0,class:"cdx-popover__header"},wo={key:1,class:"cdx-popover__header__title"},yo={class:"cdx-popover__header__button-wrapper"},ho={key:1,class:"cdx-popover__footer"};function bo(e,n,u,t,W,z){const T=Q("cdx-icon"),k=Q("cdx-button");return r(),E(eo,{to:e.computedTarget,disabled:e.renderInPlace},[e.open?(r(),m("div",{key:0,ref:"focusTrapStart",tabindex:"0",onFocus:n[0]||(n[0]=(...s)=>e.focusLast&&e.focusLast(...s))},null,544)):l("v-if",!0),ee(Qe,{name:e.transitionName,appear:""},{default:M(()=>[e.open?(r(),m("div",{key:0,ref:"backdrop",class:x(["cdx-popover__backdrop",e.backdropClassObject]),onMousedown:n[4]||(n[4]=(...s)=>e.onBackdropMouseDown&&e.onBackdropMouseDown(...s)),onClick:n[5]||(n[5]=(...s)=>e.onBackdropClick&&e.onBackdropClick(...s))},[L("div",Ze({ref:"panel",class:["cdx-popover",e.panelClassObject],style:e.panelInlineStyles,role:e.isBottomSheet?"dialog":void 0,"aria-modal":e.isBottomSheet?"true":void 0},e.$attrs,{onClick:n[3]||(n[3]=(...s)=>e.onPanelClick&&e.onPanelClick(...s))}),[L("div",vo,null,512),e.showHeader||e.$slots.header?(r(),m("header",mo,[I(e.$slots,"header",{},()=>[e.icon?(r(),E(T,{key:0,class:"cdx-popover__header__icon",icon:e.icon},null,8,["icon"])):l("v-if",!0),e.title?(r(),m("div",wo,R(e.title),1)):l("v-if",!0),L("div",yo,[e.useCloseButton?(r(),E(k,{key:0,class:"cdx-popover__header__close-button",weight:"quiet",type:"button","aria-label":e.translatedCloseButtonLabel,onClick:e.close},{default:M(()=>[ee(T,{icon:e.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])):l("v-if",!0)])])])):l("v-if",!0),L("div",{ref:"bodyEl",class:x(["cdx-popover__body",{"cdx-popover__body--no-footer":!e.showFooter&&!e.$slots.footer}])},[I(e.$slots,"default")],2),e.showFooter||e.$slots.footer?(r(),m("footer",ho,[I(e.$slots,"footer",{},()=>[L("div",{class:x(["cdx-popover__footer__actions",e.footerActionsClasses])},[e.primaryAction?(r(),E(k,{key:0,class:"cdx-popover__footer__primary-action",weight:"primary",action:e.primaryAction.actionType,disabled:e.primaryAction.disabled,onClick:n[1]||(n[1]=s=>e.$emit("primary"))},{default:M(()=>[oe(R(e.primaryAction.label),1)]),_:1},8,["action","disabled"])):l("v-if",!0),e.defaultAction?(r(),E(k,{key:1,class:"cdx-popover__footer__default-action",disabled:e.defaultAction.disabled,onClick:n[2]||(n[2]=s=>e.$emit("default"))},{default:M(()=>[oe(R(e.defaultAction.label),1)]),_:1},8,["disabled"])):l("v-if",!0)],2)])])):l("v-if",!0),e.isBottomSheet?l("v-if",!0):(r(),m("div",{key:2,ref:"arrowRef",class:"cdx-popover__arrow",style:Je(e.arrowStyles)},null,4))],16,fo)],34)):l("v-if",!0)]),_:3},8,["name"]),e.open?(r(),m("div",{key:1,ref:"focusTrapEnd",tabindex:"0",onFocus:n[6]||(n[6]=(...s)=>e.focusFirst&&e.focusFirst(...s))},null,544)):l("v-if",!0)],8,["to","disabled"])}const Ao=Ye(po,[["render",bo]]);export{Ao as C};