UNPKG

@dvcol/neo-svelte

Version:

Neomorphic ui library for svelte 5

54 lines (53 loc) 1.98 kB
import type { Snippet } from 'svelte'; import type { NeoButtonProps } from '../buttons/neo-button.model.js'; import type { OnChange } from './neo-tabs.model.js'; import type { HTMLUseProps } from '../utils/action.utils.js'; import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js'; export type TabId = string | number | symbol; export type NeoTabProps<Id extends TabId, Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = { /** * Snippet to display as the tab content. */ children?: Snippet<[{ active: boolean; tabId: Id; value?: unknown; }]>; /** * The HTML tag to use for the tab. * @default 'div' */ tag?: Tag | keyof HTMLElementTagNameMap; /** * A unique identifier for the tab. * If none is provided, the tab will be assigned a random id. */ tabId?: Id; /** * Optional value to associate with the tab. */ value?: Value; /** * Whether the tab should be registered with the parent `NeoTabs` context. * If false, the tab will not be included in the `NeoTabs` context. * If true, the tab will be registered only if another tab with the same id is not already registered. * If `force`, the tab will be registered even if another tab with the same id is already registered. * * @default true * @see {@link NeoTabContext} */ register?: boolean | 'force'; /** * If true, the tab will display a close button that broadcasts the `onclose` event. * Note: The event will also be emitted to a parent `NeoTabs` if present. */ close?: boolean; /** * Event handler that fires when the close button is clicked. */ onclose?: OnChange<Id, Value>; /** * Optional props to pass to the tab container. */ tabProps?: HTMLNeoBaseElement & HTMLUseProps; } & Omit<NeoButtonProps, 'value' | 'children' | 'ref' | 'tag'> & HTMLRefProps;