You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.7 KiB
74 lines
1.7 KiB
<script lang="ts">
|
|
/**
|
|
* # Collapsible Trigger
|
|
*
|
|
* Botón que alterna el estado de apertura del Collapsible.
|
|
*
|
|
* ## Uso
|
|
* ```svelte
|
|
* <Collapsible bind:open={isOpen}>
|
|
* <CollapsibleTrigger>
|
|
* {#if isOpen} ▲ {:else} ▼ {/if}
|
|
* Toggle
|
|
* </CollapsibleTrigger>
|
|
* <CollapsibleContent>...</CollapsibleContent>
|
|
* </Collapsible>
|
|
* ```
|
|
*
|
|
* ## Propiedades
|
|
* - `disabled`: boolean - Deshabilita el trigger
|
|
* - `id`: string - ID del elemento
|
|
*
|
|
* ## Selectores CSS
|
|
* ```
|
|
* [data-collapsible-trigger] → Botón trigger
|
|
* [data-state="open"] → Estado abierto del collapsible
|
|
* [data-state="closed"] → Estado cerrado del collapsible
|
|
* [data-disabled] → Presente cuando disabled=true
|
|
* ```
|
|
*
|
|
* ## Estilos
|
|
* Renderiza un elemento `<button>` con atributos ARIA apropiados.
|
|
*/
|
|
import {
|
|
readableActive,
|
|
writableActive,
|
|
mergeProps,
|
|
createId
|
|
} from '$terra/utils';
|
|
import type { CollapsibleTriggerProps } from "../types";
|
|
import { CollapsibleTriggerState } from "../collapsible.svelte";
|
|
|
|
|
|
const uid = $props.id();
|
|
|
|
let {
|
|
disabled = false,
|
|
ref = $bindable(null),
|
|
id = createId(uid),
|
|
children,
|
|
child,
|
|
...restProps
|
|
}: CollapsibleTriggerProps = $props();
|
|
|
|
const triggerState = CollapsibleTriggerState.create({
|
|
disabled: readableActive(() => disabled),
|
|
id: readableActive(() => id),
|
|
ref: writableActive(
|
|
() => ref,
|
|
(v) => (ref = v)
|
|
),
|
|
});
|
|
|
|
const mergedProps = $derived(mergeProps(restProps, triggerState.props));
|
|
</script>
|
|
|
|
{#if child}
|
|
{@render child({ props: mergedProps })}
|
|
{:else}
|
|
<button {...mergedProps}>
|
|
{@render children?.()}
|
|
</button>
|
|
{/if}
|
|
|