@wikimedia/codex/dist/sandbox/assets/Message-D4PyBt8G.js

Codex Design System for Wikimedia

import{d as x,C as $,c as o,_ as B,a as f,f as c,o as t,w as u,g as d,e as g,b as y,h as m,n as D,i as L,ad as T,r as C,a0 as I,t as S,b5 as j,b3 as M,b6 as O,az as v,af as V,aW as q,j as k,q as A,s as N,T as U}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWG_HZgx.js";import{d as z}from"./useFloatingMenu-DS6iyMuY.js";import{C as P}from"./TypeaheadSearch.vue_vue_type_style_index_0_lang-guaG63gZ.js";const R=x({name:"CdxCard",components:{CdxIcon:$,CdxThumbnail:z},props:{url:{type:String,default:""},icon:{type:[String,Object],default:""},thumbnail:{type:[Object,null],default:null},forceThumbnail:{type:Boolean,default:!1},customPlaceholderIcon:{type:[String,Object],default:void 0}},setup(e){const s=o(()=>!!e.url),a=o(()=>s.value?"a":"span"),n=o(()=>s.value?e.url:void 0);return{isLink:s,contentTag:a,cardLink:n}}}),W={class:"cdx-card__text"},E={class:"cdx-card__text__title"},F={key:0,class:"cdx-card__text__description"},G={key:1,class:"cdx-card__text__supporting-text"};function H(e,s,a,n,p,r){const i=f("cdx-thumbnail"),l=f("cdx-icon");return t(),c(L(e.contentTag),{href:e.cardLink,class:D(["cdx-card",{"cdx-card--is-link":e.isLink,"cdx-card--title-only":!e.$slots.description&&!e.$slots["supporting-text"]}])},{default:u(()=>[e.thumbnail||e.forceThumbnail?(t(),c(i,{key:0,thumbnail:e.thumbnail,"placeholder-icon":e.customPlaceholderIcon,class:"cdx-card__thumbnail"},null,8,["thumbnail","placeholder-icon"])):e.icon?(t(),c(l,{key:1,icon:e.icon,class:"cdx-card__icon"},null,8,["icon"])):d("v-if",!0),g("span",W,[g("span",E,[m(e.$slots,"title")]),e.$slots.description?(t(),y("span",F,[m(e.$slots,"description")])):d("v-if",!0),e.$slots["supporting-text"]?(t(),y("span",G,[m(e.$slots,"supporting-text")])):d("v-if",!0)])]),_:3},8,["href","class"])}const te=B(R,[["render",H]]),J={subtle:v,notice:v,progressive:v,error:O,warning:M,success:j},K=x({name:"CdxMessage",components:{CdxButton:P,CdxIcon:$},props:{type:{type:String,default:"notice",validator:T},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,s)=>e.length>0&&!s.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:s}){const a=C(!1),n=o(()=>e.inline===!1&&(e.dismissButtonLabel.length>0||e.allowUserDismiss)),p=I(S(e,"dismissButtonLabel"),"cdx-message-dismiss-button-label","Close"),r=o(()=>e.autoDismiss===!1||e.type==="error"?!1:e.autoDismiss===!0?4e3:e.autoDismiss),i=o(()=>({"cdx-message--inline":e.inline,"cdx-message--block":!e.inline,"cdx-message--user-dismissable":n.value,["cdx-message--".concat(e.type)]:!0})),l=o(()=>e.icon&&e.type==="notice"?e.icon:J[e.type]),b=C("");function _(h){a.value||(b.value=h==="user-dismissed"?"cdx-message-leave-active-user":"cdx-message-leave-active-system",a.value=!0,s(h))}function w(){s("action-button-click")}return V(()=>{e.type==="error"&&e.autoDismiss!==!1||r.value&&setTimeout(()=>_("auto-dismissed"),r.value)}),{dismissed:a,userDismissable:n,translatedDismissButtonLabel:p,rootClasses:i,leaveActiveClass:b,computedIcon:l,onDismiss:_,onActionButtonClick:w,cdxIconClose:q}}}),Q=["aria-live","role"],X={class:"cdx-message__content"};function Y(e,s,a,n,p,r){const i=f("cdx-icon"),l=f("cdx-button");return t(),c(U,{name:"cdx-message",appear:e.fadeIn,"leave-active-class":e.leaveActiveClass},{default:u(()=>[e.dismissed?d("v-if",!0):(t(),y("div",{key:0,class:D(["cdx-message",e.rootClasses]),"aria-live":e.type!=="error"?"polite":void 0,role:e.type==="error"?"alert":void 0},[k(i,{class:"cdx-message__icon--vue",icon:e.computedIcon},null,8,["icon"]),g("div",X,[m(e.$slots,"default")]),e.actionButtonLabel?(t(),c(l,{key:0,class:"cdx-message__action-button",weight:"quiet",type:"button",size:"small",onClick:e.onActionButtonClick},{default:u(()=>[A(N(e.actionButtonLabel),1)]),_:1},8,["onClick"])):d("v-if",!0),e.userDismissable?(t(),c(l,{key:1,class:"cdx-message__dismiss-button",weight:"quiet",type:"button","aria-label":e.translatedDismissButtonLabel,onClick:s[0]||(s[0]=b=>e.onDismiss("user-dismissed"))},{default:u(()=>[k(i,{icon:e.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label"])):d("v-if",!0)],10,Q))]),_:3},8,["appear","leave-active-class"])}const ae=B(K,[["render",Y]]);export{ae as C,te as a};