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