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

Codex Design System for Wikimedia

"use strict";const e=require("vue"),z=require("./floating-ui.vue.js"),D=require("./Icon.js"),Le=require("./CdxButton.cjs"),Te=require("./useI18nWithOverride.js"),Ae=require("./useResizeObserver.cjs"),W=require("./useScrollLock.js"),He=require("./unwrapElement.js"),Me=require("./constants.js"),E=require("./floating-ui.dom.js"),Ne=require("./_plugin-vue_export-helper.js"),w={mobileMax:639,tabletMin:640,desktopMin:1120,desktopWideMin:1680};function Pe(){const o=e.reactive({mobile:!1,tablet:!1,desktop:!1,"desktop-wide":!1});function r(){if(typeof window!="object")return;const s=window.innerWidth;o.mobile=s<=w.mobileMax,o.tablet=s>=w.tabletMin&&s<w.desktopMin,o.desktop=s>=w.desktopMin&&s<w.desktopWideMin,o["desktop-wide"]=s>=w.desktopWideMin}return e.onMounted(()=>{r(),window.addEventListener("resize",r)}),e.onUnmounted(()=>{window.removeEventListener("resize",r)}),o}const Oe=e.defineComponent({name:"CdxPopover",components:{CdxButton:Le,CdxIcon:D.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"},useBottomSheet:{type:Boolean,default:!1},hideBackdrop:{type:Boolean,default:!1}},emits:["update:open","primary","default"],setup(o,{emit:r}){const s=Pe(),n=e.computed(()=>o.useBottomSheet&&s.mobile),H=e.inject("CdxTeleportTarget",void 0),M=e.computed(()=>{var t;return(t=e.unref(H))!=null?t:"body"}),b=Te.useI18nWithOverride(e.toRef(o,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),k=e.computed(()=>n.value?"cdx-popover-bottom-sheet":"cdx-popover-floating"),i=e.computed(()=>!!o.title||!!o.icon||o.useCloseButton),U=e.computed(()=>!!o.primaryAction||!!o.defaultAction),S=e.ref(!1),K=e.computed(()=>({"cdx-popover__footer__actions--vertical":o.stackedActions})),X=e.computed(()=>({"cdx-popover__backdrop--bottom-sheet":n.value,"cdx-popover__backdrop--no-backdrop":n.value&&o.hideBackdrop})),Y=e.computed(()=>({"cdx-popover--bottom-sheet":n.value,"cdx-popover--dividers":n.value&&S.value})),G=e.toRef(o,"placement"),l=e.ref(),N=e.ref(),P=e.ref(),p=e.ref(),g=e.toRef(o,"anchor"),J=16,Q=192,Z=200,ee=512,oe=Math.sqrt(16**2+16**2)/2+4,te=e.computed(()=>n.value?[]:[E.offset(oe),E.flip(),E.size({padding:J,apply({availableWidth:t,availableHeight:a,elements:c}){const u=Math.min(ee,t);Object.assign(c.floating.style,{maxWidth:"".concat(Math.max(Q,u),"px"),maxHeight:"".concat(Math.max(Z,a),"px")})}}),z.arrow({element:P})]),{floatingStyles:ne,middlewareData:O,placement:re,x:ae,y:ie}=z.useFloating(g,l,{whileElementsMounted:E.autoUpdate,placement:G,middleware:te}),d=e.reactive({left:"0",top:"0",right:"0",bottom:"0",transform:"none"}),$=e.computed(()=>Me.oppositeSides[re.value]);e.watch([ae,ie],()=>{if(n.value||!O.value.arrow)return;const{x:t,y:a}=O.value.arrow;d.left=t?"".concat(t,"px"):"",d.top=a?"".concat(a,"px"):"",d.right="",d.bottom="",d[$.value]="".concat(-16/2-1,"px");const c={top:"rotate( 45deg )",right:"rotate( 135deg )",bottom:"rotate( 225deg )",left:"rotate( 315deg )"};d.transform=c[$.value]});const B=e.ref(0),L=e.ref(0),C=e.ref(0);function le(){B.value=window.innerHeight,L.value=0,C.value=0}function F(t,a){B.value=t,L.value=a}let f=0;function x(){f!==0&&(cancelAnimationFrame(f),f=0)}function m(){f===0&&(f=requestAnimationFrame(()=>{if(f=0,!window.visualViewport){F(window.innerHeight,0);return}F(window.visualViewport.height,window.visualViewport.offsetTop)}))}function se(){window.visualViewport&&(window.visualViewport.addEventListener("resize",m),window.visualViewport.addEventListener("scroll",m))}function _(){window.visualViewport&&(window.visualViewport.removeEventListener("resize",m),window.visualViewport.removeEventListener("scroll",m))}const ce=e.computed(()=>{if(!n.value)return{};const t=B.value>0?B.value:C.value||window.innerHeight,a=L.value,u=(C.value||window.innerHeight)-t-a,h=u>100?Math.max(0,u):0;return h<=0?{}:{paddingBottom:"".concat(h,"px")}}),de=Ae(p),ue=e.computed(()=>{var t;return(t=de.value.height)!=null?t:0});e.watch(ue,()=>{!n.value||!p.value||(S.value=p.value.clientHeight<p.value.scrollHeight)}),e.watch(n,()=>{n.value||(S.value=!1)});const pe=e.computed(()=>n.value?ce.value:ne.value),fe=e.computed(()=>o.open&&n.value);W.useScrollLock(fe);let q=!1;function V(){r("update:open",!1)}function me(t){n.value&&t.stopPropagation()}function ve(t){n.value&&(q=t.target===N.value)}function we(){!n.value||!q||V()}function y(t){t.key==="Escape"&&V()}function v(t){if(n.value)return;const a=He.unwrapElement(g.value);t.target!==document.documentElement&&l.value&&!l.value.contains(t.target)&&!(a!=null&&a.contains(t.target))&&V()}const I=e.ref(null);e.watch(g,()=>{I.value=g.value},{immediate:!0});const{focusTrapStart:ke,focusTrapEnd:ye,focusHolder:he,focusFirst:be,focusLast:ge,activateFocusTrap:R,deactivateFocusTrap:T}=W.useFocusTrap({containerRef:l,bodyRef:p,anchorRef:I,preventScroll:!0});function Be(){document.removeEventListener("keydown",y),document.removeEventListener("mousedown",v),document.removeEventListener("focusin",v),T()}async function Ce(){document.addEventListener("keydown",y),document.addEventListener("mousedown",v),document.addEventListener("focusin",v),await R()}function Ve(){var t,a,c,u,h;(t=l.value)==null||t.style.removeProperty("max-width"),(a=l.value)==null||a.style.removeProperty("max-height"),(c=l.value)==null||c.style.removeProperty("left"),(u=l.value)==null||u.style.removeProperty("top"),(h=l.value)==null||h.style.removeProperty("position")}async function Ee(){Ve(),document.addEventListener("keydown",y),m(),se(),await R()}function Se(){document.removeEventListener("keydown",y),_(),x(),le(),T()}function j(t){t?Se():Be()}async function A(t){t?(C.value=document.documentElement.clientHeight,await Ee()):await Ce()}return e.watch(()=>o.open,async t=>{if(t){await A(n.value);return}j(n.value)}),e.watch(n,async(t,a)=>{!o.open||t===a||(j(a),await A(t))}),e.onMounted(async()=>{o.open&&await A(n.value),n.value&&m(),await e.nextTick(),o.anchor===null&&console.warn('[CdxPopover]: The "anchor" prop must be provided to position the popover in floating mode.')}),e.onUnmounted(()=>{document.removeEventListener("keydown",y),document.removeEventListener("mousedown",v),document.removeEventListener("focusin",v),_(),x(),T()}),{computedTarget:M,translatedCloseButtonLabel:b,showHeader:i,showFooter:U,footerActionsClasses:K,close:V,cdxIconClose:D.r4,transitionName:k,backdropClassObject:X,panelClassObject:Y,panelInlineStyles:pe,backdrop:N,panel:l,arrowRef:P,arrowStyles:d,focusTrapStart:ke,focusTrapEnd:ye,focusHolder:he,bodyEl:p,focusFirst:be,focusLast:ge,isBottomSheet:n,onBackdropMouseDown:ve,onBackdropClick:we,onPanelClick:me}}}),$e=["role","aria-modal"],Fe={ref:"focusHolder",class:"cdx-popover-focus-trap",tabindex:"-1"},xe={key:0,class:"cdx-popover__header"},_e={key:1,class:"cdx-popover__header__title"},qe={class:"cdx-popover__header__button-wrapper"},Ie={key:1,class:"cdx-popover__footer"};function Re(o,r,s,n,H,M){const b=e.resolveComponent("cdx-icon"),k=e.resolveComponent("cdx-button");return e.openBlock(),e.createBlock(e.Teleport,{to:o.computedTarget,disabled:o.renderInPlace},[o.open?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"focusTrapStart",tabindex:"0",onFocus:r[0]||(r[0]=(...i)=>o.focusLast&&o.focusLast(...i))},null,544)):e.createCommentVNode("v-if",!0),e.createVNode(e.Transition,{name:o.transitionName,appear:""},{default:e.withCtx(()=>[o.open?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"backdrop",class:e.normalizeClass(["cdx-popover__backdrop",o.backdropClassObject]),onMousedown:r[4]||(r[4]=(...i)=>o.onBackdropMouseDown&&o.onBackdropMouseDown(...i)),onClick:r[5]||(r[5]=(...i)=>o.onBackdropClick&&o.onBackdropClick(...i))},[e.createElementVNode("div",e.mergeProps({ref:"panel",class:["cdx-popover",o.panelClassObject],style:o.panelInlineStyles,role:o.isBottomSheet?"dialog":void 0,"aria-modal":o.isBottomSheet?"true":void 0},o.$attrs,{onClick:r[3]||(r[3]=(...i)=>o.onPanelClick&&o.onPanelClick(...i))}),[e.createElementVNode("div",Fe,null,512),o.showHeader||o.$slots.header?(e.openBlock(),e.createElementBlock("header",xe,[e.renderSlot(o.$slots,"header",{},()=>[o.icon?(e.openBlock(),e.createBlock(b,{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",_e,e.toDisplayString(o.title),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",qe,[o.useCloseButton?(e.openBlock(),e.createBlock(k,{key:0,class:"cdx-popover__header__close-button",weight:"quiet",type:"button","aria-label":o.translatedCloseButtonLabel,onClick:o.close},{default:e.withCtx(()=>[e.createVNode(b,{icon:o.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("v-if",!0)])])])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",{ref:"bodyEl",class:e.normalizeClass(["cdx-popover__body",{"cdx-popover__body--no-footer":!o.showFooter&&!o.$slots.footer}])},[e.renderSlot(o.$slots,"default")],2),o.showFooter||o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",Ie,[e.renderSlot(o.$slots,"footer",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(["cdx-popover__footer__actions",o.footerActionsClasses])},[o.primaryAction?(e.openBlock(),e.createBlock(k,{key:0,class:"cdx-popover__footer__primary-action",weight:"primary",action:o.primaryAction.actionType,disabled:o.primaryAction.disabled,onClick:r[1]||(r[1]=i=>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(k,{key:1,class:"cdx-popover__footer__default-action",disabled:o.defaultAction.disabled,onClick:r[2]||(r[2]=i=>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),o.isBottomSheet?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("div",{key:2,ref:"arrowRef",class:"cdx-popover__arrow",style:e.normalizeStyle(o.arrowStyles)},null,4))],16,$e)],34)):e.createCommentVNode("v-if",!0)]),_:3},8,["name"]),o.open?(e.openBlock(),e.createElementBlock("div",{key:1,ref:"focusTrapEnd",tabindex:"0",onFocus:r[6]||(r[6]=(...i)=>o.focusFirst&&o.focusFirst(...i))},null,544)):e.createCommentVNode("v-if",!0)],8,["to","disabled"])}const je=Ne._export_sfc(Oe,[["render",Re]]);module.exports=je;