Samir Boulahtit
64ab9031d2
Add comprehensive macro library in app/templates/shared/macros/: - pagination.html: pagination(), pagination_simple() - alerts.html: loading_state(), error_state(), alert(), toast() - badges.html: badge(), status_badge(), role_badge(), severity_badge() - buttons.html: btn(), btn_primary(), btn_danger(), action_button() - forms.html: form_input(), form_select(), form_textarea(), form_toggle() - tables.html: table_wrapper(), table_header(), table_empty_state() - cards.html: stat_card(), card(), info_card(), filter_card() - headers.html: page_header(), section_header(), breadcrumbs() These macros standardize TailAdmin styling with Alpine.js integration and dark mode support, reducing code duplication across templates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
129 lines
6.2 KiB
HTML
129 lines
6.2 KiB
HTML
{#
|
|
Pagination Macro
|
|
================
|
|
A reusable pagination component for tables and lists.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/pagination.html' import pagination %}
|
|
{{ pagination() }}
|
|
|
|
Required Alpine.js data properties:
|
|
- pagination.page: Current page number
|
|
- pagination.total: Total number of items
|
|
- startIndex: First item index on current page
|
|
- endIndex: Last item index on current page
|
|
- totalPages: Total number of pages
|
|
- pageNumbers: Array of page numbers with '...' for ellipsis
|
|
|
|
Required Alpine.js methods:
|
|
- previousPage(): Go to previous page
|
|
- nextPage(): Go to next page
|
|
- goToPage(pageNum): Go to specific page
|
|
#}
|
|
|
|
{% macro pagination(show_condition="true") %}
|
|
<div x-show="{{ show_condition }}" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
|
|
{# Results Info #}
|
|
<span class="flex items-center col-span-3">
|
|
Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
|
|
</span>
|
|
<span class="col-span-2"></span>
|
|
|
|
{# Pagination Controls #}
|
|
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
|
<nav aria-label="Table navigation">
|
|
<ul class="inline-flex items-center">
|
|
{# Previous Button #}
|
|
<li>
|
|
<button
|
|
@click="previousPage()"
|
|
:disabled="pagination.page === 1"
|
|
class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
aria-label="Previous"
|
|
>
|
|
<svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
|
|
<path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
|
|
{# Page Numbers #}
|
|
<template x-for="pageNum in pageNumbers" :key="pageNum">
|
|
<li>
|
|
<button
|
|
x-show="pageNum !== '...'"
|
|
@click="goToPage(pageNum)"
|
|
class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
x-text="pageNum"
|
|
></button>
|
|
<span x-show="pageNum === '...'" class="px-3 py-1">...</span>
|
|
</li>
|
|
</template>
|
|
|
|
{# Next Button #}
|
|
<li>
|
|
<button
|
|
@click="nextPage()"
|
|
:disabled="pagination.page === totalPages"
|
|
class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
|
|
:class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
aria-label="Next"
|
|
>
|
|
<svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
|
|
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Simple Pagination Macro (Prev/Next only)
|
|
========================================
|
|
A simpler pagination with just previous/next buttons.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/pagination.html' import pagination_simple %}
|
|
{{ pagination_simple() }}
|
|
#}
|
|
|
|
{% macro pagination_simple(show_condition="true") %}
|
|
<div x-show="{{ show_condition }}" class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800">
|
|
<div class="flex items-center">
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
Showing <span class="font-semibold" x-text="startIndex"></span>-<span class="font-semibold" x-text="endIndex"></span>
|
|
of <span class="font-semibold" x-text="pagination.total"></span> results
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
@click="previousPage()"
|
|
:disabled="pagination.page === 1"
|
|
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
Page <span x-text="pagination.page"></span> of <span x-text="totalPages"></span>
|
|
</span>
|
|
<button
|
|
@click="nextPage()"
|
|
:disabled="pagination.page === totalPages"
|
|
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|