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

Codex Design System for Wikimedia

"use strict";const s=require("vue"),t=require("./Icon.js"),v=require("./CdxButton.cjs"),p=require("./constants.js"),g=require("./useI18nWithOverride.js"),b=require("./_plugin-vue_export-helper.js"),C={subtle:t.r6,notice:t.r6,progressive:t.r6,error:t.y4,warning:t.F3,success:t.v8},y=s.defineComponent({name:"CdxMessage",components:{CdxButton:v,CdxIcon:t.CdxIcon},props:{type:{type:String,default:"notice",validator:p.statusTypeValidator},inline:{type:Boolean,default:!1},icon:{type:[String,Object],default:null},fadeIn:{type:Boolean,default:!1},allowUserDismiss:{type:Boolean,default:!1},dismissButtonLabel:{type:String,default:"",validator:(e,o)=>e.length>0&&!o.allowUserDismiss?(console.warn("[CdxMessage]: The boolean `allowUserDismiss` prop is required to show the dismiss button.\n\nRefer to https://doc.wikimedia.org/codex/latest/components/demos/message.html#props."),!1):!0},autoDismiss:{type:[Boolean,Number],default:!1,validator:e=>typeof e=="boolean"||typeof e=="number"&&e>0},actionButtonLabel:{type:String,default:""}},emits:["user-dismissed","auto-dismissed","action-button-click"],setup(e,{emit:o}){const i=s.ref(!1),l=s.computed(()=>e.inline===!1&&(e.dismissButtonLabel.length>0||e.allowUserDismiss)),u=g.useI18nWithOverride(s.toRef(e,"dismissButtonLabel"),"cdx-message-dismiss-button-label","Close"),r=s.computed(()=>e.autoDismiss===!1||e.type==="error"?!1:e.autoDismiss===!0?4e3:e.autoDismiss),n=s.computed(()=>({"cdx-message--inline":e.inline,"cdx-message--block":!e.inline,"cdx-message--user-dismissable":l.value,["cdx-message--".concat(e.type)]:!0})),a=s.computed(()=>e.icon&&e.type==="notice"?e.icon:C[e.type]),c=s.ref("");function d(m){i.value||(c.value=m==="user-dismissed"?"cdx-message-leave-active-user":"cdx-message-leave-active-system",i.value=!0,o(m))}function f(){o("action-button-click")}return s.onMounted(()=>{e.type==="error"&&e.autoDismiss!==!1?s.warn('CdxMessage: Message with type="error" cannot use auto-dismiss'):r.value&&setTimeout(()=>d("auto-dismissed"),r.value)}),{dismissed:i,userDismissable:l,translatedDismissButtonLabel:u,rootClasses:n,leaveActiveClass:c,computedIcon:a,onDismiss:d,onActionButtonClick:f,cdxIconClose:t.r4}}}),B=["aria-live","role"],x={class:"cdx-message__content"};function k(e,o,i,l,u,r){const n=s.resolveComponent("cdx-icon"),a=s.resolveComponent("cdx-button");return s.openBlock(),s.createBlock(s.Transition,{name:"cdx-message",appear:e.fadeIn,"leave-active-class":e.leaveActiveClass},{default:s.withCtx(()=>[e.dismissed?s.createCommentVNode("v-if",!0):(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(["cdx-message",e.rootClasses]),"aria-live":e.type!=="error"?"polite":void 0,role:e.type==="error"?"alert":void 0},[s.createVNode(n,{class:"cdx-message__icon--vue",icon:e.computedIcon},null,8,["icon"]),s.createElementVNode("div",x,[s.renderSlot(e.$slots,"default")]),e.actionButtonLabel?(s.openBlock(),s.createBlock(a,{key:0,class:"cdx-message__action-button",weight:"quiet",type:"button",size:"small",onClick:e.onActionButtonClick},{default:s.withCtx(()=>[s.createTextVNode(s.toDisplayString(e.actionButtonLabel),1)]),_:1},8,["onClick"])):s.createCommentVNode("v-if",!0),e.userDismissable?(s.openBlock(),s.createBlock(a,{key:1,class:"cdx-message__dismiss-button",weight:"quiet",type:"button","aria-label":e.translatedDismissButtonLabel,onClick:o[0]||(o[0]=c=>e.onDismiss("user-dismissed"))},{default:s.withCtx(()=>[s.createVNode(n,{icon:e.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label"])):s.createCommentVNode("v-if",!0)],10,B))]),_:3},8,["appear","leave-active-class"])}const h=b._export_sfc(y,[["render",k]]);module.exports=h;