sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete TailAdmin parity with remaining macro features

Browse Source 
Add missing features identified in TailAdmin gap analysis:

cards.html:
- stat_card_with_trend: Stats card with up/down trend indicator and percentage
- card_with_menu: Card with dropdown menu in header
- card_with_menu_simple: Simplified version with menu_items parameter

tables.html:
- sortable_table_header: Table header with sortable columns, sort indicators,
  and Alpine.js integration for sort state management

forms.html:
- searchable_select: Dropdown with search/filter functionality
- multi_select: Multi-select dropdown with tag display

This completes feature parity with TailAdmin free template.
The tailadmin-free-tailwind-dashboard-template folder can now be deleted.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-06 19:32:42 +01:00
parent c0e44c2751
commit fbd3a45c38
3 changed files with 457 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
app/templates/shared/macros/forms.html
View File

@@ -544,3 +544,227 @@
</div>
</div>
{% endmacro %}
{#
Searchable Select
=================
A select dropdown with search/filter functionality.
Parameters:
- label: Field label
- x_model: Alpine.js x-model binding for selected value
- options_var: Alpine.js variable containing options array
- value_key: Key for option value (default: 'value')
- label_key: Key for option label (default: 'label')
- search_var: Alpine.js variable for search query (default: 'searchQuery')
- open_var: Alpine.js variable for dropdown open state (default: 'isOpen')
- placeholder: Placeholder text (default: 'Select...')
- search_placeholder: Search input placeholder (default: 'Search...')
- required: Whether the field is required
- disabled: Alpine.js expression for disabled state
- no_results_text: Text shown when no results (default: 'No results found')
Usage:
<div x-data="{
selected: '',
selectedLabel: '',
searchQuery: '',
isOpen: false,
options: [
{ id: '1', name: 'Option 1' },
{ id: '2', name: 'Option 2' }
],
get filteredOptions() {
if (!this.searchQuery) return this.options;
return this.options.filter(o => o.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
},
selectOption(option) {
this.selected = option.id;
this.selectedLabel = option.name;
this.isOpen = false;
this.searchQuery = '';
}
}">
{{ searchable_select('Category', 'selected', 'filteredOptions', value_key='id', label_key='name') }}
</div>
#}
{% macro searchable_select(label, x_model, options_var, value_key='value', label_key='label', search_var='searchQuery', open_var='isOpen', placeholder='Select...', search_placeholder='Search...', required=false, disabled=none, no_results_text='No results found') %}
<div class="mb-4">
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">
{{ label }}{% if required %} <span class="text-red-600">*</span>{% endif %}
</span>
<div class="relative mt-1">
{# Selected value display / trigger button #}
<button
type="button"
@click="{{ open_var }} = !{{ open_var }}"
@click.outside="{{ open_var }} = false"
{% if disabled %}:disabled="{{ disabled }}"{% endif %}
class="flex items-center justify-between w-full px-4 py-2 text-sm text-left bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
:class="{ 'ring-2 ring-purple-500 border-transparent': {{ open_var }} }"
>
<span
:class="!{{ x_model }} ? 'text-gray-400' : 'text-gray-700 dark:text-gray-300'"
x-text="selectedLabel || '{{ placeholder }}'"
>{{ placeholder }}</span>
<svg
class="w-4 h-4 ml-2 text-gray-400 transition-transform"
:class="{ 'rotate-180': {{ open_var }} }"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
{# Dropdown panel #}
<div
x-show="{{ open_var }}"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
>
{# Search input #}
<div class="p-2 border-b border-gray-200 dark:border-gray-700">
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</span>
<input
type="text"
x-model="{{ search_var }}"
@click.stop
placeholder="{{ search_placeholder }}"
class="w-full pl-9 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-500 focus:ring-1 focus:ring-purple-500 dark:bg-gray-700 dark:text-gray-300"
>
</div>
</div>
{# Options list #}
<ul class="max-h-60 overflow-y-auto py-1">
<template x-for="option in {{ options_var }}" :key="option.{{ value_key }}">
<li>
<button
type="button"
@click="selectOption(option)"
class="flex items-center justify-between w-full px-4 py-2 text-sm text-left transition-colors"
:class="{{ x_model }} === option.{{ value_key }}
? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
>
<span x-text="option.{{ label_key }}"></span>
<svg
x-show="{{ x_model }} === option.{{ value_key }}"
class="w-4 h-4 text-purple-600"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</button>
</li>
</template>
<li x-show="{{ options_var }}.length === 0" class="px-4 py-3 text-sm text-center text-gray-500 dark:text-gray-400">
{{ no_results_text }}
</li>
</ul>
</div>
</div>
</label>
</div>
{% endmacro %}
{#
Multi-Select with Tags
======================
A multi-select dropdown that shows selected items as tags.
Parameters:
- label: Field label
- selected_var: Alpine.js variable for selected values array
- options_var: Alpine.js variable containing options array
- value_key: Key for option value (default: 'value')
- label_key: Key for option label (default: 'label')
- placeholder: Placeholder text (default: 'Select items...')
- max_items: Maximum number of items (optional)
Required Alpine.js methods:
toggleOption(option) - Add/remove option from selection
removeOption(value) - Remove option by value
isSelected(value) - Check if option is selected
getLabel(value) - Get label for a value
#}
{% macro multi_select(label, selected_var, options_var, value_key='value', label_key='label', placeholder='Select items...', max_items=none) %}
<div x-data="{ isOpen: false }" class="mb-4">
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">{{ label }}</span>
<div class="relative mt-1">
{# Selected tags display / trigger #}
<div
@click="isOpen = !isOpen"
@click.outside="isOpen = false"
class="min-h-[42px] px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none"
:class="{ 'ring-2 ring-purple-500 border-transparent': isOpen }"
>
<div class="flex flex-wrap gap-1">
<template x-for="value in {{ selected_var }}" :key="value">
<span class="inline-flex items-center px-2 py-1 text-xs font-medium text-purple-700 bg-purple-100 rounded-full dark:bg-purple-900/30 dark:text-purple-300">
<span x-text="getLabel(value)"></span>
<button
type="button"
@click.stop="removeOption(value)"
class="ml-1 hover:text-purple-900 dark:hover:text-purple-100"
>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</span>
</template>
<span x-show="{{ selected_var }}.length === 0" class="text-gray-400 text-sm py-0.5">{{ placeholder }}</span>
</div>
</div>
{# Dropdown #}
<div
x-show="isOpen"
x-transition
class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-60 overflow-y-auto"
>
<template x-for="option in {{ options_var }}" :key="option.{{ value_key }}">
<button
type="button"
@click="toggleOption(option)"
{% if max_items %}:disabled="{{ selected_var }}.length >= {{ max_items }} && !isSelected(option.{{ value_key }})"{% endif %}
class="flex items-center justify-between w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
:class="isSelected(option.{{ value_key }})
? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
>
<span x-text="option.{{ label_key }}"></span>
<svg
x-show="isSelected(option.{{ value_key }})"
class="w-4 h-4 text-purple-600"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</button>
</template>
</div>
</div>
</label>
{% if max_items %}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
<span x-text="{{ selected_var }}.length"></span> / {{ max_items }} selected
</p>
{% endif %}
</div>
{% endmacro %}