57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { Dialog as Kobalte } from "@kobalte/core/dialog"
|
|
import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
|
|
import { IconButton } from "./icon-button"
|
|
|
|
export interface DialogProps extends ParentProps {
|
|
title?: JSXElement
|
|
description?: JSXElement
|
|
action?: JSXElement
|
|
size?: "normal" | "large"
|
|
class?: ComponentProps<"div">["class"]
|
|
classList?: ComponentProps<"div">["classList"]
|
|
fit?: boolean
|
|
}
|
|
|
|
export function Dialog(props: DialogProps) {
|
|
return (
|
|
<div data-component="dialog" data-fit={props.fit ? true : undefined} data-size={props.size || "normal"}>
|
|
<div data-slot="dialog-container">
|
|
<Kobalte.Content
|
|
data-slot="dialog-content"
|
|
data-no-header={!props.title && !props.action ? "" : undefined}
|
|
classList={{
|
|
...(props.classList ?? {}),
|
|
[props.class ?? ""]: !!props.class,
|
|
}}
|
|
onOpenAutoFocus={(e) => {
|
|
const target = e.currentTarget as HTMLElement | null
|
|
const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
|
|
if (autofocusEl) {
|
|
e.preventDefault()
|
|
autofocusEl.focus()
|
|
}
|
|
}}
|
|
>
|
|
<Show when={props.title || props.action}>
|
|
<div data-slot="dialog-header">
|
|
<Show when={props.title}>
|
|
<Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
|
|
</Show>
|
|
<Switch>
|
|
<Match when={props.action}>{props.action}</Match>
|
|
<Match when={true}>
|
|
<Kobalte.CloseButton data-slot="dialog-close-button" as={IconButton} icon="close" variant="ghost" />
|
|
</Match>
|
|
</Switch>
|
|
</div>
|
|
</Show>
|
|
<Show when={props.description}>
|
|
<Kobalte.Description data-slot="dialog-description">{props.description}</Kobalte.Description>
|
|
</Show>
|
|
<div data-slot="dialog-body">{props.children}</div>
|
|
</Kobalte.Content>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|