@wikimedia/codex/dist/sandbox/assets/table-C2i5dIeH.js

Codex Design System for Wikimedia

import{d as ie,r as b,c as ue,f as de,o as v,w as o,e,n as ce,j as n,L as a,aJ as be,q as m,C as L,aq as J,s as p,b as y,F as U,p as M,g as me,ap as pe,b0 as ge,b1 as we,b2 as _e,au as ve,aP as fe,b3 as w,aQ as xe}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CZ7OyK4g.js";import{C as G}from"./Button-BmO8KPcu.js";/* empty css                                                        */import{b as u,C as ye}from"./Table-BhmCnadb.js";import{C as $,a as Te}from"./MenuButton-BeH3OYvM.js";import"./useFloatingMenu-B_pwSjl7.js";import"./floating-ui.dom-CMj0Z5yx.js";import"./Tooltip-DrefmCK_.js";const he={class:"cdx-demo-table-page__header-footer__buttons"},Se=["href"],Ce=["rowspan"],Ae={class:"cdx-table__table__cell--align-number"},ke={class:"cdx-table__table__cell--align-number"},r="123.45.6.789",i="Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]",De=ie({__name:"TableDemoPage",setup(Ie){const h=b(!0),z=ue(()=>({"cdx-demo-table-page--restrict-width":h.value})),g=[{id:"col1",label:"Column 1"},{id:"col2",label:"Column 2",textAlign:"number"},{id:"col3",label:"Column 3"}],f=[{col1:"One",col2:1,col3:"Uno"},{col1:"Two",col2:2,col3:"Dos"},{col1:"Three",col2:3,col3:"Tres"},{col1:"Four",col2:4,col3:"Cuatro"}],j=[{col2:1,col1:"One",col3:"Uno"},{col2:2,col3:"Dos",col1:"Two"},{col1:"Three",col3:"Cuatro",col2:3},{col3:"Cuatro",col1:"Four",col2:4}],Z=[{id:"id",label:"ID",textAlign:"number",width:"30%"},{id:"name",label:"Name",width:"70%"}],q=[{id:"1234",name:"Toast",species:"cat",coat:"tortoiseshell"},{id:"5678",species:"dog",breed:"Shiba Inu",name:"Laszlo"}],O=[{id:"user",label:"User"},{id:"ip",label:"IP(s)"},{id:"userAgent",label:"User Agent(s)",minWidth:"300px"}],s=["Abc","Twoword Username","Shortish","123.45.6.789","Donau­dampf­schiffahrts­elektrizitäten­haupt­betriebs­werk­bau­unter­beamten­gesellschaft","PascalCase"],H=[{user:s[0],ip:r,userAgent:i},{user:s[1],ip:r,userAgent:i},{user:s[2],ip:r,userAgent:i},{user:s[3],ip:r,userAgent:i},{user:s[4],ip:r,userAgent:i},{user:s[5],ip:r,userAgent:i}],K=O.concat([{id:"user2",label:"User 2"},{id:"ip2",label:"IP(s) 2"},{id:"userAgent2",label:"User Agent(s) 2",minWidth:"300px"}]),Q=[{user:s[0],ip:r,userAgent:i,user2:s[0],ip2:r,userAgent2:i},{user:s[1],ip:r,userAgent:i,user2:s[1],ip2:r,userAgent2:i},{user:s[2],ip:r,userAgent:i,user2:s[2],ip2:r,userAgent2:i},{user:s[3],ip:r,userAgent:i,user2:s[3],ip2:r,userAgent2:i},{user:s[4],ip:r,userAgent:i,user2:s[4],ip2:r,userAgent2:i},{user:s[5],ip:r,userAgent:i,user2:s[5],ip2:r,userAgent2:i}],Y=[{id:"name",label:"Name"},{id:"status",label:"Status"},{id:"language",label:"Language"},{id:"action",label:"Action"}],X=[{name:{label:"JavaScript modulo 2",url:"https://www.wikifunctions.org/view/en/Z12483"},status:"Connected",language:"javascript"},{name:{label:"Composite modulo 2",url:"https://www.wikifunctions.org/view/en/Z12486"},status:"Connected",language:"Composition"},{name:{label:"number is even, python",url:"https://www.wikifunctions.org/view/en/Z12694"},status:"Disconnected",language:"python"}];function ee(d){switch(d){case"Connected":return"success";case"Disconnected":return"warning";default:return"notice"}}const W=b(null),te=[{label:"One",value:"1"},{label:"Two",value:"2"},{label:"Three",value:"3"},{label:"Four",value:"4"},{label:"Five",value:"5"},{label:"Six",value:"6"}],le=[{id:"item",label:"Item"},{id:"cost",label:"Cost",textAlign:"number"}],ae=[{item:"Housing",cost:"$1,500"},{item:"Groceries",cost:"$500"},{item:"Utilities",cost:"$200"}],ne={firstDoctor:[{season:"Season 1",doctor:"First Doctor",episodes:42,airStart:"23 November 1963",airEnd:"12 September 1964",viewers:8.08},{season:"Season 2",episodes:39,airStart:"31 October 1964",airEnd:"24 July 1965",viewers:10.46},{season:"Season 3",episodes:45,airStart:"11 September 1965",airEnd:"16 July 1966",viewers:7.65}],secondDoctor:[{season:"Season 4",doctor:"Second Doctor",episodes:43,airStart:"10 September 1966",airEnd:"1 July 1967",viewers:7.1},{season:"Season 5",episodes:40,airStart:"2 September 1967",airEnd:"1 June 1968",viewers:7.23},{season:"Season 6",episodes:45,airStart:"10 August 1968",airEnd:"21 June 1969",viewers:6.38}]},S=b([]),B=[{id:"year",label:"Year",textAlign:"number",allowSort:!0},{id:"name",label:"Last name with a long column heading",allowSort:!0},{id:"pronoun",label:"Pronoun"},{id:"age",label:"Age at win",textAlign:"end",allowSort:!0}],N=b([{year:2023,name:"Goldin",age:77,pronoun:"unknown"},{year:2022,name:"Bernanke",age:69,pronoun:"unknown"},{year:2022,name:"Diamond",age:69,pronoun:"unknown"},{year:2022,name:"Dybvig",age:67,pronoun:"unknown"},{year:2021,name:"Card",age:65,pronoun:"unknown"},{year:2021,name:"Angrist",age:61,pronoun:"unknown"},{year:2021,name:"Imbens",age:58,pronoun:"unknown"}]),C=b({year:"asc"}),E=b([]),F=b([{[w]:"goldin",year:2023,name:"Goldin",age:77},{[w]:"bernanke",year:2022,name:"Bernanke",age:69},{[w]:"diamond",year:2022,name:"Diamond",age:69},{[w]:"dybvig",year:2022,name:"Dybvig",age:67},{[w]:"card",year:2021,name:"Card",age:65},{[w]:"angrist",year:2021,name:"Angrist",age:61},{[w]:"imbens",year:2021,name:"Imbens",age:58}]),A=b({year:"asc"});function P(d,t){t==="singleSort"&&V(d,C,N),t==="withSelection"&&V(d,A,F)}function V(d,t,l){const x=Object.keys(d)[0];function c(_,D){return l.value.sort((T,I)=>D==="asc"?I[_]-T[_]:T[_]-I[_])}function k(_){return l.value.sort((D,T)=>(_==="asc"?1:-1)*D.name.localeCompare(T.name))}if(d[x]==="none"){l.value=c("year","asc"),t.value[x]="none";return}switch(x){case"year":l.value=c("year",d.year);return;case"name":l.value=k(d.name);return;case"age":l.value=c("age",d.age);return;default:return}}const oe=[{id:"name",label:"Name"},{id:"team",label:"Team"},{id:"type",label:"Type"},{id:"startDate",label:"Start Date"},{id:"progress",label:"Progress"},{id:"status",label:"Status"},{id:"actions",label:"Actions"}],se=[{name:"test Web Scroll UI",team:"Web Team",type:"baseline",startDate:"2024-08-17",progress:"",status:"Off"},{name:"test Desktop UI Interactions",team:"Growth Team",type:"baseline",startDate:"2024-08-17",progress:"",status:"Off"},{name:"test Android Article Find in Page",team:"Android Team",type:"baseline",startDate:"2024-08-17",progress:"",status:"Off"},{name:"test Android Article Link Preview Interaction",team:"Android Team",type:"baseline",startDate:"2024-08-17",progress:"",status:"Off"},{name:"test Android Article TOC",team:"Android Team",type:"baseline",startDate:"2024-08-17",progress:"",status:"Off"}],R=b(""),re=[{label:"Edit Configuration",value:"edit",icon:pe},{label:"View Phab Ticket",value:"phab",icon:ge},{label:"Contact Owner",value:"contact",icon:we},{label:"Turn Instrument On",value:"status",icon:_e},{label:"Delete Instrument",value:"delete",icon:ve}];return(d,t)=>(v(),de(fe,{class:"cdx-demo-table-page"},{header:o(()=>t[9]||(t[9]=[m(" Codex Table demos ")])),content:o(()=>[e("section",{class:ce(["cdx-demo-table-page",z.value])},[n(a(be),{modelValue:h.value,"onUpdate:modelValue":t[0]||(t[0]=l=>h.value=l)},{default:o(()=>t[10]||(t[10]=[m(" Restrict width to test scroll behavior ")])),_:1,__:[10]},8,["modelValue"]),t[18]||(t[18]=e("h2",null,"Basic table",-1)),n(a(u),{caption:"Table caption",columns:g,data:f}),t[19]||(t[19]=e("h2",null,"Table with data out of order",-1)),t[20]||(t[20]=e("p",null,"This should look exactly like the table above.",-1)),n(a(u),{caption:"Table caption",columns:g,data:j}),t[21]||(t[21]=e("h2",null,"Table with extra data and an ID column",-1)),t[22]||(t[22]=e("p",null,"Only the ID and Name columns should display.",-1)),n(a(u),{caption:"Favorite animals",columns:Z,data:q}),t[23]||(t[23]=e("h2",null,"Table with varied content width",-1)),n(a(u),{caption:"User data",columns:O,data:H}),t[24]||(t[24]=e("h2",null,"Table with many columns",-1)),n(a(u),{caption:"User data",columns:a(K),data:Q},null,8,["columns"]),t[25]||(t[25]=e("h2",null,"Table with row headers",-1)),n(a(u),{caption:"Table caption",columns:g,data:f,"use-row-headers":!0}),t[26]||(t[26]=e("h2",null,"Table with visually-hidden caption",-1)),n(a(u),{caption:"Table caption",columns:g,data:f,"hide-caption":!0}),t[27]||(t[27]=e("h2",null,"Table using header and footer slots",-1)),t[28]||(t[28]=e("p",null,"With extra-wide columns to demonstrate scroll behavior",-1)),n(a(u),{caption:"Table caption",columns:g,data:f,class:"cdx-demo-table-page__header-footer"},{header:o(()=>[e("div",he,[n(a(G),null,{default:o(()=>t[11]||(t[11]=[m("Default action")])),_:1,__:[11]}),n(a(G),{action:"progressive",weight:"primary"},{default:o(()=>t[12]||(t[12]=[m(" Primary action ")])),_:1,__:[12]})])]),footer:o(()=>[n(a(ye),null,{default:o(()=>t[13]||(t[13]=[m("There's a checkbox here for some reason")])),_:1,__:[13]})]),_:1}),t[29]||(t[29]=e("h2",null,"Table using item slot",-1)),n(a(u),{caption:"Function implementations",columns:Y,data:X},{"item-name":o(({item:l})=>[e("a",{href:l.url},p(l.label),9,Se)]),"item-status":o(({item:l})=>[n(a(Te),{status:ee(l)},{default:o(()=>[m(p(l),1)]),_:2},1032,["status"])]),"item-action":o(()=>[n(a($),{selected:W.value,"onUpdate:selected":t[1]||(t[1]=l=>W.value=l),"menu-items":te},{default:o(()=>[n(a(L),{icon:a(J)},null,8,["icon"])]),_:1},8,["selected"])]),_:1}),t[30]||(t[30]=e("h2",null,"Table using tbody slot and columns",-1)),n(a(u),{caption:"Table caption",columns:g},{tbody:o(()=>t[14]||(t[14]=[e("tbody",null,[e("tr",null,[e("td",{colspan:"3",class:"cdx-table__table__cell--align-center"}," First section ")]),e("tr",null,[e("td",null,"One"),e("td",{class:"cdx-table__table__cell--align-number"},"1"),e("td",null,"Uno")]),e("tr",null,[e("td",null,"Two"),e("td",{class:"cdx-table__table__cell--align-number"},"2"),e("td",null,"Dos")]),e("tr",null,[e("td",{colspan:"3",class:"cdx-table__table__cell--align-center"}," Second section ")]),e("tr",null,[e("td",null,"Three"),e("td",{class:"cdx-table__table__cell--align-number"},"3"),e("td",null,"Tres")]),e("tr",null,[e("td",null,"Four"),e("td",{class:"cdx-table__table__cell--align-number"},"4"),e("td",null,"Cuatro")])],-1)])),_:1}),t[31]||(t[31]=e("h2",null,"Table using tfoot slot",-1)),n(a(u),{caption:"Monthly budget",columns:le,data:ae,"use-row-headers":!0},{tfoot:o(()=>t[15]||(t[15]=[e("tfoot",null,[e("tr",null,[e("th",null,"Total:"),e("td",{class:"cdx-table__table__cell--align-number"},"$2,200")])],-1)])),_:1}),t[32]||(t[32]=e("h2",null,[m("Table using thead and tbody slot, "),e("code",null,"showVerticalBorders"),m(" is true")],-1)),n(a(u),{caption:"Doctor Who seasons","show-vertical-borders":!0},{thead:o(()=>t[16]||(t[16]=[e("thead",null,[e("tr",null,[e("th",{rowspan:"2"},"Season/series"),e("th",{rowspan:"2"},"Doctor"),e("th",{rowspan:"2",class:"cdx-table__table__cell--align-number"}," Episodes "),e("th",{rowspan:"1",colspan:"2",class:"cdx-table__table__cell--align-center"}," Originally aired "),e("th",{rowspan:"2",class:"cdx-table__table__cell--align-number"}," Average viewers (millions) ")]),e("tr",null,[e("th",null,"First aired"),e("th",null,"Last aired")])],-1)])),tbody:o(()=>[e("tbody",null,[t[17]||(t[17]=e("tr",null,[e("td",{colspan:"6"},"Classic era")],-1)),(v(),y(U,null,M(ne,(l,x)=>(v(),y(U,{key:x},[(v(!0),y(U,null,M(l,(c,k)=>(v(),y("tr",{key:k},[e("td",null,p(c.season),1),c.doctor?(v(),y("td",{key:0,rowspan:l.length},p(c.doctor),9,Ce)):me("v-if",!0),e("td",Ae,p(c.episodes),1),e("td",null,p(c.airStart),1),e("td",null,p(c.airEnd),1),e("td",ke,p(c.viewers),1)]))),128))],64))),64))])]),_:1}),t[33]||(t[33]=e("h2",null,"Table with row selection",-1)),n(a(u),{"selected-rows":S.value,"onUpdate:selectedRows":t[2]||(t[2]=l=>S.value=l),caption:"Table with row selection",columns:g,data:f,"use-row-selection":!0},{header:o(()=>[m(" Selected rows: "+p(S.value),1)]),_:1},8,["selected-rows"]),t[34]||(t[34]=e("h2",null,"Table with single sort",-1)),t[35]||(t[35]=e("p",null,'Note that "Age at win" column has textAlign "end" for testing purposes.',-1)),n(a(u),{sort:C.value,"onUpdate:sort":[t[3]||(t[3]=l=>C.value=l),t[4]||(t[4]=l=>P(l,"singleSort"))],caption:"Recent Nobel laureates in Economic Sciences",columns:B,data:N.value},null,8,["sort","data"]),t[36]||(t[36]=e("h2",null,"Table with sort and row selection",-1)),n(a(u),{sort:A.value,"onUpdate:sort":[t[5]||(t[5]=l=>A.value=l),t[7]||(t[7]=l=>P(l,"withSelection"))],"selected-rows":E.value,"onUpdate:selectedRows":t[6]||(t[6]=l=>E.value=l),caption:"Recent Nobel laureates in Economic Sciences",columns:B,data:F.value,"use-row-selection":!0},null,8,["sort","selected-rows","data"]),t[37]||(t[37]=e("h2",null,"Table with row actions",-1)),n(a(u),{caption:"Instruments",columns:oe,data:se},{"item-actions":o(()=>[n(a($),{selected:R.value,"onUpdate:selected":t[8]||(t[8]=l=>R.value=l),"menu-items":re,"aria-label":"Actions"},{default:o(()=>[n(a(L),{icon:a(J)},null,8,["icon"])]),_:1},8,["selected"])]),_:1}),t[38]||(t[38]=e("h2",null,"CSS-only table with sort",-1)),t[39]||(t[39]=e("p",null,"This doesn't actually work, but it displays the different sort icons.",-1)),t[40]||(t[40]=e("div",{class:"cdx-table"},[e("div",{class:"cdx-table__header"},[e("div",{class:"cdx-table__header__caption","aria-hidden":"true"}," Table with sort ")]),e("div",{class:"cdx-table__table-wrapper"},[e("table",{class:"cdx-table__table"},[e("caption",null,"Table with sort"),e("thead",null,[e("tr",null,[e("th",{scope:"col",class:"cdx-table__table__cell--has-sort"},[e("button",{class:"cdx-table__table__sort-button"},[e("span",{class:"cdx-table__table__sort-label"}," Column 1 "),e("span",{class:"cdx-table__table__sort-icon cdx-table__table__sort-icon--unsorted cdx-button__icon"})])]),e("th",{scope:"col",class:"cdx-table__table__cell--has-sort"},[e("button",{class:"cdx-table__table__sort-button"},[e("span",{class:"cdx-table__table__sort-label"}," Column 2 "),e("span",{class:"cdx-table__table__sort-icon cdx-table__table__sort-icon--asc cdx-button__icon"})])]),e("th",{scope:"col",class:"cdx-table__table__cell--has-sort cdx-table__table__cell--align-number"},[e("button",{class:"cdx-table__table__sort-button"},[e("span",{class:"cdx-table__table__sort-label"}," Column 3 "),e("span",{class:"cdx-table__table__sort-icon cdx-table__table__sort-icon--desc cdx-button__icon"})])]),e("th",{scope:"col"},"Column 4 (not sortable)")])]),e("tbody")])])],-1))],2)]),_:1}))}});xe(De).mount("#app");