wagoe.shared.ui.core.alpine — com.wagoe/wagoe-shared-ui 1.1.0-rc-1

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

bulk-selection-attrs clj

(bulk-selection-attrs)

Bulk selection container attributes for table checkbox management.

Provides reactive selectedIds array that automatically updates when checkboxes change, eliminating need for htmx:afterSwap handlers.

Returns: Map of Alpine attributes for bulk selection container

Example: [:div (bulk-selection-attrs) [:input (select-all-checkbox-attrs)] [:input (row-checkbox-attrs id)] [:button (delete-button-attrs) "Delete"]]

collapsible-attrs clj

(collapsible-attrs)

(collapsible-attrs initial-open)

Collapsible panel attributes with transition.

Args: initial-open: Boolean for initial state (default false)

Returns: Map of Alpine attributes for collapsible content

delete-button-attrs clj

(delete-button-attrs)

Delete button attributes that disables when nothing selected.

Returns: Map of attributes for bulk delete button

dropdown-attrs clj

(dropdown-attrs)

Standard dropdown component attributes.

Provides open/close state, click-outside handling, and escape key support.

Returns: Map of Alpine attributes for dropdown behavior

Example: [:div (dropdown-attrs) [:button (toggle-button-attrs) "Menu"] [:div {:x-show "open"} "Content"]]

mobile-menu-toggle-attrs clj deprecated

(mobile-menu-toggle-attrs)

DEPRECATED: use sidebar-toggle-attrs, which also works on small screens.

row-checkbox-attrs clj

(row-checkbox-attrs id)

(row-checkbox-attrs id title)

Row checkbox attributes for bulk selection.

Args: id: Record ID value title: What the row is called, for the box's accessible name ("Select <title>"); the id when blank

Returns: Map of attributes for individual row checkbox

select-all-checkbox-attrs clj

(select-all-checkbox-attrs)

Select-all checkbox attributes for bulk selection.

Returns: Map of attributes for the select-all checkbox

sidebar-attrs clj deprecated

(sidebar-attrs)

DEPRECATED: the sidebar no longer expands on hover; returns no attributes.

sidebar-nav-link-attrs clj

(sidebar-nav-link-attrs)

Sidebar navigation link attributes for mobile drawer auto-close.

Returns: Map of attributes for nav links

sidebar-overlay-attrs clj

(sidebar-overlay-attrs)

Overlay attributes for mobile drawer.

Returns: Map of attributes for overlay div

sidebar-shell-attrs clj

(sidebar-shell-attrs)

The small-screen drawer's state and Ctrl+B. The desktop state is data-sidebar on <html>, set by init.js.

sidebar-store-init clj deprecated

(sidebar-store-init)

DEPRECATED: renders nothing. The ui-style :admin-pilot bundle's admin-ux.js registers the one sidebar store.

sidebar-toggle-attrs clj

(sidebar-toggle-attrs)

The sidebar's toggle button: opens and closes it on a desktop, the drawer on a small screen.

toggle-button-attrs clj

(toggle-button-attrs)

Toggle button attributes for controlling 'open' state.

Returns: Map of Alpine attributes for toggle buttons

x-bind clj

(x-bind attr expr)

Generate x-bind attribute for dynamic attribute binding.

Args: attr: Attribute name (keyword or string) expr: JavaScript expression string

Returns: Map with x-bind attribute

Example: (x-bind :disabled "selectedIds.length === 0") => {:x-bind:disabled "selectedIds.length === 0"}

x-cloak clj

(x-cloak)

Generate x-cloak attribute to prevent FOUC.

Returns: Map with :x-cloak attribute

x-data clj

(x-data state)

Generate x-data attribute for Alpine component initialization.

Args: state: Map of initial state, or string expression

Returns: Map with :x-data attribute

Example: (x-data {:open false}) => {:x-data "{open: false}"}

(x-data {:items [1 2 3] :nested {:a true}}) => {:x-data "{items: [1, 2, 3], nested: {a: true}}"}

x-model clj

(x-model binding)

Generate x-model attribute for two-way binding.

Args: binding: JavaScript variable name

Returns: Map with :x-model attribute

Example: (x-model "selectedIds") => {:x-model "selectedIds"}

x-on clj

(x-on event handler)

Generate event handler attribute.

Args: event: Event name (keyword or string), can include modifiers handler: JavaScript expression string

Returns: Map with @ event handler attribute

Example: (x-on :click "open = !open") => {:@click "open = !open"}

(x-on :click.outside "open = false") => {:@click.outside "open = false"}

x-persist clj

(x-persist key initial)

Generate Alpine $persist expression for localStorage. Needs Alpine's Persist plugin, which ui-style does not bundle.

Args: key: Storage key string initial: Initial value (will be JSON encoded)

Returns: String expression using Alpine.$persist

Example: (x-persist "tab" "general") => "Alpine.$persist('general').as('tab')"

x-show clj

(x-show condition)

Generate x-show attribute for conditional visibility.

Args: condition: JavaScript expression string

Returns: Map with :x-show attribute

Example: (x-show "open") => {:x-show "open"}

x-transition clj

(x-transition)

(x-transition opts)

Generate x-transition attribute for enter/leave animations.

Args: opts: Optional map with :origin, :duration, etc.

Returns: Map with x-transition attributes

Example: (x-transition) => {:x-transition true}

(x-transition {:origin "top right"}) => {:x-transition.origin.top.right true}