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

Codex Design System for Wikimedia

"use strict";const e=require("vue"),j=require("./floating-ui.vue.js"),z=require("./Icon.js"),Se=require("./CdxButton.cjs"),Le=require("./useI18nWithOverride.js"),Te=require("./useResizeObserver.cjs"),D=require("./useScrollLock.js"),Ae=require("./unwrapElement.js"),He=require("./constants.js"),V=require("./floating-ui.dom.js"),Me=require("./_plugin-vue_export-helper.js"),w={mobileMax:639,tabletMin:640,desktopMin:1120,desktopWideMin:1680};function Ne(){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 Pe=e.defineComponent({name:"CdxPopover",components:{CdxButton:Se,CdxIcon:z.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=Ne(),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=Le.useI18nWithOverride(e.toRef(o,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),k=e.computed(()=>n.value?"cdx-popover-bottom-sheet":"cdx-popover-floating"),a=e.computed(()=>!!o.title||!!o.icon||o.useCloseButton),W=e.computed(()=>!!o.primaryAction||!!o.defaultAction),E=e.ref(!1),U=e.computed(()=>({"cdx-popover__footer__actions--vertical":o.stackedActions})),K=e.computed(()=>({"cdx-popover__backdrop--bottom-sheet":n.value,"cdx-popover__backdrop--no-backdrop":n.value&&o.hideBackdrop})),X=e.computed(()=>({"cdx-popover--bottom-sheet":n.value,"cdx-popover--dividers":n.value&&E.value})),Y=e.toRef(o,"placement"),l=e.ref(),N=e.ref(),P=e.ref(),p=e.ref(),S=e.toRef(o,"anchor"),G=16,J=192,Q=200,Z=512,ee=Math.sqrt(16**2+16**2)/2+4,oe=e.computed(()=>n.value?[]:[V.offset(ee),V.flip(),V.size({padding:G,apply({availableWidth:t,availableHeight:i,elements:c}){const u=Math.min(Z,t);Object.assign(c.floating.style,{maxWidth:"".concat(Math.max(J,u),"px"),maxHeight:"".concat(Math.max(Q,i),"px")})}}),j.arrow({element:P})]),{floatingStyles:te,middlewareData:O,placement:ne,x:re,y:ie}=j.useFloating(S,l,{whileElementsMounted:V.autoUpdate,placement:Y,middleware:oe}),d=e.reactive({left:"0",top:"0",right:"0",bottom:"0",transform:"none"}),$=e.computed(()=>He.oppositeSides[ne.value]);e.watch([re,ie],()=>{if(n.value||!O.value.arrow)return;const{x:t,y:i}=O.value.arrow;d.left=t?"".concat(t,"px"):"",d.top=i?"".concat(i,"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 g=e.ref(0),L=e.ref(0),B=e.ref(0);function ae(){g.value=window.innerHeight,L.value=0,B.value=0}function x(t,i){g.value=t,L.value=i}let f=0;function F(){f!==0&&(cancelAnimationFrame(f),f=0)}function m(){f===0&&(f=requestAnimationFrame(()=>{if(f=0,!window.visualViewport){x(window.innerHeight,0);return}x(window.visualViewport.height,window.visualViewport.offsetTop)}))}function le(){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 se=e.computed(()=>{if(!n.value)return{};const t=g.value>0?g.value:B.value||window.innerHeight,i=L.value,u=(B.value||window.innerHeight)-t-i,h=u>100?Math.max(0,u):0;return h<=0?{}:{paddingBottom:"".concat(h,"px")}}),ce=Te(p),de=e.computed(()=>{var t;return(t=ce.value.height)!=null?t:0});e.watch(de,()=>{!n.value||!p.value||(E.value=p.value.clientHeight<p.value.scrollHeight)}),e.watch(n,()=>{n.value||(E.value=!1)});const ue=e.computed(()=>n.value?se.value:te.value),pe=e.computed(()=>o.open&&n.value);D.useScrollLock(pe);let q=!1;function C(){r("update:open",!1)}function fe(t){n.value&&t.stopPropagation()}function me(t){n.value&&(q=t.target===N.value)}function ve(){!n.value||!q||C()}function y(t){t.key==="Escape"&&C()}function v(t){if(n.value)return;const i=Ae.unwrapElement(S.value);t.target!==document.documentElement&&l.value&&!l.value.contains(t.target)&&!(i!=null&&i.contains(t.target))&&C()}const{focusTrapStart:we,focusTrapEnd:ke,focusHolder:ye,focusFirst:he,focusLast:be,activateFocusTrap:I,deactivateFocusTrap:T}=D.useFocusTrap({containerRef:l,bodyRef:p,anchorRef:S,preventScroll:!0});function ge(){document.removeEventListener("keydown",y),document.removeEventListener("mousedown",v),document.removeEventListener("focusin",v),T()}async function Be(){document.addEventListener("keydown",y),document.addEventListener("mousedown",v),document.addEventListener("focusin",v),await I()}function Ce(){var t,i,c,u,h;(t=l.value)==null||t.style.removeProperty("max-width"),(i=l.value)==null||i.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 Ve(){Ce(),document.addEventListener("keydown",y),m(),le(),await I()}function Ee(){document.removeEventListener("keydown",y),_(),F(),ae(),T()}function R(t){t?Ee():ge()}async function A(t){t?(B.value=document.documentElement.clientHeight,await Ve()):await Be()}return e.watch(()=>o.open,async t=>{if(t){await A(n.value);return}R(n.value)}),e.watch(n,async(t,i)=>{!o.open||t===i||(R(i),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),_(),F(),T()}),{computedTarget:M,translatedCloseButtonLabel:b,showHeader:a,showFooter:W,footerActionsClasses:U,close:C,cdxIconClose:z._3,transitionName:k,backdropClassObject:K,panelClassObject:X,panelInlineStyles:ue,backdrop:N,panel:l,arrowRef:P,arrowStyles:d,focusTrapStart:we,focusTrapEnd:ke,focusHolder:ye,bodyEl:p,focusFirst:he,focusLast:be,isBottomSheet:n,onBackdropMouseDown:me,onBackdropClick:ve,onPanelClick:fe}}}),Oe=["role","aria-modal"],$e={ref:"focusHolder",class:"cdx-popover-focus-trap",tabindex:"-1"},xe={key:0,class:"cdx-popover__header"},Fe={key:1,class:"cdx-popover__header__title"},_e={class:"cdx-popover__header__button-wrapper"},qe={key:1,class:"cdx-popover__footer"};function Ie(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]=(...a)=>o.focusLast&&o.focusLast(...a))},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]=(...a)=>o.onBackdropMouseDown&&o.onBackdropMouseDown(...a)),onClick:r[5]||(r[5]=(...a)=>o.onBackdropClick&&o.onBackdropClick(...a))},[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]=(...a)=>o.onPanelClick&&o.onPanelClick(...a))}),[e.createElementVNode("div",$e,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",Fe,e.toDisplayString(o.title),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",_e,[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",qe,[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]=a=>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]=a=>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,Oe)],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]=(...a)=>o.focusFirst&&o.focusFirst(...a))},null,544)):e.createCommentVNode("v-if",!0)],8,["to","disabled"])}const Re=Me._export_sfc(Pe,[["render",Ie]]);module.exports=Re;