UNPKG

@aotearoan/neon

Version:

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

3 lines (2 loc) 1.72 kB
"use strict";const a=require("./NeonTabs.cjs.js"),e=require("vue"),r=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i=["id","aria-controls","aria-selected","onClick"],c=["id","tabindex","onKeydown"],u={key:1,class:"neon-tabs__menu-label"};function m(n,k,y,p,_,b){const l=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-tabs--${n.size}`,`neon-tabs--${n.color}`,`neon-tabs--${n.tabsStyle}`],"neon-tabs"]),role:"tablist"},[e.createElementVNode("div",{class:e.normalizeClass([{"neon-tabs__menu-items--underlined":n.underline},"neon-tabs__menu-items"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,(o,t)=>(e.openBlock(),e.createElementBlock("div",{id:`${o.key}Button`,key:o.key,"aria-controls":o.key,"aria-selected":o.key===n.modelValue,class:e.normalizeClass([{"neon-tabs__menu-item--selected":o.key===n.modelValue},"neon-tabs__menu-item"]),role:"tab",tabindex:"-1",onClick:s=>o.key!==n.modelValue&&n.onClick(o.key)},[e.createElementVNode("div",{id:`${o.key}ButtonContainer`,tabindex:o.key===n.modelValue?0:-1,class:"neon-tabs__menu-item-container",onKeydown:[e.withKeys(s=>n.onClick(n.tabs[t+1===n.tabs.length?0:t+1].key,!0),["right"]),e.withKeys(s=>n.onClick(n.tabs[t===0?n.tabs.length-1:t-1].key,!0),["left"])]},[o.icon?(e.openBlock(),e.createBlock(l,{key:0,name:o.icon,class:"neon-tabs__menu-icon"},null,8,["name"])):e.createCommentVNode("",!0),o.label?(e.openBlock(),e.createElementBlock("span",u,e.toDisplayString(o.label),1)):e.createCommentVNode("",!0)],40,c)],10,i))),128))],2),e.renderSlot(n.$slots,"default")],2)}const d=r(a,[["render",m]]);module.exports=d; //# sourceMappingURL=NeonTabs.vue.cjs.js.map