UNPKG

@wikimedia/codex

Version:

Codex Design System for Wikimedia

2 lines (1 loc) 2.73 kB
import{d as f,b2 as C,f as T,w as g,aS as R,o as t,p,e as l,b as u,m as d,F as c,q as L,k as x,i as b,an as V,C as k,n as y,aT as I}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWepejvL.js";/* empty css */const $={id:"cdx-icon"},N={class:"cdx-demo-icon-table"},_=["lang"],z=["dir"],A=f({__name:"IconGrid",setup(B){var h;const m=["ltr","rtl"],S=[{},{size:"medium",color:"red"},{size:"small"},{size:"x-small",color:"blue"}],i=[];for(const a in C){const n=C[a];if(typeof n=="function")continue;const e=a.replace(/^cdxIcon/,"").replace(/[A-Z]/g,o=>"-".concat(o.toLowerCase())).replace(/^-/,"");if(typeof n!="string"&&("langCodeMap"in n||"shouldFlipExceptions"in n)){const o="langCodeMap"in n?Object.keys(n.langCodeMap):(h=n.shouldFlipExceptions)!=null?h:[];for(const s of o)i.push({iconName:a,cssIconName:e,icon:n,langCode:s,langLabel:s});i.push({iconName:a,cssIconName:e,icon:n,langLabel:"other"})}else i.push({iconName:a,cssIconName:e,icon:n})}return(a,n)=>(t(),T(R,{class:"cdx-icon-grid"},{header:g(()=>n[0]||(n[0]=[p(" Codex Icon Grid ")])),content:g(()=>[l("section",$,[n[4]||(n[4]=l("h2",null,"Icon",-1)),l("table",N,[n[2]||(n[2]=l("caption",null,"All icons",-1)),n[3]||(n[3]=l("thead",null,[l("tr",null,[l("th",null,"Icon name (language)"),l("th",{colspan:"4"}," Default size, default color "),l("th",{colspan:"4"}," Medium size, red color "),l("th",{colspan:"4"}," Small size, default color "),l("th",{colspan:"4"}," Extra small size, blue color ")])],-1)),l("tbody",null,[n[1]||(n[1]=l("tr",null,[l("th",{"aria-hidden":"true"}),l("th",null,"Vue LTR"),l("th",null,"Vue RTL"),l("th",null,"CSS-only LTR"),l("th",null,"CSS-only RTL"),l("th",null,"Vue LTR"),l("th",null,"Vue RTL"),l("th",null,"CSS-only LTR"),l("th",null,"CSS-only RTL"),l("th",null,"Vue LTR"),l("th",null,"Vue RTL"),l("th",null,"CSS-only LTR"),l("th",null,"CSS-only RTL"),l("th",null,"Vue LTR"),l("th",null,"Vue RTL"),l("th",null,"CSS-only LTR"),l("th",null,"CSS-only RTL")],-1)),(t(),u(c,null,d(i,e=>l("tr",{key:e.iconName},[l("th",null,[p(L(e.iconName)+" ",1),e.langLabel?(t(),u(c,{key:0},[p(" ("+L(e.langLabel)+") ",1)],64)):x("v-if",!0)]),(t(),u(c,null,d(S,({size:o,color:s})=>(t(),u(c,{key:"".concat(o,"-").concat(s)},[(t(),u(c,null,d(m,r=>l("td",{key:r},[b(V(k),{class:y({["cdx-demo-icon-vue-icon--color-".concat(s)]:!!s}),icon:e.icon,lang:e.langCode,dir:r,size:o},null,8,["class","icon","lang","dir","size"])])),64)),(t(),u(c,null,d(m,r=>l("td",{key:r,lang:e.langCode},[l("span",{class:y("cdx-demo-icon-css-icon--".concat(e.cssIconName).concat(o?"--size-".concat(o):"").concat(s?"--color-".concat(s):"")),dir:r},null,10,z)],8,_)),64))],64))),64))])),64))])])])]),_:1}))}});I(A).mount("#app");