<script setup lang="ts">
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------

/**
 * @summary Tab groups organize content into a container that shows one section at a time.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
 * @status stable
 * @since 2.1.0
 *
 * @dependency syn-icon-button
 *
 * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
 *
 * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
 * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart body - The tab group's body where tab panels are slotted in.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 * @csspart scroll-button__base - The scroll button's exported `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --indicator-width - The width of the active tab indicator.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/tab-group/tab-group.js';

import type { SynTabShowEvent } from '@synergy-design-system/components';
import type { SynTabHideEvent } from '@synergy-design-system/components';
import type SynTabGroup from '@synergy-design-system/components/components/tab-group/tab-group.component.js';

// DOM Reference to the element
const nativeElement = ref<SynTabGroup>();

defineExpose({
  nativeElement,
});

// Map attributes
const props = defineProps<{
  /**
   * The placement of the tabs.
   */
  placement?: SynTabGroup['placement'];

  /**
* When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
* When set to
manual, the tab will receive focus but will not show until the user presses spacebar or enter.
 */
  activation?: SynTabGroup['activation'];

  /**
   * Disables the scroll arrows that appear when tabs overflow.
   */
  noScrollControls?: SynTabGroup['noScrollControls'];

  /**
   * Draws the tab group as a contained element.
   */
  contained?: SynTabGroup['contained'];

  /**
   * Draws the tab group with edges instead of roundings.
   * Takes only effect if used with the 'contained' property
   */
  sharp?: SynTabGroup['sharp'];

  /**
   * Prevent scroll buttons from being hidden when inactive.
   */
  fixedScrollControls?: SynTabGroup['fixedScrollControls'];
}>();

// Make sure prop binding only forwards the props that are actually there.
// This is needed because :param="param" also adds an empty attribute
// when using web-components, which breaks optional arguments like size in SynInput
// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
const visibleProps = computed(() =>
  Object.fromEntries(
    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
  ),
);

// Map events
defineEmits<{
  /**
   * Emitted when a tab is shown.
   * The payload of the event returns the "panel" attribute of the shown tab.
   */
  'syn-tab-show': [e: SynTabShowEvent];

  /**
   * Emitted when a tab is hidden.
   * The payload of the event returns the "panel" attribute of the hidden tab.
   */
  'syn-tab-hide': [e: SynTabHideEvent];
}>();
</script>

<script lang="ts">
export type { SynTabShowEvent } from '@synergy-design-system/components';
export type { SynTabHideEvent } from '@synergy-design-system/components';
</script>

<template>
  <syn-tab-group
    @syn-tab-show="$emit('syn-tab-show', $event)"
    @syn-tab-hide="$emit('syn-tab-hide', $event)"
    v-bind="visibleProps"
    ref="nativeElement">
    <slot></slot>
  </syn-tab-group>
</template>
