@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 4.32 kB
JavaScript
import{d as x,C as $,c as o,_ as k,a as m,o as t,f as c,w as b,k as d,e as v,g as u,b as _,n as D,h as B,b3 as I,r as y,I as w,t as T,G as L,K as S,aA as M,b4 as O,b2 as j,b5 as U,i as C,T as V}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";import{g as A}from"./useFloatingMenu-lGCYR9Tn.js";/* empty css */import{C as N}from"./Button-DrTkl5TI.js";const q=x({name:"CdxCard",components:{CdxIcon:$,CdxThumbnail:A},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}}}),P={class:"cdx-card__text"},R={class:"cdx-card__text__title"},z={key:0,class:"cdx-card__text__description"},E={key:1,class:"cdx-card__text__supporting-text"};function G(e,s,a,n,f,r){const i=m("cdx-thumbnail"),l=m("cdx-icon");return t(),c(B(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:b(()=>[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),v("span",P,[v("span",R,[u(e.$slots,"title")]),e.$slots.description?(t(),_("span",z,[u(e.$slots,"description")])):d("v-if",!0),e.$slots["supporting-text"]?(t(),_("span",E,[u(e.$slots,"supporting-text")])):d("v-if",!0)])]),_:3},8,["href","class"])}const ee=k(q,[["render",G]]),K={notice:M,error:O,warning:j,success:U},W=x({name:"CdxMessage",components:{CdxButton:N,CdxIcon:$},props:{type:{type:String,default:"notice",validator:I},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}},emits:["user-dismissed","auto-dismissed"],setup(e,{emit:s}){const a=y(!1),n=o(()=>e.inline===!1&&(e.dismissButtonLabel.length>0||e.allowUserDismiss)),f=w(T(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:K[e.type]),p=y("");function g(h){a.value||(p.value=h==="user-dismissed"?"cdx-message-leave-active-user":"cdx-message-leave-active-system",a.value=!0,s(h))}return L(()=>{e.type==="error"&&e.autoDismiss!==!1||r.value&&setTimeout(()=>g("auto-dismissed"),r.value)}),{dismissed:a,userDismissable:n,translatedDismissButtonLabel:f,rootClasses:i,leaveActiveClass:p,computedIcon:l,onDismiss:g,cdxIconClose:S}}}),F=["aria-live","role"],H={class:"cdx-message__content"};function J(e,s,a,n,f,r){const i=m("cdx-icon"),l=m("cdx-button");return t(),c(V,{name:"cdx-message",appear:e.fadeIn,"leave-active-class":e.leaveActiveClass},{default:b(()=>[e.dismissed?d("v-if",!0):(t(),_("div",{key:0,class:D(["cdx-message",e.rootClasses]),"aria-live":e.type!=="error"?"polite":void 0,role:e.type==="error"?"alert":void 0},[C(i,{class:"cdx-message__icon--vue",icon:e.computedIcon},null,8,["icon"]),v("div",H,[u(e.$slots,"default")]),e.userDismissable?(t(),c(l,{key:0,class:"cdx-message__dismiss-button",weight:"quiet",type:"button","aria-label":e.translatedDismissButtonLabel,onClick:s[0]||(s[0]=p=>e.onDismiss("user-dismissed"))},{default:b(()=>[C(i,{icon:e.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label"])):d("v-if",!0)],10,F))]),_:3},8,["appear","leave-active-class"])}const se=k(W,[["render",J]]);export{se as C,ee as a};