Liking cljdoc? Tell your friends :D

wagoe.shared.ui.core.alpine

Alpine.js helper functions for Hiccup templates.

Provides declarative attributes for common Alpine patterns while maintaining compatibility with HTMX server communication.

Alpine.js handles client-side reactivity (dropdowns, state, transitions) while HTMX handles server communication. Alpine's MutationObserver automatically detects HTMX DOM changes, eliminating manual re-initialization.

Key patterns:

  • x-data: Component state initialization
  • x-bind: Dynamic attribute binding
  • x-on/@: Event handlers
  • x-show: Conditional visibility with transitions
  • x-model: Two-way data binding
  • $persist: LocalStorage persistence (needs the Persist plugin)
  • $store: Global reactive stores
Alpine.js helper functions for Hiccup templates.

Provides declarative attributes for common Alpine patterns while
maintaining compatibility with HTMX server communication.

Alpine.js handles client-side reactivity (dropdowns, state, transitions)
while HTMX handles server communication. Alpine's MutationObserver
automatically detects HTMX DOM changes, eliminating manual re-initialization.

Key patterns:
- x-data: Component state initialization
- x-bind: Dynamic attribute binding
- x-on/@: Event handlers
- x-show: Conditional visibility with transitions
- x-model: Two-way data binding
- $persist: LocalStorage persistence (needs the Persist plugin)
- $store: Global reactive stores
raw docstring

wagoe.shared.ui.core.combobox

Combobox (typeahead): a text input that asks the server for options as the user types, and a hidden input holding the chosen value. For a choice among more rows than a select can carry. With :multiple, each value chosen is a chip holding its own hidden input. The keyboard and picking behaviour is the combobox Alpine component in ui-style's components.js.

Combobox (typeahead): a text input that asks the server for options as the
user types, and a hidden input holding the chosen value. For a choice among
more rows than a select can carry. With `:multiple`, each value chosen is a
chip holding its own hidden input. The keyboard and picking behaviour is
the `combobox` Alpine component in ui-style's components.js.
raw docstring

wagoe.shared.ui.core.components

Pure UI component functions for HTML generation using Hiccup.

These are reusable, generic components that can be used across all domain modules. No domain-specific logic should be placed here - only pure presentation functions.

Pure UI component functions for HTML generation using Hiccup.

These are reusable, generic components that can be used across all domain modules.
No domain-specific logic should be placed here - only pure presentation functions.
raw docstring

wagoe.shared.ui.core.form

Form fields from a malli map schema.

One schema answers three questions: which HTML validation attributes a field carries (input-attrs), what is wrong with a submitted form (validate), and what the field looks like with its errors (field). A field rendered with a :validate-url posts itself there when it changes, and the server answers with the field again, so the browser shows the server's verdict without holding any state. Without JavaScript the form submits whole and the same validate decides.

Error messages are i18n markers ([:t :validation/required]); a page that is not rendered through wagoe-i18n resolves them with plain-errors.

Form fields from a malli map schema.

One schema answers three questions: which HTML validation attributes a
field carries (`input-attrs`), what is wrong with a submitted form
(`validate`), and what the field looks like with its errors (`field`). A
field rendered with a `:validate-url` posts itself there when it changes,
and the server answers with the field again, so the browser shows the
server's verdict without holding any state. Without JavaScript the form
submits whole and the same `validate` decides.

Error messages are i18n markers (`[:t :validation/required]`); a page that
is not rendered through wagoe-i18n resolves them with `plain-errors`.
raw docstring

wagoe.shared.ui.core.home

The path layouts link to as home: the logo, "back" and dashboard links.

The path layouts link to as home: the logo, "back" and dashboard links.
raw docstring

wagoe.shared.ui.core.htmx

htmx helpers for Hiccup.

htmx helpers for Hiccup.
raw docstring

wagoe.shared.ui.core.icons

Lucide-based icon system for Wagoe Framework.

Provides inline SVG icons that work seamlessly with Hiccup. Icons are ISC-licensed from https://lucide.dev/

Usage: (icon :home) (icon :users {:size 20 :class "text-primary"}) (icon :chevron-right {:stroke-width 2.5})

Available icons can be listed with (available-icons)

Lucide-based icon system for Wagoe Framework.

Provides inline SVG icons that work seamlessly with Hiccup.
Icons are ISC-licensed from https://lucide.dev/

Usage:
  (icon :home)
  (icon :users {:size 20 :class "text-primary"})
  (icon :chevron-right {:stroke-width 2.5})
  
Available icons can be listed with (available-icons)
raw docstring

wagoe.shared.ui.core.layout

Layout components for consistent page structure.

Contains page layout, navigation, and structural components that provide consistent look and feel across all domain modules.

Layout components for consistent page structure.

Contains page layout, navigation, and structural components that provide
consistent look and feel across all domain modules.
raw docstring

wagoe.shared.ui.core.modal

Modal on native <dialog>. The browser closes it on Esc, the backdrop and the close button, makes the page behind it inert and returns focus on close; components.js (ui-style) only opens it.

Modal on native <dialog>. The browser closes it on Esc, the backdrop and
the close button, makes the page behind it inert and returns focus on
close; components.js (ui-style) only opens it.
raw docstring

wagoe.shared.ui.core.shell

The admin shell: a sidebar that opens and closes, topbar and user menu around a page.

Here rather than in admin so that modules admin depends on (user) can render in it. The sidebar shows the navigation modules contribute (wagoe.platform.core.http.nav), or a page's own :nav, a vector of groups:

[{:id :user ; a collapsible module group; without :label "Users" :icon :users ; an id, a plain list under :label :open? true :items [{:href "/web/admin/users" :label "Users" :icon :users :active? true}]}]

The admin shell: a sidebar that opens and closes, topbar and user menu around a page.

Here rather than in admin so that modules admin depends on (user) can
render in it. The sidebar shows the navigation modules contribute
(`wagoe.platform.core.http.nav`), or a page's own `:nav`, a vector of groups:

  [{:id    :user                  ; a collapsible module group; without
    :label "Users" :icon :users  ; an id, a plain list under :label
    :open? true
    :items [{:href "/web/admin/users" :label "Users"
             :icon :users :active? true}]}]
raw docstring

wagoe.shared.ui.core.toast

Toasts: a live region every page layout renders, and toasts an htmx response adds to it out of band. The toast Alpine component in components.js dismisses them.

Toasts: a live region every page layout renders, and toasts an htmx
response adds to it out of band. The `toast` Alpine component in
components.js dismisses them.
raw docstring

wagoe.shared.ui.core.user-menu

Who is signed in, behind their avatar: name and email, extra links, the profile and signing out. The admin shell's topbar uses it; an app with its own layout puts it in its header and loads /css/user-menu.css.

Who is signed in, behind their avatar: name and email, extra links, the
profile and signing out. The admin shell's topbar uses it; an app with its
own layout puts it in its header and loads /css/user-menu.css.
raw docstring

wagoe.shared.ui.core.validation

Validation error transformation utilities for UI display.

Provides functions to convert Malli validation errors into formats suitable for inline field error display in web forms.

Validation error transformation utilities for UI display.

Provides functions to convert Malli validation errors into
formats suitable for inline field error display in web forms.
raw docstring

cljdoc builds & hosts documentation for Clojure/Script libraries

Keyboard shortcuts
Ctrl+kJump to recent docs
←Move to previous article
→Move to next article
Ctrl+/Jump to the search field
× close