Reactive Components

All components use Alpine.js under the hood for client-side interactions without reloading.

QueryDropdown

Two modes: Fetch mode (retrieves from @app.query) or Static mode (static data).

python

from sistine.components import QueryDropdown

# Fetch mode
QueryDropdown(
    query="fetch_types",
    label_key="name",
    placeholder="Select Pokémon Type...",
)

# Static mode
QueryDropdown(
    options=[
        {"name": "Normal"},
        {"name": "Fire"},
        {"name": "Water"},
    ],
    label_key="name",
    placeholder="Select static type...",
)

QueryTable

Automatic table with pagination support:

python

from sistine.components import QueryTable

# With pagination
QueryTable(
    query="fetch_pokemon",
    columns=["id", "name", "type"],
    headers=["#", "Name", "Type"],
    params={"limit": 20},
    page_size=5,
)

QueryMutation

Write actions (POST/PUT/DELETE) with confirmation:

python

from sistine.components import QueryMutation

QueryMutation(
    query="add_favorite",
    method="POST",
    body_js='{ name: "Pikachu" }',
    confirm="Add Pikachu to favorites?",
    trigger=el.button(cls="bg-chart-3 text-main-foreground px-4 py-2 rounded flex items-center gap-2")(
        "<i data-lucide='star'></i> Favorite"
    ),
    on_success=el.div(x_text="data.message")(),
    on_error=el.div(x_text="error")(),
)