Note, this method requires components to be created that can parse and render the data structure provided to the row.
The data passed to the sub-component can be manipulated using:
map- maps row properties to other names
extraProps- passes additional properties into the component
Map
"map": {\n "count": "number",\n "name": "user.name",\n}, Maps the row properties number and user.name to number and name respectively.
extraProps
"extraProps": {\n "total": this.totalRows,\n "disabled": this.tableDisabled,\n}, Passes the properties totalRows and tableDisabled from wherever columns is defined into the component.
This method does still enable searching and sorting out of the box.
',10),Ce={style:{"margin-top":"24px"}},Oe={style:{"margin-top":"24px"}},De={class:"example"},ze=(0,l._)("h5",null,"Example 6: Custom Row Content & Components",-1),Ve=(0,l._)("p",{style:{"margin-bottom":"12px"}},"Note, this method will override the full row object inside data-table, including filtering/sorting and loading/no-data placeholder options of the table.",-1),Te={style:{"margin-top":"24px"}},$e={class:"example"},Ge=(0,l._)("h5",null,"Example 7: v-for Selectable Rows & Custom Headers",-1),Ie={style:{"margin-top":"24px"}},Ue={style:{"margin-top":"24px"}},Me={class:"example"},Ne=(0,l._)("h5",null,"Example 8: No Data",-1),Fe={style:{"margin-top":"24px"}},Ae={class:"example"},He=(0,l._)("h5",null,"Example 9: Loading",-1),Pe={style:{"margin-top":"24px"}},Be={ref:"ff-data-table-row"},Ee=(0,l._)("pre",null,"ff-data-table-row",-1),je=[Ee],qe=(0,l._)("h3",null,"Properties:",-1),Ze=(0,l._)("h3",null,"Slots:",-1),Le={ref:"ff-data-table-cell"},Re=(0,l._)("pre",null,"ff-data-table-cell",-1),Ke=[Re],Ye=(0,l._)("h3",null,"Slots:",-1),Je={class:"section"},Qe=(0,l._)("h1",null,"Dialog Box",-1),Xe={ref:"ff-dialog"},et=(0,l._)("pre",null,"ff-dialog",-1),tt=[et],ot=(0,l._)("h3",null,"Properties:",-1),nt=(0,l._)("h3",null,"Emits:",-1),lt=(0,l._)("h3",null,"Slots:",-1),it=(0,l._)("h3",null,"Examples:",-1),at={class:"examples"},st={class:"example"},rt=(0,l._)("p",{style:{"margin-bottom":"12px"}},"The main message for the dialog box goes here. We can put any elements we like here. For example, a text input:",-1),ct={class:"example"},ut={class:"example"},dt={class:"section"},pt=(0,l._)("h1",null,"Help Tooltip",-1),ft={ref:"ff-help"},mt=(0,l._)("pre",null,"ff-help-tooltip",-1),ht=[mt],bt=(0,l._)("h3",null,"Properties:",-1),wt=(0,l._)("h3",null,"Examples:",-1),gt={class:"examples"},vt={class:"example"},yt=(0,l._)("h5",null,"Default Position",-1),kt={class:"example"},_t=(0,l._)("h5",null,"Alternative Position",-1),xt={class:"section"},Wt=(0,l._)("h1",null,"Form Elements",-1),St={ref:"ff-text-input"},Ct=(0,l._)("pre",null,"ff-text-input",-1),Ot=[Ct],Dt=(0,l._)("h3",null,"Properties:",-1),zt=(0,l._)("h3",null,"Methods:",-1),Vt=(0,l._)("h3",null,"Slots:",-1),Tt=(0,l._)("h3",null,"Examples:",-1),$t={class:"examples"},Gt={class:"example"},It=(0,l._)("h5",null,"Simple Text Input",-1),Ut={class:"example"},Mt=(0,l._)("h5",null,"Error State",-1),Nt={class:"example"},Ft=(0,l._)("h5",null,"Type: Password",-1),At={class:"example"},Ht=(0,l._)("h5",null,"Type: E-Mail",-1),Pt={class:"example"},Bt=(0,l._)("h5",null,"Text Input with Icon (e.g. Search)",-1),Et={ref:"ff-dropdown"},jt=(0,l._)("pre",null,"ff-dropdown",-1),qt=[jt],Zt=(0,l._)("h3",null,"Properties:",-1),Lt=(0,l._)("h3",null,"Methods:",-1),Rt=(0,l._)("h3",null,"Examples:",-1),Kt={class:"examples"},Yt={class:"example"},Jt=(0,l._)("h5",null,"Default",-1),Qt={class:"example"},Xt=(0,l._)("h5",null,"Button Style",-1),eo={class:"example"},to=(0,l._)("h5",null,"Button Style & Align Menu: Right",-1),oo={class:"example"},no=(0,l._)("h5",null,"Disabled",-1),lo={ref:"ff-checkbox"},io=(0,l._)("pre",null,"ff-checkbox",-1),ao=[io],so=(0,l._)("h3",null,"Properties:",-1),ro=(0,l._)("h3",null,"Methods:",-1),co=(0,l._)("h3",null,"Examples:",-1),uo={class:"examples"},po={class:"example"},fo=(0,l._)("h5",null,"Example 1: Default",-1),mo={class:"example"},ho=(0,l._)("h5",null,"Example 2: Disabled",-1),bo={class:"example"},wo=(0,l._)("h5",null,"Example 3: Custom Label",-1),go=(0,l._)("b",null,[(0,l.Uk)("My "),(0,l._)("u",null,"Custom"),(0,l.Uk)(" Label")],-1),vo={ref:"ff-radio-group"},yo=(0,l._)("pre",null,"ff-radio-group",-1),ko=[yo],_o=(0,l._)("h3",null,"Properties:",-1),xo=(0,l._)("h3",null,"Methods:",-1),Wo=(0,l._)("h3",null,"Examples:",-1),So={class:"examples"},Co={class:"example"},Oo=(0,l._)("h5",null,"Example 1: Horizontal",-1),Do={class:"example"},zo=(0,l._)("h5",null,"Example 2: Grid & Label",-1),Vo={class:"example"},To=(0,l._)("h5",null,"Example 3: Vertical & Descriptions",-1),$o={class:"example"},Go=(0,l._)("h5",null,"Example 4: Disabled Option",-1),Io={ref:"ff-tile-selection"},Uo=(0,l._)("pre",null,"ff-tile-selection",-1),Mo=[Uo],No=(0,l._)("h3",null,"Properties:",-1),Fo=(0,l._)("h3",null,"Examples:",-1),Ao={class:"examples"},Ho={class:"example"},Po={class:"example"},Bo={class:"example"},Eo={class:"example"},jo={ref:"ff-toggle-switch"},qo=(0,l._)("pre",null,"ff-toggle-switch",-1),Zo=[qo],Lo=(0,l._)("h3",null,"Properties:",-1),Ro=(0,l._)("h3",null,"Slots:",-1),Ko=(0,l._)("h3",null,"Emits:",-1),Yo=(0,l._)("h3",null,"Examples:",-1),Jo={class:"examples"},Qo={class:"example"},Xo=(0,l._)("h5",null,"Example 1: Default",-1),en={class:"example"},tn=(0,l._)("h5",null,"Example 2: Icon Slot",-1),on={class:"example"},nn=(0,l._)("h5",null,"Example 3: Disabled",-1),ln={class:"example"},an=(0,l._)("h5",null,"Example 4: Async State",-1),sn=(0,l._)("p",{style:{"margin-bottom":"9px"}},'Calls a function with a fixed timeout of 2 seconds, then sets the relevant state. Will show a "loading" state intermittently until state is resolved within the function.',-1),rn=(0,l._)("p",{style:{"margin-bottom":"9px"}},'Be sure to clear the "loading" state in your onSwitchClick function when appropriate.',-1),cn={class:"section"},un=(0,l._)("h1",null,"Notifications",-1),dn={ref:"ff-notification-pill"},pn=(0,l._)("pre",null,"ff-notification-pill",-1),fn=[pn],mn=(0,l._)("h3",null,"Properties:",-1),hn=(0,l._)("h3",null,"Examples:",-1),bn={class:"examples"},wn={class:"example"},gn={ref:"ff-notification-toast"},vn=(0,l._)("pre",null,"ff-notification-toast",-1),yn=[vn],kn=(0,l._)("h3",null,"Properties:",-1),_n=(0,l._)("h3",null,"Slots:",-1),xn=(0,l._)("h3",null,"Emits:",-1),Wn=(0,l._)("h3",null,"Examples:",-1),Sn={class:"examples"},Cn={class:"example"},On={class:"example"},Dn={class:"example"},zn={class:"example"},Vn={class:"example"},Tn={class:"section"},$n=(0,l._)("h1",null,"Tabs",-1),Gn={ref:"ff-tabs"},In=(0,l._)("pre",null,"ff-tabs",-1),Un=[In],Mn=(0,l._)("h3",null,"Properties:",-1),Nn=(0,l._)("h3",null,"Emits:",-1),Fn=(0,l._)("h3",null,"Examples:",-1),An={class:"examples"},Hn={class:"example"},Pn=(0,l._)("h5",null,"Example 1: Horizontal Tabs",-1),Bn={class:"example"},En=(0,l._)("h5",null,"Example 2: Vertical Tabs",-1),jn={class:"section"},qn=(0,l._)("h1",null,"Utilities",-1),Zn={ref:"ff-check"},Ln=(0,l._)("pre",null,"ff-check",-1),Rn=[Ln],Kn=(0,l._)("h3",null,"Properties:",-1),Yn=(0,l._)("h3",null,"Examples:",-1),Jn={class:"examples"},Qn={class:"example"},Xn={ref:"ff-list-item"},el=(0,l._)("pre",null,"ff-list-item",-1),tl=[el],ol=(0,l._)("h3",null,"Properties:",-1),nl={class:"section"},ll=(0,l._)("h1",null,"Tooltip",-1),il={ref:"ff-tooltip"},al=(0,l._)("pre",null,"ff-tooltip",-1),sl=[al],rl=(0,l._)("h3",null,"Args:",-1),cl=(0,l._)("h3",null,"Examples:",-1),ul={class:"examples"},dl={class:"example"},pl=(0,l._)("h5",null,"Example 1: Default",-1),fl={class:"example"},ml=(0,l._)("h5",null,"Example 2: Left",-1),hl={class:"example"},bl=(0,l._)("h5",null,"Example 3: Top",-1),wl={class:"example"},gl=(0,l._)("h5",null,"Example 4: Bottom",-1);function vl(e,t,o,h,b,_){var A=this,te=(0,l.up)("ff-notification-toast"),Ee=(0,l.up)("props-table"),Re=(0,l.up)("slots-table"),et=(0,l.up)("methods-table"),mt=(0,l.up)("ff-button"),Ct=(0,l.up)("PlusSmIcon"),jt=(0,l.up)("ff-list-item"),io=(0,l.up)("ff-kebab-menu"),yo=(0,l.up)("events-table"),Uo=(0,l.up)("ff-data-table"),qo=(0,l.up)("ff-data-table-cell"),pn=(0,l.up)("ff-notification-pill"),vn=(0,l.up)("ff-data-table-row"),In=(0,l.up)("ff-text-input"),Ln=(0,l.up)("ff-dialog"),el=(0,l.up)("ff-help"),al=(0,l.up)("SearchIcon"),vl=(0,l.up)("ff-dropdown-option"),yl=(0,l.up)("ff-dropdown"),kl=(0,l.up)("ff-checkbox"),_l=(0,l.up)("ff-radio-group"),xl=(0,l.up)("ff-markdown-viewer"),Wl=(0,l.up)("ff-tile-selection-option"),Sl=(0,l.up)("ff-tile-selection"),Cl=(0,l.up)("ff-toggle-switch"),Ol=(0,l.up)("CodeIcon"),Dl=(0,l.up)("ff-tab"),zl=(0,l.up)("ff-tabs"),Vl=(0,l.up)("ff-check"),Tl=(0,l.Q2)("ff-tooltip");return(0,l.wg)(),(0,l.iD)(l.HY,null,[(0,l._)("div",a,[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(b.alerts.slice().reverse(),(function(e,t){return(0,l.wg)(),(0,l.j4)(te,{key:e.timestamp,type:e.type,message:e.message,countdown:e.countdown||3e3,onClose:function(e){return _.clearAlert(t)}},null,8,["type","message","countdown","onClose"])})),128))]),(0,l._)("nav",{class:(0,i.C_)({"ff-bg-light ff-theme-light":"light"===b.theme,"ff-bg-dark ff-theme-dark":"dark"===b.theme})},[s,(0,l._)("ul",r,[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(b.cGroups,(function(e){return(0,l.wg)(),(0,l.iD)("li",{key:e.name},[(0,l._)("h3",null,(0,i.zw)(e.name),1),(0,l._)("ul",null,[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(e.components,(function(e){return(0,l.wg)(),(0,l.iD)("li",{key:e.name,onClick:function(t){return _.toSection(e.name)}},(0,i.zw)(e.name),9,c)})),128))])])})),128))]),u,(0,l._)("ul",d,[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(b.dGroups,(function(e){return(0,l.wg)(),(0,l.iD)("li",{key:e.name},[(0,l._)("h3",null,(0,i.zw)(e.name),1),(0,l._)("ul",null,[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(e.components,(function(e){return(0,l.wg)(),(0,l.iD)("li",{key:e.name,onClick:function(t){return _.toSection(e.name)}},(0,i.zw)(e.name),9,p)})),128))])])})),128))])],2),(0,l._)("main",{class:(0,i.C_)({"ff-bg-light ff-theme-light":"light"===b.theme,"ff-bg-dark ff-theme-dark":"dark"===b.theme})},[(0,l._)("div",f,[m,(0,l.wy)((0,l._)("select",{"onUpdate:modelValue":t[0]||(t[0]=function(e){return b.theme=e})},w,512),[[n.bM,b.theme]])]),(0,l._)("div",g,[(0,l._)("div",v,[y,(0,l._)("h2",k,x,512),W,(0,l.Wm)(Ee,{rows:b.cGroups["button"].components[0].props},null,8,["rows"]),S,(0,l.Wm)(Re,{rows:b.cGroups["button"].components[0].slots},null,8,["rows"]),C,(0,l.Wm)(et,{rows:b.cGroups["button"].components[0].methods,onCallMethod:t[1]||(t[1]=function(e){var t;return null===(t=A.$refs["button-input"])||void 0===t?void 0:t[e]()})},null,8,["rows"]),O,(0,l._)("div",D,[(0,l._)("div",z,[(0,l.Wm)(mt,{ref:"button-input",onClick:t[2]||(t[2]=function(e){return _.doSomething("Button clicked")})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hello World")]})),_:1},512),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[0].code),1)]),(0,l._)("div",V,[(0,l.Wm)(mt,{kind:"secondary"},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hello World")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[1].code),1)]),(0,l._)("div",T,[(0,l.Wm)(mt,{kind:"tertiary"},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hello World")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[2].code),1)]),(0,l._)("div",$,[(0,l.Wm)(mt,{kind:"danger"},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hello World")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[3].code),1)]),(0,l._)("div",G,[(0,l.Wm)(mt,{disabled:!0},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hello World")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[4].code),1)]),(0,l._)("div",I,[(0,l.Wm)(mt,{kind:"primary"},{"icon-left":(0,l.w5)((function(){return[(0,l.Wm)(Ct)]})),default:(0,l.w5)((function(){return[(0,l.Uk)(" Hello World ")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[5].code),1)]),(0,l._)("div",U,[(0,l.Wm)(mt,{kind:"secondary"},{"icon-right":(0,l.w5)((function(){return[(0,l.Wm)(Ct)]})),default:(0,l.w5)((function(){return[(0,l.Uk)(" Hello World ")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[6].code),1)]),(0,l._)("div",M,[(0,l.Wm)(mt,{kind:"primary",size:"small"},{"icon-left":(0,l.w5)((function(){return[(0,l.Wm)(Ct)]})),default:(0,l.w5)((function(){return[(0,l.Uk)(" Hello World ")]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[7].code),1)]),(0,l._)("div",N,[(0,l.Wm)(mt,{kind:"primary"},{icon:(0,l.w5)((function(){return[(0,l.Wm)(Ct)]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[0].examples[8].code),1)])]),(0,l._)("h2",F,H,512),P,(0,l.Wm)(Ee,{rows:b.cGroups["button"].components[1].props},null,8,["rows"]),B,(0,l._)("div",E,[(0,l._)("div",j,[q,(0,l.Wm)(io,{"menu-align":"left"},{default:(0,l.w5)((function(){return[(0,l.Wm)(jt,{label:"Option 1"}),(0,l.Wm)(jt,{label:"Option 2"})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[1].examples[0].code),1)]),(0,l._)("div",Z,[L,(0,l.Wm)(io,{style:{"margin-left":"250px"},"menu-align":"right"},{default:(0,l.w5)((function(){return[(0,l.Wm)(jt,{label:"Option 1"}),(0,l.Wm)(jt,{label:"Option 2"})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[1].examples[1].code),1)]),(0,l._)("div",R,[K,(0,l.Wm)(io,{"menu-align":"left"},{default:(0,l.w5)((function(){return[(0,l.Wm)(jt,{label:"Option 1"}),(0,l.Wm)(jt,{label:"Option 2",disabled:"true"})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[1].examples[2].code),1)]),(0,l._)("div",Y,[J,(0,l.Wm)(io,{"menu-align":"left"},{default:(0,l.w5)((function(){return[(0,l.Wm)(jt,{label:"Option 1"}),(0,l.Wm)(jt,{label:"Option 2",kind:"danger"})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["button"].components[1].examples[3].code),1)])])]),(0,l._)("div",Q,[X,(0,l._)("h2",ee,oe,512),ne,(0,l.Wm)(Ee,{rows:b.cGroups["data-table"].components[0].props},null,8,["rows"]),le,(0,l.Wm)(Re,{rows:b.cGroups["data-table"].components[0].slots},null,8,["rows"]),ie,(0,l.Wm)(yo,{rows:b.cGroups["data-table"].components[0].emits},null,8,["rows"]),ae,(0,l._)("div",se,[(0,l._)("div",re,[ce,(0,l.Wm)(Uo,{columns:b.data.table0.columns,rows:b.data.table0.rows,"rows-selectable":!0,"show-load-more":!0},null,8,["columns","rows"]),(0,l._)("code",ue,(0,i.zw)(b.cGroups["data-table"].components[0].examples[0].code),1),(0,l._)("code",de,"cols = "+(0,i.zw)(_.pretty(b.data.table0.columns)),1),(0,l._)("code",pe,"rows = "+(0,i.zw)(_.pretty(b.data.table0.rows)),1)]),(0,l._)("div",fe,[me,(0,l.Wm)(Uo,{columns:b.data.table1.columns,rows:b.data.table1.rows},null,8,["columns","rows"]),(0,l._)("code",he,(0,i.zw)(b.cGroups["data-table"].components[0].examples[1].code),1),(0,l._)("code",be,"rows = "+(0,i.zw)(_.pretty(b.data.table1.rows)),1)]),(0,l._)("div",we,[ge,ve,(0,l.Wm)(Uo,{columns:b.data.table0.columns,rows:b.data.table0.rows,"rows-selectable":!0,onRowSelected:_.doSomething},{"context-menu":(0,l.w5)((function(){return[(0,l.Wm)(jt,{label:"Option 1",onClick:t[3]||(t[3]=(0,n.iM)((function(){}),["stop"]))}),(0,l.Wm)(jt,{label:"Option 2",onClick:t[4]||(t[4]=(0,n.iM)((function(){}),["stop"]))}),(0,l.Wm)(jt,{label:"Option 3",onClick:t[5]||(t[5]=(0,n.iM)((function(){}),["stop"]))})]})),_:1},8,["columns","rows","onRowSelected"]),(0,l._)("code",ye,(0,i.zw)(b.cGroups["data-table"].components[0].examples[2].code),1)]),(0,l._)("div",ke,[_e,(0,l.Wm)(Uo,{columns:b.data.table3.columns,rows:b.data.table3.rows,"show-search":!0,"search-placeholder":"Search here...",search:b.data.table3.search,"onUpdate:search":t[6]||(t[6]=function(e){return b.data.table3.search=e})},{actions:(0,l.w5)((function(){return[(0,l.Wm)(mt,null,{default:(0,l.w5)((function(){return[(0,l.Uk)("Press Me!")]})),_:1}),(0,l.Wm)(mt,null,{default:(0,l.w5)((function(){return[(0,l.Uk)("Click Me!")]})),_:1})]})),_:1},8,["columns","rows","search"]),(0,l._)("code",xe,(0,i.zw)(b.cGroups["data-table"].components[0].examples[3].code),1)]),(0,l._)("div",We,[Se,(0,l.Wm)(Uo,{columns:b.data.table4.columns,rows:b.data.table4.rows,"show-search":!0,"search-fields":["sName","number"],"search-placeholder":"search-fields limits which properties the search applies to."},null,8,["columns","rows"]),(0,l._)("code",Ce,(0,i.zw)(b.cGroups["data-table"].components[0].examples[8].code),1),(0,l._)("code",Oe,"cols = "+(0,i.zw)(_.pretty(b.data.table4DocVersion.columns)),1)]),(0,l._)("div",De,[ze,Ve,(0,l.Wm)(Uo,{columns:b.data.table2.columns},{rows:(0,l.w5)((function(){return[(0,l.Wm)(vn,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)(" Testing ")]})),_:1}),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)(" We can put anything in here... ")]})),_:1}),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(pn,{count:4})]})),_:1})]})),_:1})]})),_:1},8,["columns"]),(0,l._)("code",Te,(0,i.zw)(b.cGroups["data-table"].components[0].examples[4].code),1)]),(0,l._)("div",$e,[Ge,(0,l.Wm)(Uo,null,{header:(0,l.w5)((function(){return[(0,l.Wm)(vn,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)(" Custom Header ")]})),_:1}),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)(" We can put anything in here too ")]})),_:1}),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(pn,{count:74})]})),_:1})]})),_:1})]})),rows:(0,l.w5)((function(){return[((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(b.data.table3.rows,(function(e){return(0,l.wg)(),(0,l.j4)(vn,{selectable:"",key:e},{default:(0,l.w5)((function(){return[(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)((0,i.zw)(e.fName),1)]})),_:2},1024),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Uk)((0,i.zw)(e.sName),1)]})),_:2},1024),(0,l.Wm)(qo,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(pn,{count:e.number},null,8,["count"])]})),_:2},1024)]})),_:2},1024)})),128))]})),_:1}),(0,l._)("code",Ie,(0,i.zw)(b.cGroups["data-table"].components[0].examples[5].code),1),(0,l._)("code",Ue,"rows = "+(0,i.zw)(_.pretty(b.data.table3.rows)),1)]),(0,l._)("div",Me,[Ne,(0,l.Wm)(Uo,{columns:b.data.table1.columns,rows:[]},null,8,["columns"]),(0,l._)("code",Fe,(0,i.zw)(b.cGroups["data-table"].components[0].examples[6].code),1)]),(0,l._)("div",Ae,[He,(0,l.Wm)(Uo,{columns:b.data.table1.columns,rows:b.data.table1.rows,loading:!0,"loading-message":"Loading Projects..."},null,8,["columns","rows"]),(0,l._)("code",Pe,(0,i.zw)(b.cGroups["data-table"].components[0].examples[7].code),1)])]),(0,l._)("h2",Be,je,512),qe,(0,l.Wm)(Ee,{rows:b.cGroups["data-table"].components[1].props},null,8,["rows"]),Ze,(0,l.Wm)(Re,{rows:b.cGroups["data-table"].components[1].slots},null,8,["rows"]),(0,l._)("h2",Le,Ke,512),Ye,(0,l.Wm)(Re,{rows:b.cGroups["data-table"].components[2].slots},null,8,["rows"])]),(0,l._)("div",Je,[Qe,(0,l._)("h2",Xe,tt,512),ot,(0,l.Wm)(Ee,{rows:b.cGroups["dialog"].components[0].props},null,8,["rows"]),nt,(0,l.Wm)(yo,{rows:b.cGroups["dialog"].components[0].emits},null,8,["rows"]),lt,(0,l.Wm)(Re,{rows:b.cGroups["dialog"].components[0].slots},null,8,["rows"]),it,(0,l._)("div",at,[(0,l._)("div",st,[(0,l.Wm)(mt,{onClick:t[7]||(t[7]=function(t){return e.$refs["dialog0"].show()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Show Dialog")]})),_:1}),(0,l.Wm)(Ln,{ref:"dialog0",header:"My Dialog Box","disable-primary":!b.models.dialog0},{default:(0,l.w5)((function(){return[rt,(0,l.Wm)(In,{placeholder:"My Text Input",modelValue:b.models.dialog0,"onUpdate:modelValue":t[8]||(t[8]=function(e){return b.models.dialog0=e})},null,8,["modelValue"])]})),_:1},8,["disable-primary"]),(0,l._)("code",null,(0,i.zw)(b.cGroups["dialog"].components[0].examples[0].code),1)]),(0,l._)("div",ct,[(0,l.Wm)(mt,{onClick:t[9]||(t[9]=function(t){return e.$refs["dialog1"].show()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Show Delete Dialog")]})),_:1}),(0,l.Wm)(Ln,{ref:"dialog1",header:"My Other Dialog Box","confirm-label":"Delete",kind:"danger"},{default:(0,l.w5)((function(){return[(0,l.Uk)(" Are you sure you want to delete this? ")]})),_:1},512),(0,l._)("code",null,(0,i.zw)(b.cGroups["dialog"].components[0].examples[1].code),1)]),(0,l._)("div",ut,[(0,l.Wm)(mt,{onClick:t[10]||(t[10]=function(t){return e.$refs["dialog2"].show()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Show Custom Dialog")]})),_:1}),(0,l.Wm)(Ln,{ref:"dialog2",header:"My Custom Dialog Box"},{default:(0,l.w5)((function(){return[(0,l.Uk)(" Note we can override the actions too, but need to include close logic ")]})),actions:(0,l.w5)((function(){return[(0,l.Wm)(mt,{kind:"secondary",onClick:t[11]||(t[11]=function(t){return e.$refs["dialog2"].close()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Secondary 1")]})),_:1}),(0,l.Wm)(mt,{kind:"secondary",onClick:t[12]||(t[12]=function(t){return e.$refs["dialog2"].close()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Secondary 2")]})),_:1}),(0,l.Wm)(mt,{onClick:t[13]||(t[13]=function(t){return e.$refs["dialog2"].close()})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Confirm")]})),_:1})]})),_:1},512),(0,l._)("code",null,(0,i.zw)(b.cGroups["dialog"].components[0].examples[2].code),1)])])]),(0,l._)("div",dt,[pt,(0,l._)("h2",ft,ht,512),bt,(0,l.Wm)(Ee,{rows:b.cGroups["help"].components[0].props},null,8,["rows"]),wt,(0,l._)("div",gt,[(0,l._)("div",vt,[yt,(0,l._)("h5",null,[(0,l.Uk)("Sample Header"),(0,l.Wm)(el,{text:"Hello World"})]),(0,l._)("code",null,(0,i.zw)(b.cGroups["help"].components[0].examples[0].code),1)]),(0,l._)("div",kt,[_t,(0,l.Wm)(el,{text:"Hello World",position:"bottom"}),(0,l._)("code",null,(0,i.zw)(b.cGroups["help"].components[0].examples[1].code),1)])])]),(0,l._)("div",xt,[Wt,(0,l._)("h2",St,Ot,512),Dt,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[0].props},null,8,["rows"]),zt,(0,l.Wm)(et,{rows:b.cGroups["input"].components[0].methods,onCallMethod:t[14]||(t[14]=function(e){var t;return null===(t=A.$refs["text-input"])||void 0===t?void 0:t[e]()})},null,8,["rows"]),Vt,(0,l.Wm)(Re,{rows:b.cGroups["input"].components[0].slots},null,8,["rows"]),Tt,(0,l._)("div",$t,[(0,l._)("div",Gt,[It,(0,l.Wm)(In,{placeholder:"Insert something here...",modelValue:b.models.textInput0,"onUpdate:modelValue":t[15]||(t[15]=function(e){return b.models.textInput0=e}),ref:"text-input"},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.textInput0)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[0].examples[0].code),1)]),(0,l._)("div",Ut,[Mt,(0,l.Wm)(In,{placeholder:"Insert something here...",modelValue:b.models.textInput1,"onUpdate:modelValue":t[16]||(t[16]=function(e){return b.models.textInput1=e}),error:"This is the error"},null,8,["modelValue"]),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[0].examples[3].code),1)]),(0,l._)("div",Nt,[Ft,(0,l.Wm)(In,{type:"password",placeholder:"Password goes here..."}),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[0].examples[1].code),1)]),(0,l._)("div",At,[Ht,(0,l.Wm)(In,{type:"email"}),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[0].examples[2].code),1)]),(0,l._)("div",Pt,[Bt,(0,l.Wm)(In,{type:"email"},{icon:(0,l.w5)((function(){return[(0,l.Wm)(al)]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[0].examples[3].code),1)])]),(0,l._)("h2",Et,qt,512),Zt,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[1].props},null,8,["rows"]),Lt,(0,l.Wm)(et,{rows:b.cGroups["input"].components[1].methods,onCallMethod:t[17]||(t[17]=function(e){var t;return null===(t=A.$refs["dropbox-input"])||void 0===t?void 0:t[e]()})},null,8,["rows"]),Rt,(0,l._)("div",Kt,[(0,l._)("div",Yt,[Jt,(0,l.Wm)(yl,{modelValue:b.models.dropdown0,"onUpdate:modelValue":t[18]||(t[18]=function(e){return b.models.dropdown0=e}),ref:"dropbox-input"},{default:(0,l.w5)((function(){return[(0,l.Wm)(vl,{label:"Option 1",value:1}),(0,l.Wm)(vl,{label:"Option 2",value:2}),(0,l.Wm)(vl,{label:"Option 3",value:3})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.dropdown0)+" ",1),(0,l.Wm)(yl,{modelValue:b.models.dropdown1,"onUpdate:modelValue":t[19]||(t[19]=function(e){return b.models.dropdown1=e}),ref:"dropbox-input",style:{width:"100px"}},{default:(0,l.w5)((function(){return[(0,l.Wm)(vl,{label:"Very long options",value:1}),(0,l.Wm)(vl,{label:"They're so long I don't know what to choose",value:2}),(0,l.Wm)(vl,{label:"This on is also long",value:3})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.dropdown1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[1].examples[0].code),1)]),(0,l._)("div",Qt,[Xt,(0,l.Wm)(yl,{modelValue:b.models.dropdown2,"onUpdate:modelValue":t[20]||(t[20]=function(e){return b.models.dropdown2=e}),placeholder:"Dropdown Button","dropdown-style":"button"},{default:(0,l.w5)((function(){return[(0,l.Wm)(vl,{label:"Option 1",value:1}),(0,l.Wm)(vl,{label:"Option 2",value:2}),(0,l.Wm)(vl,{label:"Option 3",value:3})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.dropdown2)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[1].examples[1].code),1)]),(0,l._)("div",eo,[to,(0,l.Wm)(yl,{modelValue:b.models.dropdown1,"onUpdate:modelValue":t[21]||(t[21]=function(e){return b.models.dropdown1=e}),placeholder:"Dropdown Button Right","dropdown-style":"button","options-align":"right"},{default:(0,l.w5)((function(){return[(0,l.Wm)(vl,{label:"Option 1",value:1}),(0,l.Wm)(vl,{label:"Option 2",value:2}),(0,l.Wm)(vl,{label:"Option 3",value:3})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.dropdown2)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[1].examples[2].code),1)]),(0,l._)("div",oo,[no,(0,l.Wm)(yl,{modelValue:b.models.dropdown0,"onUpdate:modelValue":t[22]||(t[22]=function(e){return b.models.dropdown0=e}),disabled:!0},{default:(0,l.w5)((function(){return[(0,l.Wm)(vl,{label:"Option 1",value:1}),(0,l.Wm)(vl,{label:"Option 2",value:2})]})),_:1},8,["modelValue"]),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[1].examples[3].code),1)])]),(0,l._)("h2",lo,ao,512),so,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[2].props},null,8,["rows"]),ro,(0,l.Wm)(et,{rows:b.cGroups["input"].components[2].methods,onCallMethod:t[23]||(t[23]=function(e){var t;return null===(t=A.$refs["checkbox-input"])||void 0===t?void 0:t[e]()})},null,8,["rows"]),co,(0,l._)("div",uo,[(0,l._)("div",po,[fo,(0,l.Wm)(kl,{label:"My Checkbox",modelValue:b.models.checkbox0,"onUpdate:modelValue":t[24]||(t[24]=function(e){return b.models.checkbox0=e}),ref:"checkbox-input"},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.checkbox0)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[2].examples[0].code),1)]),(0,l._)("div",mo,[ho,(0,l.Wm)(kl,{label:"My Checkbox",modelValue:b.models.checkbox1,"onUpdate:modelValue":t[25]||(t[25]=function(e){return b.models.checkbox1=e}),disabled:!0},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.checkbox1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[2].examples[0].code),1)]),(0,l._)("div",bo,[wo,(0,l.Wm)(kl,{label:"My Checkbox",modelValue:b.models.checkbox2,"onUpdate:modelValue":t[26]||(t[26]=function(e){return b.models.checkbox2=e})},{default:(0,l.w5)((function(){return[go]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.checkbox2)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[2].examples[1].code),1)])]),(0,l._)("h2",vo,ko,512),_o,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[3].props},null,8,["rows"]),xo,(0,l.Wm)(et,{rows:b.cGroups["input"].components[3].methods,onCallMethod:t[27]||(t[27]=function(e){var t;return null===(t=A.$refs["radio-group-input"])||void 0===t?void 0:t[e]()})},null,8,["rows"]),Wo,(0,l._)("div",So,[(0,l._)("div",Co,[Oo,(0,l.Wm)(_l,{ref:"radio-group-input",modelValue:b.models.radio0,"onUpdate:modelValue":t[28]||(t[28]=function(e){return b.models.radio0=e}),options:[{label:"Option 1",value:1},{label:"Option 2",value:2}]},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.radio0)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[3].examples[0].code),1)]),(0,l._)("div",Do,[zo,(0,l.Wm)(_l,{modelValue:b.models.radio1,"onUpdate:modelValue":t[29]||(t[29]=function(e){return b.models.radio1=e}),label:"We can also provide a label here",options:[{label:"Option 1",value:1,checked:!1},{label:"Option 2",value:2},{label:"Option 3",value:3},{label:"Option 4",value:4}],orientation:"grid",columns:3},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.radio1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[3].examples[1].code),1)]),(0,l._)("div",Vo,[To,(0,l.Wm)(_l,{modelValue:b.models.radio1,"onUpdate:modelValue":t[30]||(t[30]=function(e){return b.models.radio1=e}),label:"We can also provide a label here",options:[{label:"Option 1",value:1,checked:!1,description:"This is a description of this particular option"},{label:"Option 2",value:2,description:"Another description"}],orientation:"vertical"},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.radio1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[3].examples[2].code),1)]),(0,l._)("div",$o,[Go,(0,l.Wm)(_l,{modelValue:b.models.radio2,"onUpdate:modelValue":t[31]||(t[31]=function(e){return b.models.radio2=e}),label:"We can also provide a label here",options:[{label:"Option 1",value:1,checked:!1,description:"This is a description of this particular option"},{label:"Disabled Option",value:2,description:"Another description",disabled:!0}],orientation:"vertical"},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.radio2)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[3].examples[3].code),1)])]),(0,l._)("h2",Io,Mo,512),(0,l.Wm)(xl,{class:"description",content:b.cGroups["input"].components[4].description},null,8,["content"]),No,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[4].props},null,8,["rows"]),Fo,(0,l._)("div",Ao,[(0,l._)("div",Ho,[(0,l.Wm)(Sl,{modelValue:b.models.tiles0,"onUpdate:modelValue":t[32]||(t[32]=function(e){return b.models.tiles0=e})},{default:(0,l.w5)((function(){return[(0,l.Wm)(Wl,{value:"1",label:"Option 1",description:"Markdown supported in the description, consectetur adipiscing elit ut aliquam",price:"$15.00","price-interval":"/month"}),(0,l.Wm)(Wl,{value:"2",label:"Option 2",description:"\n * So we can offer bullet point lists\n* That help summarise the selection option",price:"$50.00","price-interval":"/month"})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.tiles0)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[4].examples[0].code),1)]),(0,l._)("div",Po,[(0,l.Wm)(Sl,{modelValue:b.models.tiles1,"onUpdate:modelValue":t[33]||(t[33]=function(e){return b.models.tiles1=e})},{default:(0,l.w5)((function(){return[(0,l.Wm)(Wl,{value:"1",label:"Option 1",description:"Markdown supported in the description, consectetur adipiscing elit ut aliquam"}),(0,l.Wm)(Wl,{value:"2",label:"Option 2",description:"\n * So we can offer bullet point lists\n* That help summarise the selection option"})]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.tiles1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[4].examples[1].code),1)]),(0,l._)("div",Bo,[(0,l.Wm)(Sl,null,{default:(0,l.w5)((function(){return[(0,l.Wm)(Wl,{onEdit:t[34]||(t[34]=function(e){return _.doSomething("Triggered edit on option 1")}),editable:!0,value:"1",label:"Option 1",description:"Markdown supported in the description.",price:"$15.00","price-interval":"/month",meta:[{key:"a",value:1},{key:"b",value:2}]},null,8,["description"]),(0,l.Wm)(Wl,{onEdit:t[35]||(t[35]=function(e){return _.doSomething("Triggered edit on option 2")}),editable:!0,value:"2",label:"Option 2",description:"\n * So we can offer bullet point lists\n* That help summarise the selection option",price:"$50.00","price-interval":"/month",meta:[{key:"c",value:3},{key:"d",value:4}]})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[4].examples[2].code),1)]),(0,l._)("div",Eo,[(0,l.Wm)(Sl,{modelValue:b.models.tiles3,"onUpdate:modelValue":t[36]||(t[36]=function(e){return b.models.tiles3=e})},{default:(0,l.w5)((function(){return[(0,l.Wm)(Wl,{value:1,label:"Option 1",description:"Markdown supported in the description, consectetur adipiscing elit ut aliquam",price:"$15.00","price-interval":"/month"}),(0,l.Wm)(Wl,{disabled:!0,value:2,label:"Option 2",description:"The second option is disabled.",price:"$50.00","price-interval":"/month"},null,8,["description"]),(0,l.Wm)(Wl,{value:3,label:"Option 3",description:"The third option.",price:"$50.00","price-interval":"/month"},null,8,["description"])]})),_:1},8,["modelValue"]),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[4].examples[3].code),1)])]),(0,l._)("h2",jo,Zo,512),(0,l.Wm)(xl,{class:"description",content:b.cGroups["input"].components[5].description},null,8,["content"]),Lo,(0,l.Wm)(Ee,{rows:b.cGroups["input"].components[5].props},null,8,["rows"]),Ro,(0,l.Wm)(Re,{rows:b.cGroups["input"].components[5].slots},null,8,["rows"]),Ko,(0,l.Wm)(yo,{rows:b.cGroups["input"].components[5].emits},null,8,["rows"]),Yo,(0,l._)("div",Jo,[(0,l._)("div",Qo,[Xo,(0,l.Wm)(Cl,{modelValue:b.models.switch0,"onUpdate:modelValue":t[37]||(t[37]=function(e){return b.models.switch0=e})},null,8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.switch0)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[5].examples[0].code),1)]),(0,l._)("div",en,[tn,(0,l.Wm)(Cl,{modelValue:b.models.switch1,"onUpdate:modelValue":t[38]||(t[38]=function(e){return b.models.switch1=e})},{default:(0,l.w5)((function(){return[(0,l.Wm)(Ol)]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.switch1)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[5].examples[1].code),1)]),(0,l._)("div",on,[nn,(0,l.Wm)(Cl,{modelValue:b.models.switch2,"onUpdate:modelValue":t[39]||(t[39]=function(e){return b.models.switch2=e}),disabled:!0},{default:(0,l.w5)((function(){return[(0,l.Wm)(Ol)]})),_:1},8,["modelValue"]),(0,l.Uk)(" "+(0,i.zw)(b.models.switch2)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[5].examples[2].code),1)]),(0,l._)("div",ln,[an,sn,rn,(0,l.Wm)(Cl,{modelValue:b.models.switch3,"onUpdate:modelValue":t[40]||(t[40]=function(e){return b.models.switch3=e}),mode:"async",loading:b.loading.switch3,onClick:_.onSwitchClick},{default:(0,l.w5)((function(){return[(0,l.Wm)(Ol)]})),_:1},8,["modelValue","loading","onClick"]),(0,l.Uk)(" "+(0,i.zw)(b.models.switch3)+" ",1),(0,l._)("code",null,(0,i.zw)(b.cGroups["input"].components[5].examples[3].code),1)])])]),(0,l._)("div",cn,[un,(0,l.Wm)(xl,{class:"description",content:b.cGroups["notifications"].description},null,8,["content"]),(0,l._)("h2",dn,fn,512),mn,(0,l.Wm)(Ee,{rows:b.cGroups["notifications"].components[0].props},null,8,["rows"]),hn,(0,l._)("div",bn,[(0,l._)("div",wn,[(0,l.Wm)(pn,{count:4}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[0].examples[0].code),1)])]),(0,l._)("h2",gn,yn,512),kn,(0,l.Wm)(Ee,{rows:b.cGroups["notifications"].components[1].props},null,8,["rows"]),_n,(0,l.Wm)(Re,{rows:b.cGroups["notifications"].components[1].slots},null,8,["rows"]),xn,(0,l.Wm)(yo,{rows:b.cGroups["notifications"].components[1].emits},null,8,["rows"]),Wn,(0,l._)("div",Sn,[(0,l._)("div",Cn,[(0,l.Wm)(te,{type:"info",message:"Hello World"}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[1].examples[0].code),1)]),(0,l._)("div",On,[(0,l.Wm)(te,{type:"warning",message:"Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna"}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[1].examples[1].code),1)]),(0,l._)("div",Dn,[(0,l.Wm)(te,{type:"confirmation",message:"Hello World"}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[1].examples[2].code),1)]),(0,l._)("div",zn,[(0,l.Wm)(te,{type:"confirmation",message:"Hello World",countdown:3e3}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[1].examples[3].code),1)]),(0,l._)("div",Vn,[(0,l.Wm)(te,{type:"info","show-close":!1},{message:(0,l.w5)((function(){return[(0,l.Uk)(" We can also define content using a slot instead, and use the actions slot to add our own buttons ")]})),actions:(0,l.w5)((function(){return[(0,l.Wm)(mt,{onClick:t[41]||(t[41]=function(e){return _.doSomething("Slot example")})},{default:(0,l.w5)((function(){return[(0,l.Uk)("Example")]})),_:1})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["notifications"].components[1].examples[4].code),1)])])]),(0,l._)("div",Tn,[$n,(0,l.Wm)(xl,{class:"description",content:b.cGroups["tabs"].description},null,8,["content"]),(0,l._)("h2",Gn,Un,512),Mn,(0,l.Wm)(Ee,{rows:b.cGroups["tabs"].components[0].props},null,8,["rows"]),Nn,(0,l.Wm)(yo,{rows:b.cGroups["tabs"].components[0].emits},null,8,["rows"]),Fn,(0,l._)("div",An,[(0,l._)("div",Hn,[Pn,(0,l.Wm)(zl,{orientation:"horizontal"},{default:(0,l.w5)((function(){return[(0,l.Wm)(Dl,{label:"Option 1",to:""}),(0,l.Wm)(Dl,{label:"Option 2",to:""}),(0,l.Wm)(Dl,{label:"Option 3",to:""})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["tabs"].components[0].examples[0].code),1)]),(0,l._)("div",Bn,[En,(0,l.Wm)(zl,{orientation:"vertical"},{default:(0,l.w5)((function(){return[(0,l.Wm)(Dl,{label:"Option 1",to:""}),(0,l.Wm)(Dl,{label:"Option 2",to:""}),(0,l.Wm)(Dl,{label:"Option 3",to:""})]})),_:1}),(0,l._)("code",null,(0,i.zw)(b.cGroups["tabs"].components[0].examples[1].code),1)])])]),(0,l._)("div",jn,[qn,(0,l.Wm)(xl,{class:"description",content:b.cGroups["utilities"].description},null,8,["content"]),(0,l._)("h2",Zn,Rn,512),Kn,(0,l.Wm)(Ee,{rows:b.cGroups["utilities"].components[0].props},null,8,["rows"]),Yn,(0,l._)("div",Jn,[(0,l._)("div",Qn,[(0,l.Wm)(Vl,{value:!0}),(0,l._)("code",null,(0,i.zw)(b.cGroups["utilities"].components[0].examples[0].code),1)])]),(0,l._)("h2",Xn,tl,512),ol,(0,l.Wm)(Ee,{rows:b.cGroups["utilities"].components[1].props},null,8,["rows"])]),(0,l._)("div",nl,[ll,(0,l.Wm)(xl,{class:"description",content:b.dGroups["tooltip"].description},null,8,["content"]),(0,l._)("h2",il,sl,512),rl,(0,l.Wm)(Ee,{rows:b.dGroups["tooltip"].components[0].props},null,8,["rows"]),cl,(0,l._)("div",ul,[(0,l._)("div",dl,[pl,(0,l.wy)(((0,l.wg)(),(0,l.iD)("label",null,[(0,l.Uk)("Hover for Default Tooltip")])),[[Tl,"Hello World"]]),(0,l._)("code",null,(0,i.zw)(b.dGroups["tooltip"].components[0].examples[0].code),1)]),(0,l._)("div",fl,[ml,(0,l.wy)((0,l.Wm)(Vl,{value:!0},null,512),[[Tl,"Hello World","left"]]),(0,l._)("code",null,(0,i.zw)(b.dGroups["tooltip"].components[0].examples[1].code),1)]),(0,l._)("div",hl,[bl,(0,l.wy)(((0,l.wg)(),(0,l.j4)(mt,null,{default:(0,l.w5)((function(){return[(0,l.Uk)("Hover for Top Tooltip")]})),_:1})),[[Tl,"Hello World","top"]]),(0,l._)("code",null,(0,i.zw)(b.dGroups["tooltip"].components[0].examples[2].code),1)]),(0,l._)("div",wl,[gl,(0,l.wy)(((0,l.wg)(),(0,l.j4)(pn,{count:4},{default:(0,l.w5)((function(){return[(0,l.Uk)("Hover for Bottom Tooltip")]})),_:1})),[[Tl,"Hello World","bottom"]]),(0,l._)("code",null,(0,i.zw)(b.dGroups["tooltip"].components[0].examples[3].code),1)])])])])],2)],64)}var yl=o(124),kl=o(8534),_l=(o(5306),o(8862),o(7658),o(3843),o(3710),o(561),o(2564),{class:"docs-table props-table"}),xl=(0,l._)("tr",null,[(0,l._)("th",null,"Event"),(0,l._)("th",null,"Example"),(0,l._)("th",null,"Description")],-1);function Wl(e,t,o,n,a,s){return(0,l.wg)(),(0,l.iD)("table",_l,[(0,l._)("tbody",null,[xl,((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(o.rows,(function(e){return(0,l.wg)(),(0,l.iD)("tr",{key:e.key},[(0,l._)("th",null,[(0,l._)("pre",null,(0,i.zw)(e.event),1)]),(0,l._)("td",null,[(0,l._)("pre",null,(0,i.zw)(e.example||"no example"),1)]),(0,l._)("td",null,(0,i.zw)(e.description),1)])})),128))])])}const Sl={name:"EventsTable",props:{rows:Array}};var Cl=o(3744);const Ol=(0,Cl.Z)(Sl,[["render",Wl]]),Dl=Ol;var zl={class:"docs-table props-table"},Vl=(0,l._)("tr",null,[(0,l._)("th",null,"Method"),(0,l._)("th",null,"Description"),(0,l._)("th",null,"Try")],-1);function Tl(e,t,o,n,a,s){var r=(0,l.up)("ff-button");return(0,l.wg)(),(0,l.iD)("table",zl,[(0,l._)("tbody",null,[Vl,((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(o.rows,(function(e){return(0,l.wg)(),(0,l.iD)("tr",{key:e.key},[(0,l._)("th",null,[(0,l._)("pre",null,(0,i.zw)(e.name),1)]),(0,l._)("td",null,(0,i.zw)(e.description),1),(0,l._)("td",null,[(0,l.Wm)(r,{onClick:function(t){return s.callMethod(e.name)}},{default:(0,l.w5)((function(){return[(0,l.Uk)((0,i.zw)(e.name),1)]})),_:2},1032,["onClick"])])])})),128))])])}const $l={name:"MethodsTable",props:{rows:Array},methods:{callMethod:function(e){this.$emit("callMethod",e)}}},Gl=(0,Cl.Z)($l,[["render",Tl]]),Il=Gl;var Ul={class:"docs-table props-table"},Ml=(0,l._)("tr",null,[(0,l._)("th",null,"Property"),(0,l._)("th",null,"Default"),(0,l._)("th",null,"Description")],-1);function Nl(e,t,o,n,a,s){return(0,l.wg)(),(0,l.iD)("table",Ul,[(0,l._)("tbody",null,[Ml,((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(o.rows,(function(e){return(0,l.wg)(),(0,l.iD)("tr",{key:e.key},[(0,l._)("th",null,[(0,l._)("pre",null,(0,i.zw)(e.key),1)]),(0,l._)("td",null,[(0,l._)("pre",null,(0,i.zw)(e["default"]||"no default"),1)]),(0,l._)("td",null,(0,i.zw)(e.description),1)])})),128))])])}const Fl={name:"PropsTable",props:{rows:Array}},Al=(0,Cl.Z)(Fl,[["render",Nl]]),Hl=Al;var Pl={class:"docs-table props-table"},Bl=(0,l._)("tr",null,[(0,l._)("th",null,"Slot Name"),(0,l._)("th",null,"Description")],-1);function El(e,t,o,n,a,s){return(0,l.wg)(),(0,l.iD)("table",Pl,[(0,l._)("tbody",null,[Bl,((0,l.wg)(!0),(0,l.iD)(l.HY,null,(0,l.Ko)(o.rows,(function(e){return(0,l.wg)(),(0,l.iD)("tr",{key:e.name},[(0,l._)("th",null,[(0,l._)("pre",null,(0,i.zw)(e.name),1)]),(0,l._)("td",null,(0,i.zw)(e.description),1)])})),128))])])}const jl={name:"SlotsTable",props:{rows:Array}},ql=(0,Cl.Z)(jl,[["render",El]]),Zl=ql,Ll=JSON.parse('{"name":"Buttons","id":"buttons","components":[{"name":"ff-button","examples":[{"code":"