Skip to content

Commit

Permalink
popover portal woohoo
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte committed Apr 23, 2024
1 parent 20799a8 commit 690866a
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 70 deletions.
43 changes: 20 additions & 23 deletions packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import { setPopoverContentState } from "../popover.svelte.js";
import { PopperLayer } from "$lib/bits/utilities/popper-layer/index.js";
import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
import Portal from "$lib/bits/utilities/portal/portal.svelte";
let {
asChild,
Expand All @@ -23,25 +22,23 @@
});
</script>

<Portal>
<PopperLayer
{...restProps}
present={state.root.open.value || forceMount}
{id}
{style}
onInteractOutside={state.root.close}
onEscape={state.root.close}
>
{#snippet popper({ props })}
{@const mergedProps = mergeProps(restProps, state.props, props)}
{mergedProps.hidden}
{#if asChild}
{@render child?.({ props: mergedProps })}
{:else}
<div {...mergedProps} bind:this={el}>
{@render children?.()}
</div>
{/if}
{/snippet}
</PopperLayer>
</Portal>
<PopperLayer
{...restProps}
present={state.root.open.value || forceMount}
{id}
{style}
onInteractOutside={state.root.close}
onEscape={state.root.close}
>
{#snippet popper({ props })}
{@const mergedProps = mergeProps(restProps, state.props, props)}
{mergedProps.hidden}
{#if asChild}
{@render child?.({ props: mergedProps })}
{:else}
<div {...mergedProps} bind:this={el}>
{@render children?.()}
</div>
{/if}
{/snippet}
</PopperLayer>
3 changes: 3 additions & 0 deletions packages/bits-ui/src/lib/bits/popover/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export { default as Arrow } from "./components/popover-arrow.svelte";
export { default as Content } from "./components/popover-content.svelte";
export { default as Trigger } from "./components/popover-trigger.svelte";
export { default as Close } from "./components/popover-close.svelte";
export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";

export type {
PopoverRootProps as RootProps,
Expand All @@ -13,3 +14,5 @@ export type {
PopoverTriggerEvents as TriggerEvents,
PopoverCloseEvents as CloseEvents,
} from "./types.js";

export type { PortalProps } from "$lib/bits/utilities/portal/types.js";
8 changes: 6 additions & 2 deletions packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import type { PortalProps } from "./types.js";
import { isBrowser } from "$lib/internal/is.js";
let { to = "body", children }: PortalProps = $props();
let { to = "body", children, disabled }: PortalProps = $props();
const context = getAllContexts();
Expand Down Expand Up @@ -34,7 +34,7 @@
let instance: any;
$effect(() => {
if (!target) {
if (!target || disabled) {
return unmount(instance);
}
instance = mount(PortalConsumer, { target, props: { children }, context });
Expand All @@ -44,3 +44,7 @@
};
});
</script>

{#if disabled}
{@render children?.()}
{/if}
98 changes: 53 additions & 45 deletions sites/docs/src/lib/components/demos/popover-demo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,52 +13,60 @@
>
Resize
</Popover.Trigger>
<Popover.Content
class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
sideOffset={8}
>
<Popover.Arrow class="text-white" />
<div class="flex items-center">
<div class="mr-3 flex size-12 items-center justify-center rounded-full bg-muted">
<ImageSquare class="size-6" />
</div>
<div class="flex flex-col">
<h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">Resize image</h4>
<p class="text-sm font-medium text-muted-foreground">Resize your photos easily</p>
</div>
</div>
<Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
<div class="flex items-center pb-2">
<div class="mr-2 flex items-center">
<div class="relative mr-2">
<span class="sr-only">Width</span>
<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
>W</span
>
<input
type="number"
class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
bind:value={width}
/>
<Popover.Portal>
<Popover.Content
class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
sideOffset={8}
>
<Popover.Arrow class="text-white" />
<div class="flex items-center">
<div class="mr-3 flex size-12 items-center justify-center rounded-full bg-muted">
<ImageSquare class="size-6" />
</div>
<div class="relative">
<span class="sr-only">Height</span>
<span aria-hidden class="absolute left-5 top-4 text-xxs text-muted-foreground"
>H</span
>
<input
type="number"
class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
bind:value={height}
/>
<div class="flex flex-col">
<h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">
Resize image
</h4>
<p class="text-sm font-medium text-muted-foreground">
Resize your photos easily
</p>
</div>
</div>
<Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
<div class="flex items-center pb-2">
<div class="mr-2 flex items-center">
<div class="relative mr-2">
<span class="sr-only">Width</span>
<span
aria-hidden
class="absolute left-5 top-4 text-xxs text-muted-foreground">W</span
>
<input
type="number"
class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
bind:value={width}
/>
</div>
<div class="relative">
<span class="sr-only">Height</span>
<span
aria-hidden
class="absolute left-5 top-4 text-xxs text-muted-foreground">H</span
>
<input
type="number"
class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
bind:value={height}
/>
</div>
</div>
<Toggle.Root
aria-label="toggle constrain portions"
class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
>
<LinkSimpleHorizontalBreak class="size-6" />
</Toggle.Root>
</div>
<Toggle.Root
aria-label="toggle constrain portions"
class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
>
<LinkSimpleHorizontalBreak class="size-6" />
</Toggle.Root>
</div>
</Popover.Content>
</Popover.Content>
</Popover.Portal>
</Popover.Root>

0 comments on commit 690866a

Please sign in to comment.