First Commit

templates/components/alerts.twig

@@ -0,0 +1,4 @@
+<div x-data="{ show: true }" x-show="show" class="alert alert-warning alert-dismissible fade show">
+    {{ __("attention_message") }}
+    <button type="button" class="btn-close" @click="show = false"></button>
+</div>

templates/components/dropdown.twig

@@ -0,0 +1,13 @@
+<div class="dropdown" x-data="{ open: false }">
+
+    <button class="btn btn-secondary dropdown-toggle"
+            @click="open = !open">
+        Menu
+    </button>
+
+    <ul class="dropdown-menu" x-show="open" @click.outside="open = false">
+        <li><a class="dropdown-item" href="#">{{ __("option1") }}</a></li>
+        <li><a class="dropdown-item" href="#">{{ __("option2") }}</a></li>
+    </ul>
+
+</div>

templates/components/modal.twig

@@ -0,0 +1,29 @@
+<div x-data="{ open: false }">
+
+    <button class="btn btn-primary" @click="open = true">
+        Abrir Modal
+    </button>
+
+    <div class="modal fade" x-show="open" x-transition @keydown.escape.window="open = false"
+         style="display: block;" @click.self="open = false">
+
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+
+                <div class="modal-header">
+                    <h5 class="modal-title">{{ __("example_modal") }}</h5>
+                    <button class="btn-close" @click="open = false"></button>
+                </div>
+
+                <div class="modal-body">
+                    {{ __("modal_content") }}
+                </div>
+
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" @click="open = false">{{ __("close") }}</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

templates/components/paginator.twig

@@ -0,0 +1,35 @@
+{# paginator.twig #}
+{% if paginator.total_pages > 1 %}
+<nav aria-label="Paginação" class="my-3">
+    <ul class="pagination justify-content-center">
+
+        {# Previous #}
+        <li class="page-item {% if not paginator.has_prev %}disabled{% endif %}">
+            <a class="page-link"
+               href="{{ paginator.base_url ~ (paginator.current_page - 1) }}"
+               tabindex="-1">
+                Anterior
+            </a>
+        </li>
+
+        {# Page numbers #}
+        {% for page in 1..paginator.total_pages %}
+            <li class="page-item {% if page == paginator.current_page %}active{% endif %}">
+                <a class="page-link"
+                   href="{{ paginator.base_url ~ page }}">
+                    {{ page }}
+                </a>
+            </li>
+        {% endfor %}
+
+        {# Next #}
+        <li class="page-item {% if not paginator.has_next %}disabled{% endif %}">
+            <a class="page-link"
+               href="{{ paginator.base_url ~ (paginator.current_page + 1) }}">
+                Próximo
+            </a>
+        </li>
+
+    </ul>
+</nav>
+{% endif %}

templates/components/password-field.twig

@@ -0,0 +1,8 @@
+{% set req = required is defined and required ? 'required' : '' %}
+<div class="form-floating mb-3 position-relative" x-data="{show:false}">
+    <input :type="show ? 'text' : 'password'" class="form-control" id="{{ id }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ req }}>
+    <label for="{{ id }}">{{ label }}</label>
+    <button type="button" class="btn btn-outline-secondary btn-sm position-absolute top-50 end-0 translate-middle-y me-2" @click="show = !show" aria-label="Toggle password visibility">
+        <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
+    </button>
+</div>

templates/components/tabs.twig

@@ -0,0 +1,16 @@
+<div x-data="{ tab: 'one' }">
+
+    <ul class="nav nav-tabs mb-3">
+        <li class="nav-item">
+            <a class="nav-link" :class="{ 'active': tab === 'one' }" @click="tab = 'one'">Tab 1</a>
+        </li>
+
+        <li class="nav-item">
+            <a class="nav-link" :class="{ 'active': tab === 'two' }" @click="tab = 'two'">Tab 2</a>
+        </li>
+    </ul>
+
+    <div x-show="tab === 'one'">Conteúdo da aba 1</div>
+    <div x-show="tab === 'two'">Conteúdo da aba 2</div>
+
+</div>