Skip to content

Modals

components.modals

Modal and dialog components.

Modal

Bases: Component

A modal dialog container that can be opened via HTMX.

Parameters:

Name Type Description Default
title str

Modal title

 ''
children

Components to render inside the modal

 required
uid

Unique identifier for the modal

 required
Source code in components/modals.py 
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class Modal(Component):
    """
    A modal dialog container that can be opened via HTMX.

    Parameters:
        title: Modal title
        children: Components to render inside the modal
        uid: Unique identifier for the modal
    """

    def __init__(self, title: str = "", **kwargs):
        super().__init__(**kwargs)
        self.title = title

    def render_html(self, **kwargs) -> str:
        # Allow uid and title to be overridden from kwargs
        uid = kwargs.get("modal_id", self.uid)
        title = kwargs.get("title", self.title)

        children_html = "\n".join([child.render(**kwargs) for child in self.children])
        return f"""
        <dialog id="{uid}" class="modal modal-open">
            <div class="modal-box max-w-4xl {self.classes}">
                <form method="dialog">
                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
                            onclick="document.getElementById('{uid}').remove()">
                        {{% heroicon_mini "x-mark" %}}
                    </button>
                </form>
                {f'<h3 class="font-bold text-lg mb-4">{title}</h3>' if title else ""}
                {children_html}
            </div>
            <form method="dialog" class="modal-backdrop">
                <button onclick="document.getElementById('{uid}').remove()">close</button>
            </form>
        </dialog>
        """

ModalTrigger

Bases: Component

A button that triggers loading content into a modal via HTMX.

Parameters:

Name Type Description Default
label str

Button text

 required
url

URL to fetch modal content from

 required
target str

Target element ID for the modal content

 'body'
Source code in components/modals.py 
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
class ModalTrigger(Component):
    """
    A button that triggers loading content into a modal via HTMX.

    Parameters:
        label: Button text
        url: URL to fetch modal content from
        target: Target element ID for the modal content
    """

    def __init__(
        self,
        label: str,
        target: str = "body",
        swap: str = "beforeend",
        **kwargs
    ):
        super().__init__(**kwargs)
        self.label = label
        self.target = target
        self.swap = swap

    def render_html(self, **kwargs) -> str:
        url = self.get_url(**kwargs)
        return f"""
        <button type="button"
                id="{self.uid}"
                class="btn btn-outline btn-sm {self.classes}"
                hx-get="{url}"
                hx-target="{self.target}"
                hx-swap="{self.swap}">
            {self.label}
        </button>
        """