@wikimedia/codex/dist/sandbox/assets/table-C1X43-Su.js

Codex Design System for Wikimedia

import{d as le,r as p,c as ne,f as oe,w as s,aO as se,o as x,p as b,e,i as n,am as l,q as m,b as y,m as R,F as O,n as re,a$ as w,ao as ie,b0 as ue,b1 as de,b2 as ce,at as be,aI as me,k as pe,C as ge,aq as we,aP as _e}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";import{C as L}from"./Button-DrTkl5TI.js";/* empty css                                                        */import{b as u,C as xe}from"./Table-BeNlMuNS.js";import{a as fe,C as ve}from"./MenuButton-BXv1FLbE.js";import"./useFloatingMenu-lGCYR9Tn.js";import"./floating-ui.dom-G9leGyGp.js";import"./Tooltip-BnM8wg-B.js";const ye={class:"cdx-demo-table-page__header-footer__buttons"},he=["href"],Te=["rowspan"],Se={class:"cdx-table__table__cell--align-number"},Ce={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]",Ae=le({__name:"TableDemoPage",setup(ke){const T=p(!0),J=ne(()=>({"cdx-demo-table-page--restrict-width":T.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"}],M=[{col2:1,col1:"One",col3:"Uno"},{col2:2,col3:"Dos",col1:"Two"},{col1:"Three",col3:"Cuatro",col2:3},{col3:"Cuatro",col1:"Four",col2:4}],$=[{id:"id",label:"ID",textAlign:"number",width:"30%"},{id:"name",label:"Name",width:"70%"}],G=[{id:"1234",name:"Toast",species:"cat",coat:"tortoiseshell"},{id:"5678",species:"dog",breed:"Shiba Inu",name:"Laszlo"}],U=[{id:"user",label:"User"},{id:"ip",label:"IP(s)"},{id:"userAgent",label:"User Agent(s)",minWidth:"300px"}],o=["Abc","Twoword Username","Shortish","123.45.6.789","Donau­dampf­schiffahrts­elektrizitäten­haupt­betriebs­werk­bau­unter­beamten­gesellschaft","PascalCase"],z=[{user:o[0],ip:r,userAgent:i},{user:o[1],ip:r,userAgent:i},{user:o[2],ip:r,userAgent:i},{user:o[3],ip:r,userAgent:i},{user:o[4],ip:r,userAgent:i},{user:o[5],ip:r,userAgent:i}],Z=U.concat([{id:"user2",label:"User 2"},{id:"ip2",label:"IP(s) 2"},{id:"userAgent2",label:"User Agent(s) 2",minWidth:"300px"}]),j=[{user:o[0],ip:r,userAgent:i,user2:o[0],ip2:r,userAgent2:i},{user:o[1],ip:r,userAgent:i,user2:o[1],ip2:r,userAgent2:i},{user:o[2],ip:r,userAgent:i,user2:o[2],ip2:r,userAgent2:i},{user:o[3],ip:r,userAgent:i,user2:o[3],ip2:r,userAgent2:i},{user:o[4],ip:r,userAgent:i,user2:o[4],ip2:r,userAgent2:i},{user:o[5],ip:r,userAgent:i,user2:o[5],ip2:r,userAgent2:i}],q=[{id:"name",label:"Name"},{id:"status",label:"Status"},{id:"language",label:"Language"}],H=[{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 K(d){switch(d){case"Connected":return"success";case"Disconnected":return"warning";default:return"notice"}}const X=[{id:"item",label:"Item"},{id:"cost",label:"Cost",textAlign:"number"}],Y=[{item:"Housing",cost:"$1,500"},{item:"Groceries",cost:"$500"},{item:"Utilities",cost:"$200"}],Q={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=p([]),W=[{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=p([{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=p({year:"asc"}),E=p([]),B=p([{[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=p({year:"asc"});function F(d,t){t==="singleSort"&&P(d,C,N),t==="withSelection"&&P(d,A,B)}function P(d,t,a){const v=Object.keys(d)[0];function c(_,D){return a.value.sort((h,I)=>D==="asc"?I[_]-h[_]:h[_]-I[_])}function k(_){return a.value.sort((D,h)=>(_==="asc"?1:-1)*D.name.localeCompare(h.name))}if(d[v]==="none"){a.value=c("year","asc"),t.value[v]="none";return}switch(v){case"year":a.value=c("year",d.year);return;case"name":a.value=k(d.name);return;case"age":a.value=c("age",d.age);return;default:return}}const ee=[{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"}],te=[{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"}],V=p(""),ae=[{label:"Edit Configuration",value:"edit",icon:ie},{label:"View Phab Ticket",value:"phab",icon:ue},{label:"Contact Owner",value:"contact",icon:de},{label:"Turn Instrument On",value:"status",icon:ce},{label:"Delete Instrument",value:"delete",icon:be}];return(d,t)=>(x(),oe(se,{class:"cdx-demo-table-page"},{header:s(()=>t[8]||(t[8]=[b(" Codex Table demos ")])),content:s(()=>[e("section",{class:re(["cdx-demo-table-page",J.value])},[n(l(me),{modelValue:T.value,"onUpdate:modelValue":t[0]||(t[0]=a=>T.value=a)},{default:s(()=>t[9]||(t[9]=[b(" Restrict width to test scroll behavior ")])),_:1},8,["modelValue"]),t[17]||(t[17]=e("h2",null,"Basic table",-1)),n(l(u),{caption:"Table caption",columns:g,data:f}),t[18]||(t[18]=e("h2",null,"Table with data out of order",-1)),t[19]||(t[19]=e("p",null,"This should look exactly like the table above.",-1)),n(l(u),{caption:"Table caption",columns:g,data:M}),t[20]||(t[20]=e("h2",null,"Table with extra data and an ID column",-1)),t[21]||(t[21]=e("p",null,"Only the ID and Name columns should display.",-1)),n(l(u),{caption:"Favorite animals",columns:$,data:G}),t[22]||(t[22]=e("h2",null,"Table with varied content width",-1)),n(l(u),{caption:"User data",columns:U,data:z}),t[23]||(t[23]=e("h2",null,"Table with many columns",-1)),n(l(u),{caption:"User data",columns:l(Z),data:j},null,8,["columns"]),t[24]||(t[24]=e("h2",null,"Table with row headers",-1)),n(l(u),{caption:"Table caption",columns:g,data:f,"use-row-headers":!0}),t[25]||(t[25]=e("h2",null,"Table with visually-hidden caption",-1)),n(l(u),{caption:"Table caption",columns:g,data:f,"hide-caption":!0}),t[26]||(t[26]=e("h2",null,"Table using header and footer slots",-1)),t[27]||(t[27]=e("p",null,"With extra-wide columns to demonstrate scroll behavior",-1)),n(l(u),{caption:"Table caption",columns:g,data:f,class:"cdx-demo-table-page__header-footer"},{header:s(()=>[e("div",ye,[n(l(L),null,{default:s(()=>t[10]||(t[10]=[b("Default action")])),_:1}),n(l(L),{action:"progressive",weight:"primary"},{default:s(()=>t[11]||(t[11]=[b(" Primary action ")])),_:1})])]),footer:s(()=>[n(l(xe),null,{default:s(()=>t[12]||(t[12]=[b("There's a checkbox here for some reason")])),_:1})]),_:1}),t[28]||(t[28]=e("h2",null,"Table using item slot",-1)),n(l(u),{caption:"Function implementations",columns:q,data:H},{"item-name":s(({item:a})=>[e("a",{href:a.url},m(a.label),9,he)]),"item-status":s(({item:a})=>[n(l(fe),{status:K(a)},{default:s(()=>[b(m(a),1)]),_:2},1032,["status"])]),_:1}),t[29]||(t[29]=e("h2",null,"Table using tbody slot and columns",-1)),n(l(u),{caption:"Table caption",columns:g},{tbody:s(()=>t[13]||(t[13]=[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[30]||(t[30]=e("h2",null,"Table using tfoot slot",-1)),n(l(u),{caption:"Monthly budget",columns:X,data:Y,"use-row-headers":!0},{tfoot:s(()=>t[14]||(t[14]=[e("tfoot",null,[e("tr",null,[e("th",null,"Total:"),e("td",{class:"cdx-table__table__cell--align-number"},"$2,200")])],-1)])),_:1}),t[31]||(t[31]=e("h2",null,[b("Table using thead and tbody slot, "),e("code",null,"showVerticalBorders"),b(" is true")],-1)),n(l(u),{caption:"Doctor Who seasons","show-vertical-borders":!0},{thead:s(()=>t[15]||(t[15]=[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:s(()=>[e("tbody",null,[t[16]||(t[16]=e("tr",null,[e("td",{colspan:"6"},"Classic era")],-1)),(x(),y(O,null,R(Q,(a,v)=>(x(),y(O,{key:v},[(x(!0),y(O,null,R(a,(c,k)=>(x(),y("tr",{key:k},[e("td",null,m(c.season),1),c.doctor?(x(),y("td",{key:0,rowspan:a.length},m(c.doctor),9,Te)):pe("v-if",!0),e("td",Se,m(c.episodes),1),e("td",null,m(c.airStart),1),e("td",null,m(c.airEnd),1),e("td",Ce,m(c.viewers),1)]))),128))],64))),64))])]),_:1}),t[32]||(t[32]=e("h2",null,"Table with row selection",-1)),n(l(u),{"selected-rows":S.value,"onUpdate:selectedRows":t[1]||(t[1]=a=>S.value=a),caption:"Table with row selection",columns:g,data:f,"use-row-selection":!0},{header:s(()=>[b(" Selected rows: "+m(S.value),1)]),_:1},8,["selected-rows"]),t[33]||(t[33]=e("h2",null,"Table with single sort",-1)),t[34]||(t[34]=e("p",null,'Note that "Age at win" column has textAlign "end" for testing purposes.',-1)),n(l(u),{sort:C.value,"onUpdate:sort":[t[2]||(t[2]=a=>C.value=a),t[3]||(t[3]=a=>F(a,"singleSort"))],caption:"Recent Nobel laureates in Economic Sciences",columns:W,data:N.value},null,8,["sort","data"]),t[35]||(t[35]=e("h2",null,"Table with sort and row selection",-1)),n(l(u),{sort:A.value,"onUpdate:sort":[t[4]||(t[4]=a=>A.value=a),t[6]||(t[6]=a=>F(a,"withSelection"))],"selected-rows":E.value,"onUpdate:selectedRows":t[5]||(t[5]=a=>E.value=a),caption:"Recent Nobel laureates in Economic Sciences",columns:W,data:B.value,"use-row-selection":!0},null,8,["sort","selected-rows","data"]),t[36]||(t[36]=e("h2",null,"Table with row actions",-1)),n(l(u),{caption:"Instruments",columns:ee,data:te},{"item-actions":s(()=>[n(l(ve),{selected:V.value,"onUpdate:selected":t[7]||(t[7]=a=>V.value=a),"menu-items":ae,"aria-label":"Actions"},{default:s(()=>[n(l(ge),{icon:l(we)},null,8,["icon"])]),_:1},8,["selected"])]),_:1}),t[37]||(t[37]=e("h2",null,"CSS-only table with sort",-1)),t[38]||(t[38]=e("p",null,"This doesn't actually work, but it displays the different sort icons.",-1)),t[39]||(t[39]=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}))}});_e(Ae).mount("#app");