fluxbit_view_components 0.2.0 → 0.4.0

data/lib/generators/fluxbit/templates/devise_views/sessions/new.html.erb

@@ -0,0 +1,15 @@
+<% content_for(:header) do %>
+  <%= fx_heading with_content: "Log in", size: 2, class: "text-center mt-8" %>
+<% end %>
+
+<%= form_for(resource, as: resource_name, url: session_path(resource_name), builder: Fluxbit::FormBuilder) do |f| %>
+  <%= f.fx_email_field :email, autofocus: true, autocomplete: "email", helper_popover: false, help_text: false, wrapper_html: {class: "mb-6 field"} %>
+  <%= f.fx_password :password, autocomplete: "current-password", helper_popover: false, help_text: false, wrapper_html: {class: "mb-6 field"} %>
+
+  <% if devise_mapping.rememberable? %>
+    <%= f.fx_toggle :remember_me, wrapper_html: {class: "mb-6 field"} %>
+  <% end %>
+  <%= f.fx_submit "Log in" %>
+<% end %>
+
+<%= render "devise/shared/links" %>

data/lib/generators/fluxbit/templates/devise_views/shared/_error_messages.html.erb

@@ -0,0 +1,14 @@
+<% if resource.errors.any? %>
+  <%= fx_alert(color: :danger, 'data-turbo-cache' => "false") do %>
+    <%= I18n.t("errors.messages.not_saved",
+                count: resource.errors.count,
+                resource: resource.class.model_name.human.downcase)
+      %>
+
+    <ul>
+      <% resource.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/lib/generators/fluxbit/templates/devise_views/shared/_links.html.erb

@@ -0,0 +1,25 @@
+<%- if controller_name != 'sessions' %>
+  <p><%= fx_link_to "Log in", new_session_path(resource_name) %></p>
+<% end %>
+
+<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+  <p><%= fx_link_to "Sign up", new_registration_path(resource_name) %></p>
+<% end %>
+
+<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+  <p><%= fx_link_to "Forgot your password?", new_password_path(resource_name) %></p>
+<% end %>
+
+<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+  <p><%= fx_link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %></p>
+<% end %>
+
+<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+  <p><%= fx_link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %></p>
+<% end %>
+
+<%- if devise_mapping.omniauthable? %>
+  <%- resource_class.omniauth_providers.each do |provider| %>
+    <p><%= fx_link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %></p>
+  <% end %>
+<% end %>

data/lib/generators/fluxbit/templates/devise_views/unlocks/new.html.erb

@@ -0,0 +1,11 @@
+<% content_for(:header) do %>
+  <%= fx_heading with_content: "Resend unlock instructions", size: 2, class: 'text-center' %>
+<% end %>
+
+<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }, builder: Fluxbit::FormBuilder) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+  <%= f.fx_email_field :email, autofocus: true, autocomplete: "email", wrapper_html: {class: "mb-6 field"} %>
+  <%= f.fx_submit "Resend unlock instructions" %>
+<% end %>
+
+<%= render "devise/shared/links" %>

data/lib/generators/fluxbit/templates/edit.html.erb.tt

@@ -0,0 +1,47 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<% if options[:ui] == "drawer" -%>
+<% if options[:turbo] -%>
+<%% if turbo_frame_request? %>
+  <turbo-frame id="drawer">
+    <%%= fx_drawer(id: "edit-drawer", placement: :right, sizing: :xl, data: {controller: "fx-drawer"}) do |drawer| %>
+      <%% drawer.with_header { t("<%= plural %>.titles.edit") } %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+    <script>document.dispatchEvent(new CustomEvent("showDrawer:edit-drawer"));</script>
+  </turbo-frame>
+<%% else %>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.edit") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end -%>
+<% elsif options[:ui] == "modal" -%>
+<% if options[:turbo] -%>
+<%% if turbo_frame_request? %>
+  <turbo-frame id="modal">
+    <%%= fx_modal(id: "edit-modal", size: :xl, data: {controller: "fx-modal"}) do |modal| %>
+      <%% modal.with_header { t("<%= plural %>.titles.edit") } %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+    <script>document.dispatchEvent(new CustomEvent("showModal:edit-modal"));</script>
+  </turbo-frame>
+<%% else %>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.edit") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end -%>
+<% else -%>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.edit") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<% end -%>

data/lib/generators/fluxbit/templates/fluxbit_pagy.css

@@ -0,0 +1,27 @@
+.pagy.info {
+  @apply text-sm text-slate-600 dark:text-slate-400;
+}
+
+.pagy.nav {
+  @apply inline-flex -space-x-px;
+}
+
+.pagy.nav a {
+  @apply flex items-center justify-center px-3 h-8 leading-tight text-slate-500 bg-white border border-slate-300 hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white;
+}
+
+.pagy.nav a[aria-label="previous"] {
+  @apply ms-0 border-e-0 rounded-s-lg;
+}
+
+.pagy.nav a[aria-label="next"] {
+  @apply rounded-e-lg;
+}
+
+.pagy.nav a[aria-disabled="true"] {
+  @apply px-3 py-1 text-slate-400 cursor-default;
+}
+
+.pagy.nav a.current {
+  @apply text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-slate-700 dark:border-slate-700 dark:text-white;
+}

data/lib/generators/fluxbit/templates/i18n.en.yml.tt

@@ -0,0 +1,121 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+en:
+  <%= plural %>:
+    class_name:
+      one: <%= singular.titlecase %>
+      other: <%= plural.titlecase %>
+    titles:
+      index: <%= plural.titlecase %>
+      new: New <%= singular.titlecase %>
+      edit: Edit <%= singular.titlecase %>
+      show: <%= singular.titlecase %> Details
+      index_name: Index
+    fields:
+      id: Record ID
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: <%= attr.name.titlecase %>
+<% end -%>
+      created_at: Created
+      updated_at: Last Updated
+    help_text:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Help for <%= attr.name.titlecase %>
+<% end -%>
+    helper_popover:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Helper Popover for <%= attr.name.titlecase %>
+<% end -%>
+    placeholders:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Placeholder for <%= attr.name.titlecase %>
+<% end -%>
+    prompts:
+<% attributes.select { |attr| ['references','belongs_to'].include?(attr.type) }.each do |attr| -%>
+      <%= attr.name %>_id: Select a <%= attr.name.titlecase %>
+<% end -%>
+    messages:
+      not_found: "<%= singular.titlecase %> not found."
+      not_selected_for_action: "No <%= plural %> selected for action."
+      not_authorized: "You are not authorized to perform this action."
+      no_records: "No <%= plural %> found."
+      no_records_sub: "Try adjusting your search or filters."      
+      create_success: "<%= singular.titlecase %> was successfully created."
+      update_success: "<%= singular.titlecase %> was successfully updated."
+      destroy_success: "<%= singular.titlecase %> was successfully destroyed."
+      destroy_failure: "Failed to delete <%= singular %>."
+      bulk_update_success:
+        one: "The <%= singular %> were successfully updated."
+        other: "%{count} <%= plural %> were successfully updated."
+      bulk_update_failure: "Failed to update some <%= plural %>. %{errors}"
+      bulk_destroy_success:
+        one: "The <%= singular %> were successfully deleted."
+        other: "%{count} <%= plural %> were successfully deleted."
+      bulk_destroy_failure: "Failed to delete some <%= plural %>. %{errors}"
+      order_error: "Invalid order parameter."
+      confirm_destroy: "Are you sure you want to delete this item?"
+      confirm_bulk_destroy: "Are you sure you want to delete <span id=\"mass-deletion-count\" data-fx-select-all-target=\"count\">0</span> item(s)?"
+      pagination_info: "Showing <b>%{start}</b> to <b>%{end}</b> of <b>%{total}</b> <%= plural %>"
+      errors_message: 
+        one: "%{count} error prevented this <%= singular %> from being saved:"
+        other: "%{count} errors prevented this <%= singular %> from being saved:"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      click_to_change<%= attr.name %>: Click to change <%= attr.name %>
+<% end -%> 
+    actions:
+      new: "New <%= singular.titlecase %>"
+      actions: "Actions (<span data-fx-select-all-target=\"count\">0</span>)"
+      edit: "Edit"
+      show: "Show"
+      back: "Back"
+      save: "Save"
+      cancel: "Cancel"
+      create: "Create"
+      update: "Update"
+      destroy: "Destroy"
+      export: "Export"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      activate_<%= attr.name %>_selected: Activate <%= attr.name %> selected
+      deactivate_<%= attr.name %>_selected: Deactivate <%= attr.name %> selected
+<% end -%>
+      delete_selected: "Delete Selected"
+      remove_filters: "Remove filters"
+      bulk_destroy: "Destroy Selected"
+      cancel_destroy: "No, cancel"
+      confirm_destroy: "Yes, I'm sure"
+      per_page: "%{count} per page"
+    helpers:
+      search: "Search <%= plural %>..."
+      sort: "Sort <%= plural %>..."
+      export: "Export to CSV"
+      filter: "Filter"
+<% attributes
+  .select { |a| %i[integer decimal text string].include?(a.type) }
+  .each do |attr|
+-%>
+      filter_<%= attr.name %>: "Filter by <%= attr.name %>"
+<% end -%>
+      click_to_edit: "Click to edit"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      click_to_change_<%= attr.name %>: "Click to change <%= attr.name %>"
+<% end -%>
+      click_to_destroy_selected: "Click to destroy selected"
+      submits_with: "Saving..."
+    values:
+      no_value: "-"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      <%= attr.name %>:
+        true: Active
+        false: Inactive
+<% end -%>

data/lib/generators/fluxbit/templates/i18n.pt-BR.yml.tt

@@ -0,0 +1,121 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+pt-BR:
+  <%= plural %>:
+    class_name:
+      one: <%= singular.titlecase %>
+      other: <%= plural.titlecase %>
+    titles:
+      index: <%= plural.titlecase %>
+      new: Novo <%= singular.titlecase %>
+      edit: Editar <%= singular.titlecase %>
+      show: Detalhes de <%= singular.titlecase %>
+      index_name: Inicio
+    fields:
+      id: Identificador
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: <%= attr.name.titlecase %>
+<% end -%>
+      created_at: Criado em
+      updated_at: Última Atualização
+    help_text:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Ajuda para <%= attr.name.titlecase %>
+<% end -%>
+    helper_popover:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Ajuda no popover para <%= attr.name.titlecase %>
+<% end -%>
+    placeholders:
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+      <%= attr.name %><%= ['references','belongs_to'].include?(attr.type) ? '_id' : '' %>: Placeholder para <%= attr.name.titlecase %>
+<% end -%>
+    prompts:
+<% attributes.select { |attr| ['references','belongs_to'].include?(attr.type) }.each do |attr| -%>
+      <%= attr.name %>_id: Selecione um <%= attr.name.titlecase %>
+<% end -%>
+    messages:
+      not_found: "<%= singular.titlecase %> não encontrado."
+      not_selected_for_action: "Nenhum <%= plural %> selecionado para ação."
+      not_authorized: "Você não está autorizado a executar esta ação."
+      no_records: "Nenhum <%= plural %> encontrados."
+      no_records_sub: "Tente ajustar a sua busca ou filtros."      
+      create_success: "<%= singular.titlecase %> foi criado com sucesso."
+      update_success: "<%= singular.titlecase %> foi atualizado com sucesso."
+      destroy_success: "<%= singular.titlecase %> foi apagado com sucesso."
+      destroy_failure: "Falha ao tentar apagar um <%= singular %>."
+      bulk_update_success:
+        one: "O <%= singular %> foi atualizado com sucesso."
+        other: "%{count} <%= plural %> foram atualizados com sucesso."
+      bulk_update_failure: "Falha ao tentar atualizar alguns <%= plural %>. %{errors}"
+      bulk_destroy_success:
+        one: "O <%= singular %> foi apagado com sucesso."
+        other: "%{count} <%= plural %> foram apagados com sucesso."
+      bulk_destroy_failure: "Falha ao tentar apagar alguns <%= plural %>. %{errors}"
+      order_error: "Parâmetro de ordenamento inválido."
+      confirm_destroy: "Você tem certeza de que quer apagar este item?"
+      confirm_bulk_destroy: "Você tem certeza de que quer apagar <span id=\"mass-deletion-count\" data-fx-select-all-target=\"count\">0</span> item(s)?"
+      pagination_info: "Mostrando <b>%{start}</b> à <b>%{end}</b> de <b>%{total}</b> <%= plural %>"
+      errors_message: 
+        one: "%{count} erro impediu que este <%= singular %> fosse salvo:"
+        other: "%{count} erros impediram que este <%= singular %> fosse salvo:"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      click_to_change<%= attr.name %>: Clique para modificar <%= attr.name %>
+<% end -%>
+    actions:
+      new: "Novo <%= singular.titlecase %>"
+      actions: "Ações (<span data-fx-select-all-target=\"count\">0</span>)"
+      edit: "Editar"
+      show: "Ver"
+      back: "Voltar"
+      save: "Salvar"
+      cancel: "Cancelar"
+      create: "Criar"
+      update: "Atualizar"
+      destroy: "Apagar"
+      export: "Exportar"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      activate_<%= attr.name %>_selected: Ativar <%= attr.name %> selecionado
+      deactivate_<%= attr.name %>_selected: Desativar <%= attr.name %> selecionado
+<% end -%>
+      delete_selected: "Apagar selecionado"
+      remove_filters: "Remover filtros"
+      bulk_destroy: "Apagar selecionados"
+      cancel_destroy: "Não, cancelar"
+      confirm_destroy: "Sim, Tenho certeza"
+      per_page: "%{count} por página"
+    helpers:
+      search: "Procurar <%= plural %>..."
+      sort: "Ordenar <%= plural %>..."
+      export: "Exportar para CSV"
+      filter: "Filtrar"
+<% attributes
+  .select { |a| %i[integer decimal text string].include?(a.type) }
+  .each do |attr|
+-%>
+      filter_<%= attr.name %>: "Filtrar por <%= attr.name %>"
+<% end -%>
+      click_to_edit: "Clique para editar"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      click_to_change_<%= attr.name %>: "Clique para mudar <%= attr.name %>"
+<% end -%>
+      click_to_destroy_selected: "Clique para apagar selecionados"
+      submits_with: "Salvando..."
+    values:
+      no_value: "-"
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+      <%= attr.name %>:
+        true: Ativo
+        false: Inativo
+<% end -%>

data/lib/generators/fluxbit/templates/index.html.erb.tt

@@ -0,0 +1,254 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<div data-controller="fx-select-all">
+  <div id="notice" class="fixed top-4 right-4 z-50 max-w-md w-auto">
+    <%%= render "shared/flash" %>
+  </div>
+<% if options[:turbo] -%>
+<% if options[:ui] == "drawer" -%>
+  <turbo-frame id="drawer"></turbo-frame>
+<% elsif options[:ui] == "modal" -%>
+  <turbo-frame id="modal"></turbo-frame>
+<% end -%>
+<% end -%>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.index") } %>
+  
+  <%%= fx_breadcrumb(class: "m-4") do |breadcrumb| %>
+    <%% breadcrumb.with_item(href: root_path, icon: "heroicons_solid:home") %>
+<% if namespaced? -%>
+<% namespace_path.split("/").each do |ns| -%>
+    <%% breadcrumb.with_item { "<%= ns.camelize %>" } %>
+<% end -%>
+<% end -%>
+    <%% breadcrumb.with_item(href: <%= path_prefix %><%= plural %>_path) { t("<%= plural %>.titles.index") } %>
+    <%% breadcrumb.with_item(current_page: true) { t("<%= plural %>.titles.index_name") } %>
+  <%% end %>
+
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= form_with(id: "<%= singular %>_index", url: <%= path_prefix %><%= plural %>_path, method: :get, local: true,
+          data: { controller: "fx-auto-submit" }) do |form| %>
+        <div class="flex justify-between">
+          <div class="flex gap-2 items-end">
+<% if options[:paginator] -%>
+            <input type="hidden" id="perPageParam" name="per_page" value="<%%= params["per_page"] %>">
+<% end -%>
+            <%%= fx_text_field name: :q, value: params[:q], type: :search,
+                placeholder: t("<%= plural %>.helpers.search"),
+                addon: "heroicons_solid:magnifying-glass",
+                data: { action: 'keydown.enter->fx-auto-submit#submit' } %>
+            <%% if @has_filters %>
+              <%%= fx_button as: :a, href: <%= path_prefix %><%= plural %>_path(<% if options[:paginator] %>per_page: params["per_page"]<% end %>),
+                  color: :light, class: "w-auto px-4 h-[42px]", remove_class: "w-full",
+                  title: t("<%= plural %>.actions.remove_filters") do %>
+                <%%= anyicon("heroicons_solid:x-mark", class: "size-3") %>
+              <%% end #button %>
+            <%% end %>
+          </div>
+          <div class="flex gap-2">
+            <%%= fx_button as: :a, href: new_<%= path_prefix %><%= singular %>_path,
+                class: "w-auto px-4", remove_class: "w-full"<% if options[:turbo] && options[:ui] != "none" %>, data: { turbo_frame: "<%= options[:ui] == "modal" ? "modal" : "drawer" %>" }<% end %> do %>
+              <%%= anyicon("heroicons_solid:plus", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.actions.new") %></span>
+            <%% end #button %>
+
+            <%%= fx_button id: "actionButton", as: :button, type: "button", color: :light, class: "w-auto px-4",
+                title: "Actions", data: { "fx-select-all-target": "showOnEmptySelect" },
+                remove_class: "w-full" do |actions_button| %>
+              <%%= anyicon("heroicons_solid:ellipsis-vertical", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline">
+                <%%== t("<%= plural %>.actions.actions") %>
+              </span>
+              <%% actions_button.with_dropdown(id: "dropdownActionButton") do |dropdown| %>
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      class: "inline-flex px-2",
+                      data: { 
+                        controller: "fx-method-link",
+                        fx_method_link_method_value: "patch",
+                        fx_method_link_url_value: update_all_<%= path_prefix %><%= plural %>_path,
+                        fx_method_link_params_value: { <%= singular %>: { <%= attr.name %>: true } },
+                        fx_method_link_form_data_id_value: "<%= singular %>_edit"
+                      },
+                      title: t("<%= plural %>.messages.click_to_change_<%= attr.name %>") do %>
+                    <%%= anyicon("heroicons_solid:check-circle", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.activate_<%= attr.name %>_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      class: "inline-flex px-2",
+                      data: { 
+                        controller: "fx-method-link",
+                        fx_method_link_method_value: "patch",
+                        fx_method_link_url_value: update_all_<%= path_prefix %><%= plural %>_path,
+                        fx_method_link_params_value: { <%= singular %>: { <%= attr.name %>: false } },
+                        fx_method_link_form_data_id_value: "<%= singular %>_edit"
+                      },
+                      title: t("<%= plural %>.messages.click_to_change_<%= attr.name %>") do %>
+                    <%%= anyicon("heroicons_solid:x-circle", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.deactivate_<%= attr.name %>_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+<% end -%>
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      onclick: "event.preventDefault();",
+                      class: "inline-flex px-2",
+                      data: {
+                        "modal-target": "confirm-mass-deletion-modal",
+                        "modal-toggle": "confirm-mass-deletion-modal"
+                      },
+                      title: t("<%= plural %>.messages.click_to_destroy_selected") do %>
+                    <%%= anyicon("heroicons_solid:trash", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.delete_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+              <%% end # dropdown %>
+            <%% end # button %>
+
+            <%%= fx_button id: "filterButton", as: :button, type: "button", color: :light, class: "w-auto px-4",
+                title: t("<%= plural %>.helpers.filter"), remove_class: "w-full" do |filter_button| %>
+              <%%= anyicon("heroicons_solid:funnel", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.helpers.filter") %></span>
+              <%% filter_button.with_dropdown(id: "dropdownFilterButton") do |dropdown| %>
+                <div class="px-2">
+<% attributes
+  .select { |a| %i[integer decimal text string].include?(a.type) }
+  .first(5)
+  .each do |attr|
+-%>
+                  <%%= fx_text_field id: "<%= attr.name %>Filter", label: t("<%= plural %>.fields.<%= attr.name -%>"), name: "<%= attr.name -%>",
+                      value: @<%= attr.name %>, placeholder: t("<%= plural %>.helpers.filter_<%= attr.name -%>"), class: "mb-2",
+                      data: { action: "keydown.enter->fx-auto-submit#submit" }
+                  %>
+<% end -%>
+                  <%% if @has_filters %>
+                    <%%= fx_link href: <%= path_prefix %><%= plural -%>_path(<% if options[:paginator] %>per_page: params["per_page"]<% end %>) { t("<%= plural -%>.actions.remove_filters") } %>
+                  <%% end %>
+                </div>
+              <%% end #dropdown %>
+            <%% end # button %>
+
+            <%%= fx_button as: :a, href: <%= path_prefix %><%= plural -%>_path(request.query_parameters.merge(format: :csv)), type: "button",
+                color: :light, class: "w-auto px-4", title: t("<%= plural %>.helpers.export"), remove_class: "w-full" do %>
+              <%%= anyicon("heroicons_solid:arrow-down-tray", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.actions.export") %></span>
+            <%% end # button %>
+          </div>
+        </div>
+      <%% end #form %>
+    <%% end # section %>
+
+    <%% card.with_section(no_class: true) do %>
+      <%%= form_with(id: "<%= singular %>_edit", name: "<%= singular %>_edit", url: <%= path_prefix %><%= plural %>_path, method: :get, local: true) do |form| %>
+        <%%= fx_table(striped: true, bordered: true, hover: true, tbody_html: {id: "<%= plural %>"}) do |table| %>
+          <%% table.with_header do |header| %>
+            <%% header.with_cell(title: "Select All/Deselect All") {
+              fx_checkbox(id: "<%= singular %>_select_all", data: { "fx-select-all-target": "selectAll" }) } %>
+<% attributes.reject { |attr| attr.type == :password_digest }.first(5).each do |attr| -%>
+            <%% header.with_cell { fx_sort_field(:<%= attr.name %>, :<%= path_prefix %><%= plural %>_path, t("<%= plural %>.fields.<%= attr.name %>")) } %>
+<% end -%>
+            <%% header.with_cell { "" } %>
+          <%% end %>
+          <%% if @<%= plural %>.count > 0 %>
+            <%% render "<%= plural %>", <%= plural %>: @<%= plural %> %>
+          <%% else %>
+            <tr id="not_found"><td colspan=7>
+              <div class="text-center text-gray-500 dark:text-gray-400 py-20 flex flex-col items-center justify-center">
+                <%%= anyicon("heroicons_solid:exclamation-circle", class: "size-12 mb-2") %>
+                <p><%%= t("<%= plural %>.messages.no_records") %></p>
+                <p><%%= t("<%= plural %>.messages.no_records_sub") %></p>
+              </div>
+            </td></tr>
+          <%% end %>
+        <%% end # table %>
+      <%% end # form %>
+    <%% end #section %>
+
+<% if options[:paginator] -%>
+    <%% if @<%= plural %>.count > 1 %>
+      <%% card.with_section do %>
+        <%%= fx_flex(gap: 2, align_items: :center, justify_content: :space_between) do %>
+          <div class="text-sm text-gray-700 dark:text-gray-400 m-0 p-2">
+            <%%== t("<%= plural %>.messages.pagination_info", start: @pagy.from, end: @pagy.to, total: @pagy.count) %>
+          </div>
+          <%%= fx_flex(gap: 2, align_items: :center) do %>
+            <%%= fx_pagination(@pagy, id: 'nav', sizing: 1, show_first_last: true) if @<%= plural %>.count > @page_size%>
+            <%%= fx_select id: "perPage", name:"per_page", class: "pr-4", data: {
+                controller: "fx-assigner fx-auto-submit",
+                fx_assigner_change_param: {
+                    "#perPageParam" => {
+                      "value": { element: "#per_page", attribute: "value" }
+                    }
+                  }.to_json,
+                fx_assigner_prevent_default_param: "true",
+                fx_auto_submit_form_id_param: "<%= singular %>_index",
+                action: "change->fx-assigner#assign change->fx-auto-submit#submit",
+              },
+              options: options_for_select([
+                [t("<%= plural %>.actions.per_page", count: 5), "5"],
+                [t("<%= plural %>.actions.per_page", count: 10), "10"],
+                [t("<%= plural %>.actions.per_page", count: 20), "20"],
+                [t("<%= plural %>.actions.per_page", count: 50), "50"],
+                [t("<%= plural %>.actions.per_page", count: 100), "100"]
+              ], selected: params["per_page"] || "5") %>
+          <%% end # flex %>
+        <%% end # flex %>
+      <%% end # section %>
+    <%% end # if count %>
+<% end -%>
+  <%% end # card %>
+
+  <%%= fx_modal id: "confirm-deletion-modal", size: 1 do |modal| %>
+    <%%= fx_flex(vertical: true, align_items: :center) do %>
+      <%%= anyicon("heroicons_solid:trash", class: "size-11 text-red-600 pb-2") %>
+      <%%= t("<%= plural %>.messages.confirm_destroy") %>
+      <%%= fx_flex(gap: 2, class: "mt-4") do %>
+        <%%= fx_button(as: :button, color: :light, class: "w-auto px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-deletion-modal",
+              "modal-toggle": "confirm-deletion-modal"
+            }) { t("<%= plural %>.actions.cancel_destroy") } %>
+        <%%= fx_button(as: :a, href: "#", id: "confirm-deletion-button",
+            color: :danger, class: "w-auto text-nowrap px-4", remove_class: "w-full",
+            data: {
+              controller: "fx-method-link",
+              fx_method_link_method_value: "delete",
+              fx_method_link_url_value: <%= path_prefix %><%= singular %>_path(0),
+              "modal-target": "confirm-deletion-modal",
+              "modal-toggle": "confirm-deletion-modal"
+            }) { t("<%= plural %>.actions.confirm_destroy") } %>
+      <%% end #flex %>
+    <%% end #flex %>
+  <%% end # modal %>
+
+  <%%= fx_modal id: "confirm-mass-deletion-modal", size: 1 do |modal| %>
+    <%%= fx_flex(vertical: true, align_items: :center) do %>
+      <%%= anyicon("heroicons_solid:trash", class: "size-11 text-red-600 pb-2") %>
+      <div><%%== t("<%= plural %>.messages.confirm_bulk_destroy") %></div>
+      <%%= fx_flex(gap: 2, class: "mt-4") do %>
+        <%%= fx_button(as: :button, color: :light, class: "w-auto px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-mass-deletion-modal",
+              "modal-toggle": "confirm-mass-deletion-modal"
+            }) { t("<%= plural %>.actions.cancel_destroy") } %>
+        <%%= fx_button(as: :a, href: "#", id: "confirm-deletion-button",
+            color: :danger, class: "w-auto text-nowrap px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-mass-deletion-modal",
+              "modal-toggle": "confirm-mass-deletion-modal",
+
+              controller: "fx-method-link",
+              fx_method_link_method_value: "delete",
+              fx_method_link_url_value: destroy_all_<%= path_prefix %><%= plural %>_path,
+              fx_method_link_form_data_id_value: "<%= singular %>_edit"
+            }) { t("<%= plural %>.actions.confirm_destroy") } %>
+      <%% end #flex %>
+    <%% end #flex %>
+  <%% end # modal %>
+</div>