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

Codex Design System for Wikimedia

"use strict";var m=(o,n,s)=>new Promise((u,c)=>{var i=l=>{try{r(s.next(l))}catch(d){c(d)}},f=l=>{try{r(s.throw(l))}catch(d){c(d)}},r=l=>l.done?u(l.value):Promise.resolve(l.value).then(i,f);r((s=s.apply(o,n)).next())});const e=require("vue"),x=require("./CdxButton.cjs"),$=require("./Icon.js"),z=require("./useI18nWithOverride.js"),R=require("./useResizeObserver.cjs"),W=require("./_plugin-vue_export-helper.js"),j=e.defineComponent({name:"CdxDialog",components:{CdxButton:x,CdxIcon:$.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,n)=>o.length>0&&!n.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},target:{type:String,default:null},renderInPlace:{type:Boolean,default:!1}},emits:["update:open","primary","default"],setup(o,{emit:n}){const s=e.useId(),u=e.ref(),c=e.ref(),i=e.ref(),f=e.ref(),r=e.ref(),l=e.ref();let d=null;const h=e.computed(()=>o.useCloseButton||o.closeButtonLabel.length>0),T=z.useI18nWithOverride(e.toRef(o,"closeButtonLabel"),"cdx-dialog-close-button-label","Close"),N=e.computed(()=>!o.hideTitle||h.value),V=e.computed(()=>!!o.primaryAction||!!o.defaultAction),I=R(i),S=e.computed(()=>{var t;return(t=I.value.height)!=null?t:0}),v=e.ref(!1),D=e.computed(()=>({"cdx-dialog--vertical-actions":o.stackedActions,"cdx-dialog--horizontal-actions":!o.stackedActions,"cdx-dialog--dividers":v.value})),H=e.inject("CdxTeleportTarget",void 0),L=e.computed(()=>{var t,a;return(a=(t=o.target)!=null?t:H)!=null?a:"body"}),k=e.ref(0);function C(){n("update:open",!1)}let B=!1;function F(t){B=t.target===u.value}function q(){B&&C()}function O(){p(c.value)}function M(){p(c.value,!0)}function p(t,a=!1){let y=Array.from(t.querySelectorAll('\n					input, select, textarea, button, object, a, area,\n					[contenteditable], [tabindex]:not([tabindex^="-"])\n				'));a&&(y=y.reverse());for(const E of y)if(E.focus(),document.activeElement===E)return!0;return!1}let b=[],g=[];function _(){let t=u.value;for(;t.parentElement&&t.nodeName!=="BODY";){for(const a of Array.from(t.parentElement.children))a===t||a.nodeName==="SCRIPT"||(a.hasAttribute("aria-hidden")||(a.setAttribute("aria-hidden","true"),b.push(a)),a.hasAttribute("inert")||(a.setAttribute("inert",""),g.push(a)));t=t.parentElement}}function P(){for(const t of b)t.removeAttribute("aria-hidden");for(const t of g)t.removeAttribute("inert");b=[],g=[]}function w(){return m(this,null,function*(){var t;yield e.nextTick(),k.value=window.innerWidth-document.documentElement.clientWidth,document.documentElement.style.setProperty("margin-right","".concat(k.value,"px")),document.body.classList.add("cdx-dialog-open"),_(),d=document.activeElement,p(i.value)||(t=f.value)==null||t.focus()})}function A(){document.body.classList.remove("cdx-dialog-open"),document.documentElement.style.removeProperty("margin-right"),P(),d instanceof HTMLElement&&document.contains(d)&&(d.focus(),d=null)}return e.onMounted(()=>m(this,null,function*(){o.open&&(yield w())})),e.onUnmounted(()=>{o.open&&A()}),e.watch(e.toRef(o,"open"),t=>m(this,null,function*(){t?yield w():A()})),e.watch(S,()=>{i.value&&(v.value=i.value.clientHeight<i.value.scrollHeight)}),{close:C,onBackdropClick:q,onBackdropMouseDown:F,cdxIconClose:$.l4,labelId:s,rootClasses:D,backdrop:u,dialogElement:c,focusTrapStart:r,focusTrapEnd:l,focusFirst:O,focusLast:M,dialogBody:i,focusHolder:f,showHeader:N,showFooterActions:V,useCloseButtonOrLabel:h,translatedCloseButtonLabel:T,computedTarget:L}}}),K=["aria-label","aria-labelledby"],U={key:0,class:"cdx-dialog__header__title-group"},Y=["id"],G={key:0,class:"cdx-dialog__header__subtitle"},J={ref:"focusHolder",class:"cdx-dialog-focus-trap",tabindex:"-1"},Q={key:0,class:"cdx-dialog__footer__text"},X={key:1,class:"cdx-dialog__footer__actions"};function Z(o,n,s,u,c,i){const f=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:n[5]||(n[5]=(...l)=>o.onBackdropMouseDown&&o.onBackdropMouseDown(...l)),onClick:n[6]||(n[6]=(...l)=>o.onBackdropClick&&o.onBackdropClick(...l)),onKeyup:n[7]||(n[7]=e.withKeys((...l)=>o.close&&o.close(...l),["escape"]))},[e.createElementVNode("div",{ref:"focusTrapStart",tabindex:"0",onFocus:n[0]||(n[0]=(...l)=>o.focusLast&&o.focusLast(...l))},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:n[3]||(n[3]=e.withModifiers(()=>{},["stop"]))}),[o.showHeader||o.$slots.header?(e.openBlock(),e.createElementBlock("header",{key:0,class:e.normalizeClass(["cdx-dialog__header",{"cdx-dialog__header--default":!o.$slots.header}])},[e.renderSlot(o.$slots,"header",{},()=>[o.hideTitle?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("h2",{id:o.labelId,class:"cdx-dialog__header__title"},e.toDisplayString(o.title),9,Y),o.subtitle?(e.openBlock(),e.createElementBlock("p",G,e.toDisplayString(o.subtitle),1)):e.createCommentVNode("v-if",!0)])),o.useCloseButtonOrLabel?(e.openBlock(),e.createBlock(r,{key:1,class:"cdx-dialog__header__close-button",weight:"quiet",type:"button","aria-label":o.translatedCloseButtonLabel,onClick:o.close},{default:e.withCtx(()=>[e.createVNode(f,{icon:o.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("v-if",!0)])],2)):e.createCommentVNode("v-if",!0),e.createElementVNode("div",J,null,512),e.createElementVNode("div",{ref:"dialogBody",class:e.normalizeClass(["cdx-dialog__body",{"cdx-dialog__body--no-header":!(o.showHeader||o.$slots.header),"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:1,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",Q,[e.renderSlot(o.$slots,"footer-text")])):e.createCommentVNode("v-if",!0),o.showFooterActions?(e.openBlock(),e.createElementBlock("div",X,[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:n[1]||(n[1]=l=>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:n[2]||(n[2]=l=>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,K),e.createElementVNode("div",{ref:"focusTrapEnd",tabindex:"0",onFocus:n[4]||(n[4]=(...l)=>o.focusFirst&&o.focusFirst(...l))},null,544)],544)):e.createCommentVNode("v-if",!0)]),_:3})],8,["to","disabled"])}const ee=W._export_sfc(j,[["render",Z]]);module.exports=ee;