@wikimedia/codex/dist/sandbox/assets/buttons-M2lQHnsI.js

Codex Design System for Wikimedia

import{d as I,aR as L,aS as A,aT as V,b as r,o as c,e as t,F as m,p as g,s as f,h as z,r as H,f as N,w as d,j as e,L as s,q as y,C as x,au as C,n as i,aU as v,aV as B,a9 as F,aP as G,_ as T,aQ as E}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CZ7OyK4g.js";import{C as b}from"./Button-BmO8KPcu.js";/* empty css                                                        */import{C as P}from"./TextInput-Dm2IMIAi.js";const Q={class:"cdx-docs-button-demo-table"},p=I({__name:"ButtonGridTable",setup(q){const $=[void 0,...L],h=[void 0,...A],k=[void 0,...V];function n(l){return l===void 0?"undefined":{small:"Small",medium:"Medium",large:"Large"}[l]}function a(l){return l===void 0?"undefined":{normal:"Normal",primary:"Primary",quiet:"Quiet"}[l]}return(l,o)=>(c(),r("table",Q,[t("thead",null,[t("tr",null,[o[0]||(o[0]=t("th",{"aria-hidden":"true"},null,-1)),(c(),r(m,null,g(h,u=>t("th",{key:u,colspan:"4"},f(n(u))+" size ",1)),64))]),t("tr",null,[o[1]||(o[1]=t("th",{"aria-hidden":"true"},null,-1)),(c(),r(m,null,g(h,u=>(c(),r(m,null,[(c(),r(m,null,g(k,_=>t("th",{key:"".concat(u,"-").concat(_)},f(a(_)),1)),64))],64))),64))])]),t("tbody",null,[(c(),r(m,null,g($,u=>(c(),r(m,null,[(c(),r(m,null,g([!1,!0],_=>t("tr",{key:"".concat(u,"-").concat(Number(_))},[t("th",null,f(u||"undefined")+" "+f(_?" disabled":""),1),(c(),r(m,null,g(h,S=>(c(),r(m,null,[(c(),r(m,null,g(k,w=>t("td",{key:"".concat(S,"-").concat(w)},[z(l.$slots,"default",{action:u,size:S,weight:w,disabled:_})])),64))],64))),64))])),64))],64))),64))])]))}}),R={id:"cdx-button"},U=["disabled"],j=["disabled"],D={class:"cdx-demo-flush-layout cdx-demo-flush-layout--regular"},M={class:"cdx-demo-flush-layout__buttons"},W={class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only"},J={class:"cdx-demo-flush-layout__buttons"},K={class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only-small"},O={class:"cdx-demo-flush-layout__buttons"},X={class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only-large"},Y={class:"cdx-demo-flush-layout__buttons"},Z={class:"cdx-demo-buttons-flex cdx-demo-buttons-flex--icon-only"},tt=I({__name:"ButtonGrid",setup(q){const $=function(){console.log("click event emitted")},h=H("");return(k,n)=>(c(),N(G,{class:"cdx-button-grid"},{header:d(()=>n[1]||(n[1]=[y(" Codex Button Grid ")])),content:d(()=>[t("section",R,[n[9]||(n[9]=t("h2",null," Button ",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[e(s(b),{size:l,weight:o,action:a,disabled:u,onClick:$},{default:d(()=>[e(s(x),{size:l==="small"?"small":"medium",icon:s(C)},null,8,["size","icon"]),y(" "+f(l==="small"?"button":"Button"),1)]),_:2},1032,["size","weight","action","disabled"])]),_:1}),n[10]||(n[10]=t("h3",null,"Icon-only buttons",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[e(s(b),{size:l,weight:o,action:a,disabled:u,"aria-label":"Button",onClick:$},{default:d(()=>[e(s(x),{size:l==="small"?"small":"medium",icon:s(C)},null,8,["size","icon"])]),_:2},1032,["size","weight","action","disabled"])]),_:1}),n[11]||(n[11]=t("h3",null,"CSS-only version",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("button",{class:i("cdx-button ".concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),disabled:u},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2),y(" "+f(l==="small"?"button":"Button"),1)],10,U)]),_:1}),n[12]||(n[12]=t("h3",null,"CSS-only icon-only buttons",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("button",{class:i("cdx-button cdx-button--icon-only ".concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),disabled:u,"aria-label":"Button"},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2)],10,j)]),_:1}),n[13]||(n[13]=t("h3",null,"Link buttons",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("a",{class:i("cdx-button cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):""))},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2),y(" "+f(l==="small"?"button":"Button"),1)],2)]),_:1}),n[14]||(n[14]=t("h3",null,"Icon-only link buttons",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("a",{class:i("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2)],2)]),_:1}),n[15]||(n[15]=t("h3",null,"Icon-only link buttons with small icon",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("a",{class:i("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},n[2]||(n[2]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash--small"},null,-1)]),2)]),_:1}),n[16]||(n[16]=t("h3",null,"Checkbox hack (label buttons)",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("label",{class:i("cdx-button cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):""))},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2),y(" "+f(l==="small"?"button":"Button"),1)],2)]),_:1}),n[17]||(n[17]=t("h3",null,"Icon-only checkbox hack (label buttons)",-1)),e(p,null,{default:d(({action:a,size:l,weight:o,disabled:u})=>[t("label",{class:i("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(a?"cdx-button--action-".concat(a):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},[t("span",{class:i(["cdx-button__icon",l==="small"?"cdx-demo-css-icon--trash--small":"cdx-demo-css-icon--trash"])},null,2)],2)]),_:1}),n[18]||(n[18]=t("h3",null,"Flush layout for buttons",-1)),n[19]||(n[19]=t("h4",null,"Regular buttons",-1)),t("div",D,[t("div",M,[e(s(b),{weight:"quiet"},{default:d(()=>n[3]||(n[3]=[y(" Button one ")])),_:1,__:[3]}),e(s(b),{weight:"quiet"},{default:d(()=>n[4]||(n[4]=[y(" Button two ")])),_:1,__:[4]})]),n[5]||(n[5]=t("div",{class:"cdx-demo-flush-layout__content"},[t("p",null," Hemp seeds apple vinaigrette dark and stormy habanero golden coriander peppermint asian pear frosted gingerbread bites Southern Italian almond milk chai latte mint golden cayenne pepper. ")],-1))]),n[20]||(n[20]=t("h4",null,"Icon-only buttons",-1)),t("div",W,[t("div",J,[e(s(b),{weight:"quiet","aria-label":"Align left"},{default:d(()=>[e(s(x),{icon:s(v)},null,8,["icon"])]),_:1}),e(s(b),{weight:"quiet","aria-label":"Align right"},{default:d(()=>[e(s(x),{icon:s(B)},null,8,["icon"])]),_:1})]),n[6]||(n[6]=t("div",{class:"cdx-demo-flush-layout__content"},[t("p",null," Hemp seeds apple vinaigrette dark and stormy habanero golden coriander peppermint asian pear frosted gingerbread bites Southern Italian almond milk chai latte mint golden cayenne pepper. ")],-1))]),n[21]||(n[21]=t("h4",null,"CSS-only icon-only buttons",-1)),n[22]||(n[22]=t("div",{class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only"},[t("div",{class:"cdx-demo-flush-layout__buttons"},[t("button",{class:"cdx-button cdx-button--weight-quiet cdx-button--icon-only","aria-label":"Align left"},[t("span",{class:"cdx-button__icon cdx-demo-css-icon--align-left"})]),t("button",{class:"cdx-button cdx-button--weight-quiet cdx-button--icon-only","aria-label":"Align right"},[t("span",{class:"cdx-button__icon cdx-demo-css-icon--align-right"})])]),t("div",{class:"cdx-demo-flush-layout__content"},[t("p",null," Hemp seeds apple vinaigrette dark and stormy habanero golden coriander peppermint asian pear frosted gingerbread bites Southern Italian almond milk chai latte mint golden cayenne pepper. ")])],-1)),n[23]||(n[23]=t("h4",null,"Small icon-only buttons",-1)),t("div",K,[t("div",O,[e(s(b),{weight:"quiet",size:"small","aria-label":"Align left"},{default:d(()=>[e(s(x),{size:"small",icon:s(v)},null,8,["icon"])]),_:1}),e(s(b),{weight:"quiet",size:"small","aria-label":"Align right"},{default:d(()=>[e(s(x),{size:"small",icon:s(B)},null,8,["icon"])]),_:1})]),n[7]||(n[7]=t("div",{class:"cdx-demo-flush-layout__content"},[t("p",null," Hemp seeds apple vinaigrette dark and stormy habanero golden coriander peppermint asian pear frosted gingerbread bites Southern Italian almond milk chai latte mint golden cayenne pepper. ")],-1))]),n[24]||(n[24]=t("h4",null,"Large icon-only buttons",-1)),t("div",X,[t("div",Y,[e(s(b),{weight:"quiet",size:"large","aria-label":"Align left"},{default:d(()=>[e(s(x),{icon:s(v)},null,8,["icon"])]),_:1}),e(s(b),{weight:"quiet",size:"large","aria-label":"Align right"},{default:d(()=>[e(s(x),{icon:s(B)},null,8,["icon"])]),_:1})]),n[8]||(n[8]=t("div",{class:"cdx-demo-flush-layout__content"},[t("p",null," Hemp seeds apple vinaigrette dark and stormy habanero golden coriander peppermint asian pear frosted gingerbread bites Southern Italian almond milk chai latte mint golden cayenne pepper. ")],-1))]),n[25]||(n[25]=t("h4",null,"Buttons in flex layouts",-1)),n[26]||(n[26]=t("div",{class:"cdx-demo-buttons-flex cdx-demo-buttons-flex--desktop"},[t("form",{class:"cdx-demo-buttons-flex--desktop__flex-container"},[t("div",{class:"cdx-text-input"},[t("input",{class:"cdx-text-input__input",name:"search",value:"",size:"70"})]),t("input",{type:"submit",name:"fulltext",value:"Artikel suchen",class:"cdx-button"})])],-1)),n[27]||(n[27]=t("div",{class:"cdx-demo-buttons-flex cdx-demo-buttons-flex--mobile"},[t("form",{class:"cdx-demo-buttons-flex--mobile__flex-container"},[t("div",{class:"cdx-text-input"},[t("input",{name:"search",class:"cdx-text-input__input",size:"50"})]),t("input",{type:"submit",name:"go",value:"Look up",class:"cdx-button"})])],-1)),t("div",Z,[e(s(P),{modelValue:h.value,"onUpdate:modelValue":n[0]||(n[0]=a=>h.value=a)},null,8,["modelValue"]),e(s(b),{"aria-label":"Search"},{default:d(()=>[e(s(x),{icon:s(F)},null,8,["icon"])]),_:1})])])]),_:1}))}}),nt=T(tt,[["__scopeId","data-v-2fb20f13"]]);E(nt).mount("#app");