CardPanel

A searchable grid of cards with view, action and add events, and pluggable card templates.

from wapyt import CardPanelCardConfig, CardPanelConfig

panel = self.add_cardpanel("providers", CardPanelConfig(
    title="Model providers",
    description="Add or select a provider to manage its models.",
    add_button_text="Add provider",
    search_placeholder="Search providers…",
    card_columns=3,
    cards=[CardPanelCardConfig(id="openai", title="OpenAI", subtitle="12 models", pill="Active")],
))
panel.on_view(lambda card: open_provider(card))
panel.on_add(lambda *_: new_provider())

Defaults

Copy is generic: empty title and description (an empty description hides its row), "Search…" and "Add". Name what the panel holds with add_button_text and search_placeholder. searchable=False (or show_search=False) hides the search box.

Cards

CardPanelCardConfig(id, title, subtitle, pill, icon, extra); extra keys are merged into the card and available to templates as placeholders.

Layout: card_columns, card_min_width, card_min_height, card_height, card_gap, card_icon_size, viewport_height.

Templates

card_template is a registered template name, a JS function, or a descriptor dict:

CardPanelConfig(card_template={
    "tag": "div", "class": "my-card",
    "children": [
        {"tag": "h3", "text": "{title}"},
        {"tag": "p", "text": "{subtitle}"},
    ],
})

Placeholders such as {title} or {card.subtitle} are interpolated; values going into html are HTML-escaped. CardPanel.register_template(name, factory) registers a renderer for reuse.

Events

Method	Payload
on_search	the query string
on_add	—
on_view	the card dict ("View details" button)
on_card_click	the card dict
on_action	{action, cardId, card} from a template element with data-card-action="<name>"

Methods

load(cards), add_card(card), filter(query), destroy.