mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
62 lines
2.7 KiB
Plaintext
62 lines
2.7 KiB
Plaintext
---
|
|
import Icon from './Icon.astro'
|
|
|
|
/** core/scss/ui/_switch-icon.scss `.switch-icon-{variant}` transition classes */
|
|
type SwitchIconVariant = 'fade' | 'scale' | 'flip' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'slide-start' | 'slide-end'
|
|
|
|
interface Props {
|
|
icon?: string
|
|
/** icon shown in the on state; defaults to the filled variant of `icon` */
|
|
activeIcon?: string | undefined
|
|
/** text-{activeColor} on the switched-on icon */
|
|
activeColor?: string
|
|
variant?: SwitchIconVariant | undefined
|
|
/** initial state: active + aria-pressed="true" */
|
|
active?: boolean | undefined
|
|
/** switch-icon-loading + aria-busy: spinner instead of the icons */
|
|
loading?: boolean | undefined
|
|
/** wraps the switch in a `btn btn-action`, which then carries the toggle, hover and focus */
|
|
action?: boolean | undefined
|
|
/** accessible name of the toggle; defaults to a label matching the icon */
|
|
ariaLabel?: string | undefined
|
|
class?: string | undefined
|
|
/** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { icon = 'heart', activeIcon, activeColor = 'red', variant, active, loading, action, ariaLabel, class: className, ...rest } = Astro.props
|
|
|
|
const defaultLabels: Record<string, string> = { 'heart': 'Like', 'star': 'Add to favorites', 'bookmark': 'Bookmark', 'bell': 'Notify me', 'thumb-up': 'Vote up' }
|
|
const label = ariaLabel ?? defaultLabels[icon] ?? 'Toggle'
|
|
|
|
// Without an activeIcon, star/heart force the filled variant; otherwise no extra class.
|
|
const resolvedIconBClass = !activeIcon && (icon === 'star' || icon === 'heart') ? 'icon-filled' : undefined
|
|
|
|
const switchClass = ['switch-icon', variant && `switch-icon-${variant}`, active && 'active', loading && 'switch-icon-loading']
|
|
const rootAttrs = { 'data-bs-toggle': 'switch-icon', 'aria-pressed': active ? ('true' as const) : ('false' as const), 'aria-busy': loading ? ('true' as const) : undefined, 'aria-label': label, ...rest }
|
|
---
|
|
|
|
{
|
|
action ? (
|
|
<button type="button" class:list={['btn btn-action', className]} {...rootAttrs}>
|
|
<span class:list={switchClass}>
|
|
<span class="switch-icon-a">
|
|
<Icon name={icon} />
|
|
</span>
|
|
<span class={`switch-icon-b text-${activeColor}`}>
|
|
<Icon name={activeIcon ?? icon} class={resolvedIconBClass} />
|
|
</span>
|
|
</span>
|
|
</button>
|
|
) : (
|
|
<button type="button" class:list={[...switchClass, className]} {...rootAttrs}>
|
|
<span class="switch-icon-a text-muted">
|
|
<Icon name={icon} />
|
|
</span>
|
|
<span class={`switch-icon-b text-${activeColor}`}>
|
|
<Icon name={activeIcon ?? icon} class={resolvedIconBClass} />
|
|
</span>
|
|
</button>
|
|
)
|
|
}
|