fix collapsible on ssr
This commit is contained in:
parent
2c1dacbc2f
commit
934706961d
3 changed files with 35 additions and 5 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
Reference in a new issue