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

Codex Design System for Wikimedia

"use strict";const e=require("vue"),z=require("./CdxButton.cjs"),k=require("./Icon.js"),P=require("./useI18nWithOverride.js"),K=require("./useResizeObserver.cjs"),B=require("./useScrollLock.js"),W=require("./_plugin-vue_export-helper.js"),p=e.defineComponent({name:"CdxDialog",components:{CdxButton:z,CdxIcon:k.CdxIcon},inheritAttrs:!1,props:{open:{type:Boolean,default:!1},title:{type:String,required:!0},subtitle:{type:String,required:!1,default:null},hideTitle:{type:Boolean,default:!1},useCloseButton:{type:Boolean,default:!1},closeButtonLabel:{type:String,default:"",validator:(o,t)=>o.length>0&&!t.useCloseButton?(console.warn("[CdxDialog]: The boolean `useCloseButton` prop is required to show the close button.\n\nRefer to https://doc.wikimedia.org/codex/latest/components/demos/dialog.html#props."),!1):!0},primaryAction:{type:Object,default:null},defaultAction:{type:Object,default:null},stackedActions:{type:Boolean,default:!1},fixedHeight:{type:[Boolean,Number],default:!1,validator:o=>typeof o=="boolean"||typeof o=="number"&&o>0},target:{type:String,default:null},renderInPlace:{type:Boolean,default:!1}},emits:["update:open","primary","default"],setup(o,{emit:t}){const m=e.useId(),d=e.ref(),c=e.ref(),i=e.ref(),s=e.ref(),r=e.computed(()=>o.useCloseButton||o.closeButtonLabel.length>0),n=P.useI18nWithOverride(e.toRef(o,"closeButtonLabel"),"cdx-dialog-close-button-label","Close"),A=e.computed(()=>!!o.primaryAction||!!o.defaultAction),w=K(i),N=e.computed(()=>{var l;return(l=w.value.height)!=null?l:0}),g=e.ref(!1),V=e.computed(()=>({"cdx-dialog--vertical-actions":o.stackedActions,"cdx-dialog--dividers":g.value,"cdx-dialog--fixed-height":o.fixedHeight!==!1,"cdx-dialog--fixed-height-custom":typeof o.fixedHeight=="number"})),E=e.computed(()=>typeof o.fixedHeight=="number"?"".concat(o.fixedHeight/16,"rem"):""),_=e.inject("CdxTeleportTarget",void 0),$=e.computed(()=>{var l,a;return(a=(l=o.target)!=null?l:e.unref(_))!=null?a:"body"});e.provide("CdxTeleportTarget",s);const S=e.computed(()=>o.open);B.useScrollLock(S);function b(){t("update:open",!1)}let h=!1;function D(l){h=l.target===d.value}function H(){h&&b()}const{focusTrapStart:I,focusTrapEnd:x,focusHolder:F,focusFirst:L,focusLast:q,activateFocusTrap:O,deactivateFocusTrap:R}=B.useFocusTrap({containerRef:c,bodyRef:i,preventScroll:!0});let u=[],f=[];function M(){let l=d.value;for(;l.parentElement&&l.nodeName!=="BODY";){for(const a of Array.from(l.parentElement.children))a===l||a.nodeName==="SCRIPT"||(a.hasAttribute("aria-hidden")||(a.setAttribute("aria-hidden","true"),u.push(a)),a.hasAttribute("inert")||(a.setAttribute("inert",""),f.push(a)));l=l.parentElement}}function j(){for(const l of u)l.removeAttribute("aria-hidden");for(const l of f)l.removeAttribute("inert");u=[],f=[]}async function y(){await e.nextTick(),M(),await O()}function C(){j(),R()}return e.onMounted(async()=>{o.open&&await y()}),e.onUnmounted(()=>{o.open&&C()}),e.watch(e.toRef(o,"open"),async l=>{l?await y():C()}),e.watch(N,()=>{i.value&&(g.value=i.value.clientHeight<i.value.scrollHeight)}),{close:b,onBackdropClick:H,onBackdropMouseDown:D,cdxIconClose:k.r4,labelId:m,rootClasses:V,backdrop:d,dialogElement:c,focusTrapStart:I,focusTrapEnd:x,innerTeleportTarget:s,focusFirst:L,focusLast:q,dialogBody:i,focusHolder:F,showFooterActions:A,useCloseButtonOrLabel:r,translatedCloseButtonLabel:n,computedTarget:$,fixedHeightRem:E}}}),v=()=>{e.useCssVars(o=>({"17e0a1f0":o.fixedHeightRem}))},T=p.setup;p.setup=T?(o,t)=>(v(),T(o,t)):v;const U=["aria-label","aria-labelledby"],Y={key:0,class:"cdx-dialog__header__title-group"},G=["id"],J={key:0,class:"cdx-dialog__header__subtitle"},Q={ref:"focusHolder",class:"cdx-dialog-focus-trap",tabindex:"-1"},X={key:0,class:"cdx-dialog__footer__text"},Z={key:1,class:"cdx-dialog__footer__actions"},ee={ref:"innerTeleportTarget"};function oe(o,t,m,d,c,i){const s=e.resolveComponent("cdx-icon"),r=e.resolveComponent("cdx-button");return e.openBlock(),e.createBlock(e.Teleport,{to:o.computedTarget,disabled:o.renderInPlace},[e.createVNode(e.Transition,{name:"cdx-dialog-fade",appear:""},{default:e.withCtx(()=>[o.open?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"backdrop",class:"cdx-dialog-backdrop",onMousedown:t[5]||(t[5]=(...n)=>o.onBackdropMouseDown&&o.onBackdropMouseDown(...n)),onClick:t[6]||(t[6]=(...n)=>o.onBackdropClick&&o.onBackdropClick(...n)),onKeyup:t[7]||(t[7]=e.withKeys((...n)=>o.close&&o.close(...n),["escape"]))},[e.createElementVNode("div",{ref:"focusTrapStart",tabindex:"0",onFocus:t[0]||(t[0]=(...n)=>o.focusLast&&o.focusLast(...n))},null,544),e.createElementVNode("div",e.mergeProps({ref:"dialogElement",class:["cdx-dialog",o.rootClasses],role:"dialog"},o.$attrs,{"aria-label":o.$slots.header||o.hideTitle?o.title:void 0,"aria-labelledby":!o.$slots.header&&!o.hideTitle?o.labelId:void 0,"aria-modal":"true",onClick:t[3]||(t[3]=e.withModifiers(()=>{},["stop"]))}),[e.createElementVNode("header",{class:e.normalizeClass(["cdx-dialog__header",{"cdx-dialog__header--default":!o.$slots.header,"cdx-dialog__header--no-close-button":!o.useCloseButtonOrLabel}])},[e.renderSlot(o.$slots,"header",{},()=>[o.hideTitle?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("h2",{id:o.labelId,class:"cdx-dialog__header__title"},e.toDisplayString(o.title),9,G),o.subtitle?(e.openBlock(),e.createElementBlock("p",J,e.toDisplayString(o.subtitle),1)):e.createCommentVNode("v-if",!0)])),e.createVNode(r,{class:"cdx-dialog__header__close-button",weight:"quiet",type:"button","aria-label":o.translatedCloseButtonLabel,onClick:o.close},{default:e.withCtx(()=>[e.createVNode(s,{icon:o.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])])],2),e.createElementVNode("div",Q,null,512),e.createElementVNode("div",{ref:"dialogBody",class:e.normalizeClass(["cdx-dialog__body cdx-scrollable-container",{"cdx-dialog__body--no-footer":!(o.showFooterActions||o.$slots.footer||o.$slots["footer-text"])}])},[e.renderSlot(o.$slots,"default")],2),o.showFooterActions||o.$slots.footer||o.$slots["footer-text"]?(e.openBlock(),e.createElementBlock("footer",{key:0,class:e.normalizeClass(["cdx-dialog__footer",{"cdx-dialog__footer--default":!o.$slots.footer}])},[e.renderSlot(o.$slots,"footer",{},()=>[o.$slots["footer-text"]?(e.openBlock(),e.createElementBlock("p",X,[e.renderSlot(o.$slots,"footer-text")])):e.createCommentVNode("v-if",!0),o.showFooterActions?(e.openBlock(),e.createElementBlock("div",Z,[o.primaryAction?(e.openBlock(),e.createBlock(r,{key:0,class:"cdx-dialog__footer__primary-action",weight:"primary",action:o.primaryAction.actionType,disabled:o.primaryAction.disabled,onClick:t[1]||(t[1]=n=>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(r,{key:1,class:"cdx-dialog__footer__default-action",disabled:o.defaultAction.disabled,onClick:t[2]||(t[2]=n=>o.$emit("default"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.defaultAction.label),1)]),_:1},8,["disabled"])):e.createCommentVNode("v-if",!0)])):e.createCommentVNode("v-if",!0)])],2)):e.createCommentVNode("v-if",!0)],16,U),e.createElementVNode("div",{ref:"focusTrapEnd",tabindex:"0",onFocus:t[4]||(t[4]=(...n)=>o.focusFirst&&o.focusFirst(...n))},null,544),e.createElementVNode("div",ee,null,512)],544)):e.createCommentVNode("v-if",!0)]),_:3})],8,["to","disabled"])}const te=W._export_sfc(p,[["render",oe]]);module.exports=te;