Tabs

<script setup lang="ts">
import { toRef, useId } from 'vue'
import { provideTabs } from './context'

const props = withDefaults(
  defineProps<{
    /** The tab that starts selected when you are not using v-model. */
    defaultValue?: string
    orientation?: 'horizontal' | 'vertical'
  }>(),
  { orientation: 'horizontal' },
)

const value = defineModel<string>()
if (value.value === undefined && props.defaultValue !== undefined) value.value = props.defaultValue

provideTabs({
  value,
  orientation: toRef(props, 'orientation'),
  baseId: useId(),
  select: (next) => {
    value.value = next
  },
})
</script>

<template>
  <div class="er-tabs" :data-orientation="orientation">
    <slot />
  </div>
</template>

<style>
@layer components {
  .er-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .er-tabs[data-orientation='vertical'] {
    flex-direction: row;
  }

  .er-tabs-list {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--er-radius-lg);
    background: var(--er-muted);
    color: var(--er-muted-foreground);
    overflow-x: auto;
  }

  .er-tabs[data-orientation='vertical'] .er-tabs-list {
    flex-direction: column;
    align-items: stretch;
  }

  .er-tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--er-radius-md);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--er-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--er-duration),
      color var(--er-duration),
      box-shadow var(--er-duration);
  }

  .er-tabs-trigger:hover {
    color: var(--er-foreground);
  }

  .er-tabs-trigger[data-state='active'] {
    border-color: light-dark(transparent, var(--er-input));
    background: light-dark(var(--er-background), oklch(1 0 0 / 8%));
    color: var(--er-foreground);
    box-shadow: var(--er-shadow-sm);
  }

  .er-tabs-trigger:focus-visible,
  .er-tabs-content:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: 2px;
  }

  .er-tabs-trigger:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .er-tabs-content {
    flex: 1;
    min-width: 0;
    border-radius: var(--er-radius-md);
  }
}
</style>

<script setup lang="ts">
import { panelId, tabId, useTabs } from './context'

defineProps<{
  value: string
}>()

const tabs = useTabs()
</script>

<template>
  <div
    v-if="tabs.value.value === value"
    :id="panelId(tabs.baseId, value)"
    role="tabpanel"
    tabindex="0"
    class="er-tabs-content"
    :aria-labelledby="tabId(tabs.baseId, value)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { arrowTarget } from '../../lib/collection'
import { useTabs } from './context'

const tabs = useTabs()

function onKeydown(event: KeyboardEvent) {
  const list = event.currentTarget as HTMLElement
  const items = Array.from(list.querySelectorAll<HTMLElement>('[role="tab"]:not(:disabled)'))
  const next = arrowTarget(event, items, tabs.orientation.value)
  if (!next) return
  event.preventDefault()
  next.focus()
  next.click()
}
</script>

<template>
  <div role="tablist" class="er-tabs-list" :aria-orientation="tabs.orientation.value" @keydown="onKeydown">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { panelId, tabId, useTabs } from './context'

const props = defineProps<{
  value: string
  disabled?: boolean
}>()

const tabs = useTabs()
const selected = computed(() => tabs.value.value === props.value)
</script>

<template>
  <button
    :id="tabId(tabs.baseId, value)"
    type="button"
    role="tab"
    class="er-tabs-trigger"
    :aria-selected="selected"
    :aria-controls="panelId(tabs.baseId, value)"
    :tabindex="selected ? 0 : -1"
    :data-state="selected ? 'active' : 'inactive'"
    :disabled="disabled"
    @click="tabs.select(value)"
  >
    <slot />
  </button>
</template>

import type { Ref } from 'vue'
import { createContext } from '../../lib/context'

export interface TabsContext {
  value: Ref<string | undefined>
  orientation: Ref<'horizontal' | 'vertical'>
  baseId: string
  select: (value: string) => void
}

export const [provideTabs, useTabs] = createContext<TabsContext>('Tabs')

export const tabId = (baseId: string, value: string) => `${baseId}-tab-${value.replace(/\s+/g, '-')}`
export const panelId = (baseId: string, value: string) => `${baseId}-panel-${value.replace(/\s+/g, '-')}`

/** Tabs — switch between panels, with arrow-key navigation. Horizontal or vertical. */
export { default as Tabs } from './Tabs.vue'
export { default as TabsContent } from './TabsContent.vue'
export { default as TabsList } from './TabsList.vue'
export { default as TabsTrigger } from './TabsTrigger.vue'