fix collapsible on ssr

This commit is contained in:
Face 2025-06-29 00:21:40 +03:00
parent 2c1dacbc2f
commit 934706961d
3 changed files with 35 additions and 5 deletions

View file

@ -1,7 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Collapsible as CollapsiblePrimitive } from "bits-ui"; import { Collapsible as CollapsiblePrimitive } from "bits-ui";
import { browser } from "$app/environment";
let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props(); let {
ref = $bindable(null),
children,
...restProps
}: CollapsiblePrimitive.ContentProps = $props();
</script> </script>
{#if browser}
<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} /> <CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
{:else}
<div data-slot="collapsible-content" {...restProps}>
{@render children?.()}
</div>
{/if}

View file

@ -1,7 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Collapsible as CollapsiblePrimitive } from "bits-ui"; import { Collapsible as CollapsiblePrimitive } from "bits-ui";
import { browser } from "$app/environment";
let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props(); let {
ref = $bindable(null),
children,
...restProps
}: CollapsiblePrimitive.TriggerProps = $props();
</script> </script>
{#if browser}
<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} /> <CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
{:else}
<button data-slot="collapsible-trigger" {...restProps}>
{@render children?.()}
</button>
{/if}

View file

@ -1,11 +1,19 @@
<script lang="ts"> <script lang="ts">
import { Collapsible as CollapsiblePrimitive } from "bits-ui"; import { Collapsible as CollapsiblePrimitive } from "bits-ui";
import { browser } from "$app/environment";
let { let {
ref = $bindable(null), ref = $bindable(null),
open = $bindable(false), open = $bindable(false),
children,
...restProps ...restProps
}: CollapsiblePrimitive.RootProps = $props(); }: CollapsiblePrimitive.RootProps = $props();
</script> </script>
{#if browser}
<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} /> <CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
{:else}
<div data-slot="collapsible">
{@render children?.()}
</div>
{/if}