mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 13:51:28 +04:00
57 lines
2.3 KiB
Plaintext
57 lines
2.3 KiB
Plaintext
---
|
|
import Icon from './Icon.astro'
|
|
import { includeArgCount } from '@shared/lib/include-args'
|
|
|
|
interface Props {
|
|
items?: string[]
|
|
icons?: string[]
|
|
disabled?: number[]
|
|
hover?: string
|
|
default?: number
|
|
vertical?: boolean
|
|
size?: string
|
|
fullWidth?: boolean
|
|
name?: string
|
|
class?: string
|
|
}
|
|
|
|
const { items, icons, disabled, hover = '', default: defaultIndex = 1, vertical, size, fullWidth, name, class: className } = Astro.props
|
|
|
|
// When `size` is omitted, append `nav-{argCount}` (e.g. nav-1, nav-2). An explicit size uses nav-sm/nav-lg.
|
|
const includeArgKeys = ['items', 'icons', 'disabled', 'hover', 'default', 'vertical', 'size', 'fullWidth', 'class', 'name'] as const
|
|
const argCount = includeArgCount(Astro.props as Record<string, unknown>, includeArgKeys)
|
|
const sizeToken = size ? `nav-${size}` : `nav-${argCount}`
|
|
|
|
const itemsArr = items ?? []
|
|
const iconsArr = icons ?? []
|
|
const count = Math.max(itemsArr.length, iconsArr.length)
|
|
|
|
const navClasses = ['nav', 'nav-segmented', vertical && 'nav-segmented-vertical', sizeToken, fullWidth && 'w-100', className]
|
|
|
|
const rows = Array.from({ length: count }, (_, i) => {
|
|
const forloopIndex = i + 1
|
|
const index = String(forloopIndex)
|
|
const isDisabled = disabled?.includes(forloopIndex) ?? false
|
|
const isDefault = forloopIndex === defaultIndex
|
|
const linkClasses = ['nav-link', isDisabled && 'disabled', isDefault && !name && 'active', hover === index && 'hover']
|
|
return { forloopIndex, index, isDisabled, isDefault, linkClasses, icon: iconsArr[i], item: itemsArr[i] }
|
|
})
|
|
---
|
|
|
|
<nav class:list={navClasses} role={name ? undefined : 'tablist'} aria-orientation={!name && vertical ? 'vertical' : undefined}>
|
|
{
|
|
rows.map((row) => {
|
|
const Element = name ? 'label' : 'button'
|
|
return (
|
|
<Fragment>
|
|
{name && <input type="radio" class="nav-link-input" name={name} id={`segmented-${name}-${row.index}`} checked={row.isDefault} />}
|
|
<Element for={name ? `segmented-${name}-${row.index}` : undefined} class:list={row.linkClasses} role={name ? undefined : 'tab'} data-bs-toggle={name ? undefined : 'tab'} aria-selected={name ? undefined : row.isDefault ? 'true' : 'false'} aria-disabled={row.isDisabled ? 'true' : undefined}>
|
|
{row.icon && <Icon name={row.icon} class="nav-link-icon" />}
|
|
{row.item && row.item}
|
|
</Element>
|
|
</Fragment>
|
|
)
|
|
})
|
|
}
|
|
</nav>
|