119 lines
3.0 KiB
Plaintext
119 lines
3.0 KiB
Plaintext
package components
|
|
|
|
import "fmt"
|
|
|
|
type ModalProps struct {
|
|
ID string
|
|
Title string
|
|
Open bool
|
|
Content templ.Component
|
|
MaxWidth string // Optional: custom max-width class (defaults to max-w-xl)
|
|
}
|
|
|
|
templ Modal(props ModalProps) {
|
|
{{
|
|
maxWidth := props.MaxWidth
|
|
if maxWidth == "" {
|
|
maxWidth = "max-w-2xl"
|
|
}
|
|
}}
|
|
<div
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
id={ props.ID }
|
|
x-data={ `{ open: ` + fmt.Sprintf("%t", props.Open) + ` }` }
|
|
x-show="open"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-title"
|
|
>
|
|
<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div
|
|
class={ "relative w-full rounded-lg bg-base-100 pointer-events-auto flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden", maxWidth }
|
|
>
|
|
<div class="flex items-center justify-between p-4 border-b shrink-0">
|
|
<h2 class="font-bold text-lg" id="modal-title">{ props.Title }</h2>
|
|
<button type="button" class="btn btn-ghost" @click="open = false">✕</button>
|
|
</div>
|
|
<div class="p-4 overflow-y-auto">
|
|
if props.Content != nil {
|
|
@props.Content
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ ModalContainer() {
|
|
<div
|
|
id="modal-container"
|
|
hx-get="/status/modal"
|
|
hx-trigger="task-status-success from:body"
|
|
hx-target="#modal-container"
|
|
hx-swap="innerHTML"
|
|
hx-disinherit="hx-target hx-swap"
|
|
></div>
|
|
}
|
|
|
|
type ConfirmModalProps struct {
|
|
Title string
|
|
Message string
|
|
ConfirmText string
|
|
CancelText string
|
|
ConfirmAction string
|
|
ConfirmClass string
|
|
IssueID string
|
|
}
|
|
|
|
templ ConfirmModal(props ConfirmModalProps) {
|
|
<div
|
|
class="fixed inset-0 z-50 max-w-xl items-center justify-center mx-auto"
|
|
id="confirm-modal"
|
|
x-data="{ open: true }"
|
|
x-show="open"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="confirm-modal-title"
|
|
>
|
|
<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4 pointer-events-none">
|
|
<div class="relative bg-base-100 rounded-lg w-full pointer-events-auto shadow-xl">
|
|
<div class="flex justify-between items-center p-4 border-b">
|
|
<h2 class="font-bold text-lg" id="confirm-modal-title">{ props.Title }</h2>
|
|
<button type="button" class="btn btn-ghost btn-sm" @click="open = false">✕</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-base-content/80">{ props.Message }</p>
|
|
</div>
|
|
<div class="flex gap-2 p-4 border-t justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost"
|
|
@click="open = false"
|
|
>
|
|
if props.CancelText != "" {
|
|
{ props.CancelText }
|
|
} else {
|
|
Cancel
|
|
}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class={ "btn", props.ConfirmClass }
|
|
hx-delete={ props.ConfirmAction }
|
|
hx-target="body"
|
|
@click="open = false"
|
|
>
|
|
if props.ConfirmText != "" {
|
|
{ props.ConfirmText }
|
|
} else {
|
|
Confirm
|
|
}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|