feat(Tabs): control selected index (#490)

docs/components/content/examples/TabsExampleChange.vue

@@ -0,0 +1,22 @@
+<script setup>
+const items = [{
+ label: 'Tab1',
+ content: 'This is the content shown for Tab1'
+}, {
+ label: 'Tab2',
+ content: 'And, this is the content for Tab2'
+}, {
+ label: 'Tab3',
+ content: 'Finally, this is the content for Tab3'
+}]
+
+function onChange (index) {
+ const item = items[index]
+
+ alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+ <UTabs :items="items" @change="onChange" />
+</template>

docs/components/content/examples/TabsExampleVModel.vue

@@ -0,0 +1,34 @@
+<script setup>
+const items = [{
+ label: 'Tab1',
+ content: 'This is the content shown for Tab1'
+}, {
+ label: 'Tab2',
+ content: 'And, this is the content for Tab2'
+}, {
+ label: 'Tab3',
+ content: 'Finally, this is the content for Tab3'
+}]
+
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed({
+ get () {
+ const index = items.findIndex((item) => item.label === route.query.tab)
+ if (index === -1) {
+ return 0
+ }
+
+ return index
+ },
+ set (value) {
+ // Hash is specified here to prevent the page from scrolling to the top
+ router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
+ }
+})
+</script>
+
+<template>
+ <UTabs v-model="selected" :items="items" />
+</template>

docs/content/5.navigation/4.tabs.md

@@ -83,6 +83,78 @@ const items = [...]
 ```
 ::
 
+::callout{icon="i-heroicons-exclamation-triangle"}
+ This will have no effect if you are using a `v-model` to control the selected index.
+::
+
+### Listen to changes :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+
+You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
+
+::component-example
+#default
+:tabs-example-change{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+function onChange (index) {
+ const item = items[index]
+
+ alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+ <UTabs :items="items" @change="onChange" />
+</template>
+```
+::
+
+### Control the selected index :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+
+Use a `v-model` to control the selected index.
+
+::component-example
+#default
+:tabs-example-v-model{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed({
+ get () {
+ const index = items.findIndex((item) => item.label === route.query.tab)
+ if (index === -1) {
+ return 0
+ }
+
+ return index
+ },
+ set (value) {
+ // Hash is specified here to prevent the page from scrolling to the top
+ router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
+ }
+})
+</script>
+
+<template>
+ <UTabs v-model="selected" :items="items" />
+</template>
+```
+::
+
+::callout{icon="i-heroicons-information-circle"}
+In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
+::
+
 ## Slots
 
 You can use slots to customize the buttons and items content of the Accordion.

src/runtime/components/navigation/Tabs.vue

@@ -1,6 +1,7 @@
 <template>
- <HTabGroup :vertical="orientation === 'vertical'" :default-index="defaultIndex" as="div" :class="ui.wrapper" @change="onChange">
+ <HTabGroup :vertical="orientation === 'vertical'" :selected-index="selectedIndex" as="div" :class="ui.wrapper" @change="onChange">
  <HTabList
+ ref="listRef"
  :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, ui.list.width, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
  :style="[orientation === 'horizontal' && `grid-template-columns: repeat(${items.length}, minmax(0, 1fr))`]"
  >
@@ -40,9 +41,10 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, onMounted, defineComponent } from 'vue'
+import { ref, computed, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
+import { useResizeObserver } from '@vueuse/core'
 import { defu } from 'defu'
 import type { TabItem } from '../../types/tabs'
 import { useAppConfig } from '#imports'
@@ -61,6 +63,10 @@ export default defineComponent({
  HTabPanel
  },
  props: {
+ modelValue: {
+ type: Number,
+ default: undefined
+ },
  orientation: {
  type: String as PropType<'horizontal' | 'vertical'>,
  default: 'horizontal',
@@ -79,18 +85,22 @@ export default defineComponent({
  default: () => appConfig.ui.tabs
  }
  },
- setup (props) {
+ emits: ['update:modelValue', 'change'],
+ setup (props, { emit }) {
  // TODO: Remove
  const appConfig = useAppConfig()
 
  const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defu({}, props.ui, appConfig.ui.tabs))
 
+ const listRef = ref<HTMLElement>()
  const itemRefs = ref<HTMLElement[]>([])
  const markerRef = ref<HTMLElement>()
 
+ const selectedIndex = ref(props.modelValue || props.defaultIndex)
+
  // Methods
 
- function onChange (index) {
+ function calcMarkerSize (index: number) {
  // @ts-ignore
  const tab = itemRefs.value[index]?.$el
  if (!tab) {
@@ -103,13 +113,35 @@ export default defineComponent({
  markerRef.value.style.height = `${tab.offsetHeight}px`
  }
 
- onMounted(() => onChange(props.defaultIndex))
+ function onChange (index) {
+ selectedIndex.value = index
+
+ emit('change', index)
+
+ if (props.modelValue !== undefined) {
+ emit('update:modelValue', index)
+ }
+
+ calcMarkerSize(index)
+ }
+
+ useResizeObserver(listRef, () => {
+ calcMarkerSize(selectedIndex.value)
+ })
+
+ watch(() => props.modelValue, (value) => {
+ selectedIndex.value = value
+ })
+
+ onMounted(() => calcMarkerSize(selectedIndex.value))
 
  return {
  // eslint-disable-next-line vue/no-dupe-keys
  ui,
+ listRef,
  itemRefs,
  markerRef,
+ selectedIndex,
  onChange
  }
  }