docs: document action_dropdown macro in jinja-macros guide
Add documentation for the new action_dropdown macro including: - Full parameter table with defaults - Usage example with caller block pattern - Features explanation for loading state behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -562,7 +562,7 @@ Time-only picker.
|
|||||||
**File:** `shared/macros/dropdowns.html`
|
**File:** `shared/macros/dropdowns.html`
|
||||||
|
|
||||||
```jinja
|
```jinja
|
||||||
{% from 'shared/macros/dropdowns.html' import dropdown, context_menu, dropdown_item, dropdown_divider %}
|
{% from 'shared/macros/dropdowns.html' import dropdown, action_dropdown, context_menu, dropdown_item, dropdown_divider %}
|
||||||
```
|
```
|
||||||
|
|
||||||
### dropdown
|
### dropdown
|
||||||
@@ -586,6 +586,39 @@ Button with dropdown menu.
|
|||||||
| `icon` | string | `'chevron-down'` | Button icon |
|
| `icon` | string | `'chevron-down'` | Button icon |
|
||||||
| `width` | string | `'w-48'` | Dropdown width |
|
| `width` | string | `'w-48'` | Dropdown width |
|
||||||
|
|
||||||
|
### action_dropdown
|
||||||
|
|
||||||
|
Dropdown with loading/disabled state support for action buttons. Uses external Alpine.js state from parent component.
|
||||||
|
|
||||||
|
```jinja
|
||||||
|
{% call action_dropdown(
|
||||||
|
label='Run Scan',
|
||||||
|
loading_label='Scanning...',
|
||||||
|
open_var='scanDropdownOpen',
|
||||||
|
loading_var='scanning',
|
||||||
|
icon='search'
|
||||||
|
) %}
|
||||||
|
{{ dropdown_item('Run All', 'runScan("all"); scanDropdownOpen = false') }}
|
||||||
|
{{ dropdown_item('Run Selected', 'runScan("selected"); scanDropdownOpen = false') }}
|
||||||
|
{% endcall %}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Parameter | Type | Default | Description |
|
||||||
|
|-----------|------|---------|-------------|
|
||||||
|
| `label` | string | required | Button label |
|
||||||
|
| `loading_label` | string | `'Loading...'` | Label shown when loading |
|
||||||
|
| `open_var` | string | `'isDropdownOpen'` | Alpine.js variable for open state |
|
||||||
|
| `loading_var` | string | `'isLoading'` | Alpine.js variable for loading/disabled state |
|
||||||
|
| `icon` | string | `none` | Button icon (before label) |
|
||||||
|
| `position` | string | `'right'` | `'left'`, `'right'` |
|
||||||
|
| `variant` | string | `'primary'` | `'primary'`, `'secondary'` |
|
||||||
|
| `width` | string | `'w-48'` | Dropdown width |
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Button is disabled when `loading_var` is true
|
||||||
|
- Shows spinner icon and `loading_label` when loading
|
||||||
|
- Uses external state (no `x-data` wrapper - expects parent component to define variables)
|
||||||
|
|
||||||
### context_menu
|
### context_menu
|
||||||
|
|
||||||
Three-dot context menu (for table rows).
|
Three-dot context menu (for table rows).
|
||||||
|
|||||||
Reference in New Issue
Block a user