monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

wip(app): line selection

Browse Source
This commit is contained in:
Adam
2026-01-21 13:31:06 -06:00
parent cb481d9ac8
commit 1e1872aada
8 changed files with 83 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/ui/src/components/popover.tsx
View File

@@ -13,6 +13,7 @@ export interface PopoverProps<T extends ValidComponent = "div">
description?: JSXElement
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
portal?: boolean
}
export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
@@ -26,40 +27,45 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
"class",
"classList",
"children",
"portal",
])
const content = () => (
<Kobalte.Content
data-component="popover-content"
classList={{
...(local.classList ?? {}),
[local.class ?? ""]: !!local.class,
}}
>
{/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
<Show when={local.title}>
<div data-slot="popover-header">
<Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
<Kobalte.CloseButton
data-slot="popover-close-button"
as={IconButton}
icon="close"
variant="ghost"
aria-label={i18n.t("ui.common.close")}
/>
</div>
</Show>
<Show when={local.description}>
<Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
</Show>
<div data-slot="popover-body">{local.children}</div>
</Kobalte.Content>
)
return (
<Kobalte gutter={4} {...rest}>
<Kobalte.Trigger as={local.triggerAs ?? "div"} data-slot="popover-trigger" {...(local.triggerProps as any)}>
{local.trigger}
</Kobalte.Trigger>
<Kobalte.Portal>
<Kobalte.Content
data-component="popover-content"
classList={{
...(local.classList ?? {}),
[local.class ?? ""]: !!local.class,
}}
>
{/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
<Show when={local.title}>
<div data-slot="popover-header">
<Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
<Kobalte.CloseButton
data-slot="popover-close-button"
as={IconButton}
icon="close"
variant="ghost"
aria-label={i18n.t("ui.common.close")}
/>
</div>
</Show>
<Show when={local.description}>
<Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
</Show>
<div data-slot="popover-body">{local.children}</div>
</Kobalte.Content>
</Kobalte.Portal>
<Show when={local.portal ?? true} fallback={content()}>
<Kobalte.Portal>{content()}</Kobalte.Portal>
</Show>
</Kobalte>
)
}