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

Codex Design System for Wikimedia

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