@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 3.04 kB
JavaScript
import{d as f,C as b,aO as T,b6 as x,_ as B,a as p,ar as C,f as i,w as l,o as e,p as r,e as o,a5 as s,i as v,aP as y}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";import{C as g}from"./Button-DrTkl5TI.js";/* empty css */import{C as w}from"./Tooltip-BnM8wg-B.js";/* empty css *//* empty css */import"./floating-ui.dom-G9leGyGp.js";const A=f({name:"TooltipDemoPage",components:{CdxButton:g,CdxIcon:b,DemoBaseLayout:T},directives:{tooltip:w},data(){return{cdxIconAppearance:x}}}),D={class:"cdx-text-input__input",type:"text"};function I(d,t,$,k,N,P){const u=p("cdx-button"),m=p("cdx-icon"),a=p("demo-base-layout"),n=C("tooltip");return e(),i(a,{class:"cdx-demo-tooltip-page"},{header:l(()=>t[0]||(t[0]=[r(" Codex Tooltip demos ")])),content:l(()=>[t[5]||(t[5]=o("h2",null,"Tooltip demos",-1)),t[6]||(t[6]=o("p",null," The Tooltip component is implemented as a Vue.js directive. This means that rather than existing as a stand-alone component, it can be added to any component or markup element inside of a Vue.js template. ",-1)),t[7]||(t[7]=o("p",null,' Tooltips appear on focus or on hover. The ARIA "tooltip" role is used to define accessible behavior. ',-1)),t[8]||(t[8]=o("hr",null,null,-1)),t[9]||(t[9]=o("h2",null,"Button Examples",-1)),t[10]||(t[10]=o("p",null,' The tooltip can be configured to appear on any side of the element it is bound to. "Bottom" is used by default. ',-1)),s((e(),i(u,null,{default:l(()=>t[1]||(t[1]=[r(" Button with Tooltip on the bottom ")])),_:1})),[[n,"This is a tooltip"]]),t[11]||(t[11]=o("br",null,null,-1)),t[12]||(t[12]=o("br",null,null,-1)),t[13]||(t[13]=o("br",null,null,-1)),s((e(),i(u,null,{default:l(()=>t[2]||(t[2]=[r(" Button with Tooltip on the right ")])),_:1})),[[n,"This is a different tooltip","right"]]),t[14]||(t[14]=o("br",null,null,-1)),t[15]||(t[15]=o("br",null,null,-1)),t[16]||(t[16]=o("br",null,null,-1)),s((e(),i(u,null,{default:l(()=>t[3]||(t[3]=[r(" Button with Tooltip on the left ")])),_:1})),[[n,"This is a different tooltip","left"]]),t[17]||(t[17]=o("br",null,null,-1)),t[18]||(t[18]=o("br",null,null,-1)),t[19]||(t[19]=o("br",null,null,-1)),s((e(),i(u,null,{default:l(()=>t[4]||(t[4]=[r(' Button with Tooltip at the "bottom start" corner ')])),_:1})),[[n,"This is a different tooltip","bottom-start"]]),t[20]||(t[20]=o("br",null,null,-1)),t[21]||(t[21]=o("br",null,null,-1)),t[22]||(t[22]=o("br",null,null,-1)),s((e(),i(u,null,{default:l(()=>[v(m,{icon:d.cdxIconAppearance},null,8,["icon"])]),_:1})),[[n,"Icon-only buttons in particular can benefit from tooltips","top"]]),t[23]||(t[23]=o("br",null,null,-1)),t[24]||(t[24]=o("br",null,null,-1)),t[25]||(t[25]=o("br",null,null,-1)),t[26]||(t[26]=o("hr",null,null,-1)),t[27]||(t[27]=o("h2",null,"Form field examples",-1)),s(o("input",D,null,512),[[n,"This is a helpful tooltip","right"]])]),_:1})}const V=B(A,[["render",I]]);y(V).mount("#app");