Quick Notes

• How about adding scroll snapping when left-right arrows are clicked or x-scrolled via mouse 😍

Things to take care of

• Vertical tabs
• Allow tabs on right & bottom along with left & top.

Proposed API

<!-- Maybe we can use provide inject so we don't have to pass v-model twice if AView is used in default slot of `ATabs` -->
<ATabs :items="['Account', 'Notifications', 'Settings']" v-model="activeTab">
  <AViews v-model="activeTab">
	  <AView value="account">Account</AView>
	  <AView value="notifications">Notifications</AView>
	  <AView value="settings">Settings</AView>
  </AViews>
</ATabs>

Props

• modelValue
• vertical: Set tabs direction to vertical
• items: Tabs list can also accept array of objects than can have icons
• fluid: takes whole space justify="stretch" does the same
• justify: start, center, end, stretch PR welcome

ATab Props

• title
• icon
• appendIcon
• disabled

Slots

We are focusing on DX here and rendering AViews in the default slot as this is common usage. Big reason is you don't have to create a separate state for tracking the active tab and binding it to activate the view like other frameworks 🥂

• default: render AViews
• tabs: render tabs

ATab Slots

• Append & prepend slots to adding actions like close button