toeasy-front/src/lib/components/Tables.svelte

<script>
  import { createEventDispatcher } from 'svelte';
  import plusWhite from '$lib/assets/icons/plus-white.svg';
  import editLight from '$lib/assets/icons/edit-light.svg';
  import editDark from '$lib/assets/icons/edit-dark.svg';
  import trashLight from '$lib/assets/icons/trash-light.svg';
  import trashDark from '$lib/assets/icons/trash-dark.svg';

  // Título do bloco da tabela
  export let title = 'Lista';

  // Ex: [{ key: "nome", label: "Nome" }, { key: "preco", label: "Preço" }]
  export let columns = [];
  // Ex: [{ nome: "Produto 1", preco: 100 }, { nome: "Produto 2", preco: 200 }]
  export let data = [];

  // Controla exibição da coluna de ações
  export let showActions = true;
  // Controla botões individuais de ação
  export let showAdd = true;
  export let showEdit = true;
  export let showDelete = true;

  const dispatch = createEventDispatcher();

  function handleAddTop() {
    dispatch('addTop');
  }

  function handleEditRow(row, index) {
    dispatch('editRow', { row, index });
  }

  function handleDeleteRow(row, index) {
    dispatch('deleteRow', { row, index });
  }

  function handleRowClick(row, index) {
    dispatch('rowClick', { row, index });
  }
</script>

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-700">
    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">{title}</h3>
    {#if showAdd}
      <button
        class="inline-flex items-center justify-center rounded-md bg-blue-600 hover:bg-blue-700 text-white w-10 h-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
        type="button"
        title="Adicionar"
        on:click={handleAddTop}
      >
        <img src={plusWhite} alt="Adicionar" class="w-6 h-6" />
        <span class="sr-only">Adicionar</span>
      </button>
    {/if}
  </div>

  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-700">
        <tr>
          {#each columns as col}
            <th class="px-6 py-3 text-left text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
              {col.label}
            </th>
          {/each}
          {#if showActions}
            <th class="px-6 py-3 text-right text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">Ações</th>
          {/if}
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
        {#if data.length > 0}
          {#each data as row, index}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/60 cursor-pointer" on:click={() => handleRowClick(row, index)} on:dblclick={() => handleEditRow(row, index)}>
              {#each columns as col}
                <td class="px-6 py-3 text-base text-gray-700 dark:text-gray-300">
                  {row[col.key]}
                </td>
              {/each}
              {#if showActions}
                <td class="px-6 py-3 text-sm text-right whitespace-nowrap">
                  <div class="inline-flex items-center gap-2">
                    {#if showEdit}
                      <button
                        class="inline-flex items-center justify-center w-9 h-9 rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
                        type="button"
                        title="Editar"
                        on:click|stopPropagation={() => handleEditRow(row, index)}
                      >
                        <img src={editLight} alt="Editar" class="w-5 h-5 block dark:hidden" />
                        <img src={editDark} alt="Editar" class="w-5 h-5 hidden dark:block" />
                        <span class="sr-only">Editar</span>
                      </button>
                    {/if}
                    {#if showDelete}
                      <button
                        class="inline-flex items-center justify-center w-9 h-9 rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
                        type="button"
                        title="Excluir"
                        on:click|stopPropagation={() => handleDeleteRow(row, index)}
                      >
                        <img src={trashLight} alt="Excluir" class="w-5 h-5 block dark:hidden" />
                        <img src={trashDark} alt="Excluir" class="w-5 h-5 hidden dark:block" />
                        <span class="sr-only">Excluir</span>
                      </button>
                    {/if}
                  </div>
                </td>
              {/if}
            </tr>
          {/each}
        {:else}
          <tr>
            <td colspan={columns.length + (showActions ? 1 : 0)} class="px-4 py-6 text-center text-gray-400 dark:text-gray-500">
              Nenhum dado encontrado
            </td>
          </tr>
        {/if}
      </tbody>
    </table>
  </div>
</div>