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

Codex Design System for Wikimedia

import{d as I,o as i,b as r,e as t,F as b,m,aU as q,aV as z,aW as A,q as _,g as V,r as N,f as G,w as a,aS as H,p,i as s,an as d,n as f,C as g,aq as w,aX as C,aY as S,a8 as T,_ as F,aT as U}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWepejvL.js";import{C as c}from"./Button-B1VmJ8QZ.js";/* empty css                                                        */import{C as W}from"./TextInput-3EzxYegs.js";const D={class:"cdx-docs-button-demo-table"},x=I({__name:"ButtonGridTable",setup(L){const k=[void 0,...q],y=[void 0,...z],v=[void 0,...A];function n(l){return l===void 0?"undefined":{medium:"Medium",large:"Large"}[l]}function e(l){return l===void 0?"undefined":{normal:"Normal",primary:"Primary",quiet:"Quiet"}[l]}return(l,o)=>(i(),r("table",D,[t("thead",null,[t("tr",null,[o[0]||(o[0]=t("th",{"aria-hidden":"true"},null,-1)),(i(),r(b,null,m(y,u=>t("th",{key:u,colspan:"4"},_(n(u))+" size ",1)),64))]),t("tr",null,[o[1]||(o[1]=t("th",{"aria-hidden":"true"},null,-1)),(i(),r(b,null,m(y,u=>(i(),r(b,null,[(i(),r(b,null,m(v,$=>t("th",{key:"".concat(u,"-").concat($)},_(e($)),1)),64))],64))),64))])]),t("tbody",null,[(i(),r(b,null,m(k,u=>(i(),r(b,null,[(i(),r(b,null,m([!1,!0],$=>t("tr",{key:"".concat(u,"-").concat(Number($))},[t("th",null,_(u||"undefined")+" "+_($?" disabled":""),1),(i(),r(b,null,m(y,h=>(i(),r(b,null,[(i(),r(b,null,m(v,B=>t("td",{key:"".concat(h,"-").concat(B)},[V(l.$slots,"default",{action:u,size:h,weight:B,disabled:$})])),64))],64))),64))])),64))],64))),64))])]))}}),E={id:"cdx-button"},M=["disabled"],P=["disabled"],Q={class:"cdx-demo-flush-layout cdx-demo-flush-layout--regular"},R={class:"cdx-demo-flush-layout__buttons"},X={class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only"},Y={class:"cdx-demo-flush-layout__buttons"},j={class:"cdx-demo-flush-layout cdx-demo-flush-layout--icon-only-large"},J={class:"cdx-demo-flush-layout__buttons"},K={class:"cdx-demo-buttons-flex cdx-demo-buttons-flex--icon-only"},O=I({__name:"ButtonGrid",setup(L){const k=function(){console.log("click event emitted")},y=N("");return(v,n)=>(i(),G(H,{class:"cdx-button-grid"},{header:a(()=>n[1]||(n[1]=[p(" Codex Button Grid ")])),content:a(()=>[t("section",E,[n[15]||(n[15]=t("h2",null," Button ",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[s(d(c),{size:l,weight:o,action:e,disabled:u,onClick:k},{default:a(()=>[s(d(g),{icon:d(w)},null,8,["icon"]),n[2]||(n[2]=p(" Button "))]),_:2},1032,["size","weight","action","disabled"])]),_:1}),n[16]||(n[16]=t("h3",null,"Icon-only buttons",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[s(d(c),{size:l,weight:o,action:e,disabled:u,"aria-label":"Button",onClick:k},{default:a(()=>[s(d(g),{icon:d(w)},null,8,["icon"])]),_:2},1032,["size","weight","action","disabled"])]),_:1}),n[17]||(n[17]=t("h3",null,"CSS-only version",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("button",{class:f("cdx-button ".concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),disabled:u},n[3]||(n[3]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1),p(" Button ")]),10,M)]),_:1}),n[18]||(n[18]=t("h3",null,"CSS-only icon-only buttons",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("button",{class:f("cdx-button cdx-button--icon-only ".concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),disabled:u,"aria-label":"Button"},n[4]||(n[4]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1)]),10,P)]),_:1}),n[19]||(n[19]=t("h3",null,"Link buttons",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("a",{class:f("cdx-button cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):""))},n[5]||(n[5]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1),p(" Button ")]),2)]),_:1}),n[20]||(n[20]=t("h3",null,"Icon-only link buttons",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("a",{class:f("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},n[6]||(n[6]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1)]),2)]),_:1}),n[21]||(n[21]=t("h3",null,"Icon-only link buttons with small icon",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("a",{class:f("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},n[7]||(n[7]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash--small"},null,-1)]),2)]),_:1}),n[22]||(n[22]=t("h3",null,"Checkbox hack (label buttons)",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("label",{class:f("cdx-button cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):""))},n[8]||(n[8]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1),p(" Button ")]),2)]),_:1}),n[23]||(n[23]=t("h3",null,"Icon-only checkbox hack (label buttons)",-1)),s(x,null,{default:a(({action:e,size:l,weight:o,disabled:u})=>[t("label",{class:f("cdx-button cdx-button--icon-only cdx-button--fake-button cdx-button--fake-button--".concat(u?"disabled":"enabled"," ").concat(e?"cdx-button--action-".concat(e):""," ").concat(o?"cdx-button--weight-".concat(o):""," ").concat(l?"cdx-button--size-".concat(l):"")),"aria-label":"Button"},n[9]||(n[9]=[t("span",{class:"cdx-button__icon cdx-demo-css-icon--trash"},null,-1)]),2)]),_:1}),n[24]||(n[24]=t("h3",null,"Flush layout for buttons",-1)),n[25]||(n[25]=t("h4",null,"Regular buttons",-1)),t("div",Q,[t("div",R,[s(d(c),{weight:"quiet"},{default:a(()=>n[10]||(n[10]=[p(" Button one ")])),_:1}),s(d(c),{weight:"quiet"},{default:a(()=>n[11]||(n[11]=[p(" Button two ")])),_:1})]),n[12]||(n[12]=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[26]||(n[26]=t("h4",null,"Icon-only buttons",-1)),t("div",X,[t("div",Y,[s(d(c),{weight:"quiet","aria-label":"Align left"},{default:a(()=>[s(d(g),{icon:d(C)},null,8,["icon"])]),_:1}),s(d(c),{weight:"quiet","aria-label":"Align right"},{default:a(()=>[s(d(g),{icon:d(S)},null,8,["icon"])]),_:1})]),n[13]||(n[13]=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[27]||(n[27]=t("h4",null,"CSS-only icon-only buttons",-1)),n[28]||(n[28]=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[29]||(n[29]=t("h4",null,"Large icon-only buttons",-1)),t("div",j,[t("div",J,[s(d(c),{weight:"quiet",size:"large","aria-label":"Align left"},{default:a(()=>[s(d(g),{icon:d(C)},null,8,["icon"])]),_:1}),s(d(c),{weight:"quiet",size:"large","aria-label":"Align right"},{default:a(()=>[s(d(g),{icon:d(S)},null,8,["icon"])]),_:1})]),n[14]||(n[14]=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[30]||(n[30]=t("h4",null,"Buttons in flex layouts",-1)),n[31]||(n[31]=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[32]||(n[32]=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",K,[s(d(W),{modelValue:y.value,"onUpdate:modelValue":n[0]||(n[0]=e=>y.value=e)},null,8,["modelValue"]),s(d(c),{"aria-label":"Search"},{default:a(()=>[s(d(g),{icon:d(T)},null,8,["icon"])]),_:1})])])]),_:1}))}}),Z=F(O,[["__scopeId","data-v-05f06af0"]]);U(Z).mount("#app");