@groupteknology/vuno 0.4.0 → 0.6.1

package/dist/runtime/app/components/Table/Table.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
+import { computed, useTemplateRef } from "vue";
 import EmptyState from "#vuno/components/State/EmptyState.vue";
 import FailureState from "#vuno/components/State/FailureState.vue";
 import Form from "#vuno/components/Form/Form.vue";
 import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
-import { getPath } from "#vuno/utils/path";
+import { useVunoTable } from "#vuno/internal/useVunoTable";
+import { resolveColumnValue } from "#vuno/utils/column";
 import TableCell from "./TableCell.vue";
 const props = defineProps({
   data: { type: Array, required: true },
@@ -23,128 +24,29 @@ defineSlots();
 const icons = useVunoIcons();
 const messages = useVunoMessages();
 const ui = useVunoTheme("table", () => props.ui);
-const rowKey = computed(() => props.definition.rowKey ?? "id");
-const pageSizes = computed(() => props.definition.pageSizes ?? [10, 25, 50, 100]);
-const getRowId = (row) => String(getPath(row, rowKey.value) ?? "");
-const search = ref(query.value.search);
-let searchTimer;
-watch(search, (value) => {
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => {
-    if (value === query.value.search) return;
-    query.value = { ...query.value, page: 1, search: value };
-  }, 300);
+const table = useVunoTable({
+  query,
+  selection,
+  definition: () => props.definition,
+  total: () => total.value
 });
-watch(
-  () => query.value.search,
-  (value) => {
-    if (value !== search.value) search.value = value;
-  }
-);
-onBeforeUnmount(() => clearTimeout(searchTimer));
+const { activeFilters, applyFilters, clearFilters, clearSelection, columns, filtersDefinition, filtersOpen, filterState, getRowId, goToPage, pageSizes, paginated, rangeEnd, rangeStart, removeFilter, rowSelection, search, searchable, setPageSize, sortDirectionFor, toggleSort } = table;
 const searchInput = useTemplateRef("searchInput");
 function clearSearch() {
-  clearTimeout(searchTimer);
-  search.value = "";
-  query.value = { ...query.value, page: 1, search: "" };
+  table.clearSearch();
   searchInput.value?.inputRef?.focus();
 }
-function sortDirectionFor(key) {
-  return query.value.sort?.column === key ? query.value.sort.direction : null;
-}
-function toggleSort(key) {
-  const current = sortDirectionFor(key);
-  const sort = current === null ? { column: key, direction: "asc" } : current === "asc" ? { column: key, direction: "desc" } : null;
-  query.value = { ...query.value, page: 1, sort };
-}
 function sortIcon(key) {
   const direction = sortDirectionFor(key);
   if (direction === "asc") return icons.value.sortAsc;
   if (direction === "desc") return icons.value.sortDesc;
   return icons.value.sort;
 }
-const filtersOpen = ref(false);
-const filterState = ref({ ...query.value.filters });
-watch(
-  () => query.value.filters,
-  (value) => {
-    filterState.value = { ...value };
-  },
-  { deep: true }
-);
-const hasValue = (value) => value !== void 0 && value !== null && value !== "";
-const filtersDefinition = computed(() => ({
-  sections: [{ id: "filters", fields: props.definition.filters ?? [] }]
-}));
-const activeFilters = computed(
-  () => (props.definition.filters ?? []).filter((field) => hasValue(query.value.filters[field.name])).map((field) => {
-    const value = query.value.filters[field.name];
-    const option = "items" in field ? field.items?.find((item) => String(item.value) === String(value)) : void 0;
-    return {
-      name: field.name,
-      label: field.label ?? field.name,
-      value: option?.label ?? String(value)
-    };
-  })
-);
-function applyFilters() {
-  query.value = { ...query.value, filters: { ...filterState.value }, page: 1 };
-  filtersOpen.value = false;
-}
-function clearFilters() {
-  filterState.value = {};
-  query.value = { ...query.value, filters: {}, page: 1 };
-  filtersOpen.value = false;
-}
-function removeFilter(name) {
-  const filters = { ...query.value.filters };
-  delete filters[name];
-  query.value = { ...query.value, filters, page: 1 };
-}
-const rowSelection = computed({
-  get: () => Object.fromEntries(selection.value.map((key) => [String(key), true])),
-  set: (value) => {
-    selection.value = Object.entries(value).filter(([, selected]) => selected).map(([key]) => key);
-  }
-});
-const clearSelection = () => {
-  selection.value = [];
-};
-const columns = computed(() => {
-  const list = [];
-  if (props.definition.selectable) {
-    list.push({ id: "select", enableSorting: false });
-  }
-  for (const column of props.definition.columns) {
-    list.push({
-      id: column.key,
-      accessorKey: column.key,
-      enableSorting: false,
-      // La columna de acciones no lleva rótulo salvo que se pida uno.
-      header: column.type === "actions" ? column.label ?? "" : column.label ?? column.key,
-      meta: {
-        class: {
-          td: [column.align === "end" ? "text-end" : column.align === "center" ? "text-center" : "", column.class].filter(Boolean).join(" "),
-          th: [column.align === "end" ? "text-end" : column.align === "center" ? "text-center" : "", column.width].filter(Boolean).join(" ")
-        }
-      }
-    });
-  }
-  return list;
-});
-const rangeStart = computed(() => total.value === 0 ? 0 : (query.value.page - 1) * query.value.pageSize + 1);
-const rangeEnd = computed(() => Math.min(query.value.page * query.value.pageSize, total.value));
-function onPageChange(page) {
-  query.value = { ...query.value, page };
-}
-function onPageSizeChange(size) {
-  query.value = { ...query.value, page: 1, pageSize: size };
-}
 defineExpose({
   clearFilters,
   clearSearch,
   clearSelection,
-  goToPage: onPageChange
+  goToPage
 });
 function onRowSelect(_event, row) {
   emit("rowClick", row.original);
@@ -152,197 +54,198 @@ function onRowSelect(_event, row) {
 </script>
 
 <template>
-    <div :class="ui.root">
-        <div :class="ui.toolbar">
-            <UInput
-                ref="searchInput"
-                v-model="search"
-                :icon="icons.search"
-                :placeholder="props.definition.searchPlaceholder ?? messages.searchPlaceholder"
-                :ui="{ root: ui.search }"
-            >
-                <template
-                    v-if="search.length > 0"
-                    #trailing
-                >
-                    <UButton
-                        :aria-label="messages.clearSearch"
-                        color="neutral"
-                        :icon="icons.clearSearch"
-                        size="xs"
-                        variant="link"
-                        @click="clearSearch"
-                    />
-                </template>
-            </UInput>
-
-            <div :class="ui.toolbarActions">
-                <UButton
-                    v-if="(props.definition.filters?.length ?? 0) > 0"
-                    color="neutral"
-                    :icon="icons.filter"
-                    :label="messages.filters"
-                    variant="outline"
-                    @click="filtersOpen = true"
-                >
-                    <!-- `UButton` no admite `badge`: el contador va en el slot. -->
-                    <template
-                        v-if="activeFilters.length > 0"
-                        #trailing
-                    >
-                        <UBadge
-                            color="primary"
-                            :label="String(activeFilters.length)"
-                            size="sm"
-                            variant="solid"
-                        />
-                    </template>
-                </UButton>
-
-                <slot
-                    name="toolbar"
-                    :query="query"
-                />
-            </div>
-        </div>
-
-        <div
-            v-if="props.definition.selectable && selection.length > 0"
-            :class="ui.selection"
-        >
-            <slot
-                :clear="clearSelection"
-                :count="selection.length"
-                :keys="selection"
-                name="selection"
-            >
-                <span>{{ selection.length }} {{ selection.length === 1 ? messages.rowSelected : messages.rowsSelected }}</span>
-                <UButton
-                    color="neutral"
-                    :label="messages.clearSelection"
-                    size="xs"
-                    variant="ghost"
-                    @click="clearSelection"
-                />
-            </slot>
-        </div>
-
-        <div
-            v-if="activeFilters.length > 0"
-            :class="ui.chips"
-        >
-            <UBadge
-                v-for="filter in activeFilters"
-                :key="filter.name"
-                color="neutral"
-                variant="subtle"
-            >
-                <span>{{ filter.label }}: {{ filter.value }}</span>
-                <UButton
-                    :aria-label="`${messages.clearFilters}: ${filter.label}`"
-                    color="neutral"
-                    :icon="icons.fileRemove"
-                    size="xs"
-                    variant="link"
-                    @click="removeFilter(filter.name)"
-                />
-            </UBadge>
-
-            <UButton
-                color="neutral"
-                :label="messages.clearFilters"
-                size="xs"
-                variant="ghost"
-                @click="clearFilters"
-            />
-        </div>
-
-        <USlideover
-            v-model:open="filtersOpen"
-            :title="messages.filtersTitle"
-        >
-            <template #body>
-                <Form
-                    v-model:state="filterState"
-                    :definition="filtersDefinition"
-                    :ui="{ sections: ui.filtersBody }"
-                />
-            </template>
-
-            <template #footer>
-                <div :class="ui.filtersFooter">
-                    <UButton
-                        color="neutral"
-                        :label="messages.clearFilters"
-                        variant="ghost"
-                        @click="clearFilters"
-                    />
-                    <UButton
-                        :label="messages.applyFilters"
-                        @click="applyFilters"
-                    />
-                </div>
-            </template>
-        </USlideover>
-
-        <UTable
-            v-model:rowSelection="rowSelection"
-            :columns="columns"
-            :data="hasFailure ? [] : props.data"
-            :getRowId="getRowId"
-            :loading="props.loading ?? false"
-            :paginationOptions="{ manualPagination: true }"
-            :sortingOptions="{ manualSorting: true }"
-            :ui="{ base: ui.table, tbody: ui.tbody, td: ui.td, th: ui.th }"
-            @select="onRowSelect"
-        >
-            <template #select-header>
-                <UCheckbox
-                    :modelValue="props.data.length > 0 && props.data.every((row2) => selection.includes(getRowId(row2)))"
+    <div :class="ui.root">
+        <div :class="ui.toolbar">
+            <UInput
+                v-if="searchable"
+                ref="searchInput"
+                v-model="search"
+                :icon="icons.search"
+                :placeholder="props.definition.searchPlaceholder ?? messages.searchPlaceholder"
+                :ui="{ root: ui.search }"
+            >
+                <template
+                    v-if="search.length > 0"
+                    #trailing
+                >
+                    <UButton
+                        :aria-label="messages.clearSearch"
+                        color="neutral"
+                        :icon="icons.clearSearch"
+                        size="xs"
+                        variant="link"
+                        @click="clearSearch"
+                    />
+                </template>
+            </UInput>
+
+            <div :class="ui.toolbarActions">
+                <UButton
+                    v-if="(props.definition.filters?.length ?? 0) > 0"
+                    color="neutral"
+                    :icon="icons.filter"
+                    :label="messages.filters"
+                    variant="outline"
+                    @click="filtersOpen = true"
+                >
+                    <!-- `UButton` no admite `badge`: el contador va en el slot. -->
+                    <template
+                        v-if="activeFilters.length > 0"
+                        #trailing
+                    >
+                        <UBadge
+                            color="primary"
+                            :label="String(activeFilters.length)"
+                            size="sm"
+                            variant="solid"
+                        />
+                    </template>
+                </UButton>
+
+                <slot
+                    name="toolbar"
+                    :query="query"
+                />
+            </div>
+        </div>
+
+        <div
+            v-if="props.definition.selectable && selection.length > 0"
+            :class="ui.selection"
+        >
+            <slot
+                :clear="clearSelection"
+                :count="selection.length"
+                :keys="selection"
+                name="selection"
+            >
+                <span>{{ selection.length }} {{ selection.length === 1 ? messages.rowSelected : messages.rowsSelected }}</span>
+                <UButton
+                    color="neutral"
+                    :label="messages.clearSelection"
+                    size="xs"
+                    variant="ghost"
+                    @click="clearSelection"
+                />
+            </slot>
+        </div>
+
+        <div
+            v-if="activeFilters.length > 0"
+            :class="ui.chips"
+        >
+            <UBadge
+                v-for="filter in activeFilters"
+                :key="filter.name"
+                color="neutral"
+                variant="subtle"
+            >
+                <span>{{ filter.label }}: {{ filter.value }}</span>
+                <UButton
+                    :aria-label="`${messages.clearFilters}: ${filter.label}`"
+                    color="neutral"
+                    :icon="icons.fileRemove"
+                    size="xs"
+                    variant="link"
+                    @click="removeFilter(filter.name)"
+                />
+            </UBadge>
+
+            <UButton
+                color="neutral"
+                :label="messages.clearFilters"
+                size="xs"
+                variant="ghost"
+                @click="clearFilters"
+            />
+        </div>
+
+        <USlideover
+            v-model:open="filtersOpen"
+            :title="messages.filtersTitle"
+        >
+            <template #body>
+                <Form
+                    v-model:state="filterState"
+                    :definition="filtersDefinition"
+                    :ui="{ sections: ui.filtersBody }"
+                />
+            </template>
+
+            <template #footer>
+                <div :class="ui.filtersFooter">
+                    <UButton
+                        color="neutral"
+                        :label="messages.clearFilters"
+                        variant="ghost"
+                        @click="clearFilters"
+                    />
+                    <UButton
+                        :label="messages.applyFilters"
+                        @click="applyFilters"
+                    />
+                </div>
+            </template>
+        </USlideover>
+
+        <UTable
+            v-model:rowSelection="rowSelection"
+            :columns="columns"
+            :data="hasFailure ? [] : props.data"
+            :getRowId="getRowId"
+            :loading="props.loading ?? false"
+            :paginationOptions="{ manualPagination: true }"
+            :sortingOptions="{ manualSorting: true }"
+            :ui="{ base: ui.table, root: ui.tableRoot, tbody: ui.tbody, td: ui.td, th: ui.th }"
+            @select="onRowSelect"
+        >
+            <template #select-header>
+                <UCheckbox
+                    :modelValue="props.data.length > 0 && props.data.every((row2) => selection.includes(getRowId(row2)))"
                     @update:model-value="
   (checked) => {
     const keys = props.data.map((row2) => getRowId(row2));
     selection = checked ? [.../* @__PURE__ */ new Set([...selection, ...keys])] : selection.filter((key) => !keys.includes(String(key)));
   }
-"
-                />
-            </template>
-
-            <template #select-cell="{ row }">
-                <UCheckbox
-                    :modelValue="row.getIsSelected()"
-                    @update:model-value="row.toggleSelected(!row.getIsSelected())"
-                />
-            </template>
-
-            <template
-                v-for="column in props.definition.columns"
-                :key="`${column.key}-header`"
-                #[`${column.key}-header`]
-            >
-                <UButton
-                    v-if="column.sortable"
-                    class="-mx-2"
-                    color="neutral"
-                    :icon="sortIcon(column.key)"
-                    :label="column.label ?? column.key"
-                    size="xs"
-                    trailing
-                    variant="ghost"
-                    @click="toggleSort(column.key)"
-                />
-                <span v-else>{{ column.type === "actions" ? column.label ?? "" : column.label ?? column.key }}</span>
-            </template>
-
-            <template
-                v-for="column in props.definition.columns"
-                :key="`${column.key}-cell`"
-                #[`${column.key}-cell`]="{ row }"
-            >
-                <!-- `stop`: sin esto, abrir el menú dispara también el clic de
-                     fila y se acaban abriendo dos diálogos a la vez. -->
-                <UDropdownMenu
-                    v-if="column.type === 'actions'"
+"
+                />
+            </template>
+
+            <template #select-cell="{ row }">
+                <UCheckbox
+                    :modelValue="row.getIsSelected()"
+                    @update:model-value="row.toggleSelected(!row.getIsSelected())"
+                />
+            </template>
+
+            <template
+                v-for="column in props.definition.columns"
+                :key="`${column.key}-header`"
+                #[`${column.key}-header`]
+            >
+                <UButton
+                    v-if="column.sortable"
+                    class="-mx-2"
+                    color="neutral"
+                    :icon="sortIcon(column.key)"
+                    :label="column.label ?? column.key"
+                    size="xs"
+                    trailing
+                    variant="ghost"
+                    @click="toggleSort(column.key)"
+                />
+                <span v-else>{{ column.type === "actions" ? column.label ?? "" : column.label ?? column.key }}</span>
+            </template>
+
+            <template
+                v-for="column in props.definition.columns"
+                :key="`${column.key}-cell`"
+                #[`${column.key}-cell`]="{ row }"
+            >
+                <!-- `stop`: sin esto, abrir el menú dispara también el clic de
+                     fila y se acaban abriendo dos diálogos a la vez. -->
+                <UDropdownMenu
+                    v-if="column.type === 'actions'"
                     :items="[
   column.actions.filter((action) => !action.hidden?.(row.original)).map((action) => ({
     color: action.color,
@@ -351,82 +254,92 @@ function onRowSelect(_event, row) {
     label: action.label,
     onSelect: () => action.onSelect(row.original)
   }))
-]"
-                    @click.stop
-                >
-                    <UButton
-                        :aria-label="messages.rowActions"
-                        color="neutral"
-                        :icon="icons.actions"
-                        size="xs"
-                        variant="ghost"
-                    />
-                </UDropdownMenu>
-
-                <slot
-                    v-else
-                    :name="`cell-${column.key}`"
-                    :row="row.original"
-                    :value="getPath(row.original, column.key)"
-                >
-                    <TableCell
-                        :column="column"
-                        :row="row.original"
-                    />
-                </slot>
-            </template>
-
-            <template #empty>
-                <!-- Un fallo y una lista vacía no son lo mismo: el primero
-                     ofrece reintentar, el segundo invita a crear el primero. -->
-                <FailureState
-                    v-if="props.failure"
-                    :failure="props.failure"
-                />
-
-                <!-- Cargando y sin filas todavía no es «no hay nada»: decirlo
-                     antes de tiempo hace parpadear la tabla en cada cambio. -->
-                <div v-else-if="props.loading" />
-
-                <slot
-                    v-else
-                    name="empty"
-                >
-                    <EmptyState
-                        :hint="props.definition.empty?.hint"
-                        :icon="props.definition.empty?.icon"
-                        :title="props.definition.empty?.title"
-                    >
-                        <template #actions>
-                            <slot name="empty-actions" />
-                        </template>
-                    </EmptyState>
-                </slot>
-            </template>
-        </UTable>
-
-        <div
-            v-if="total > 0 && !hasFailure"
-            :class="ui.footer"
-        >
-            <div :class="ui.meta">
-                <span>{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</span>
-
-                <USelect
-                    :items="pageSizes"
-                    :modelValue="query.pageSize"
-                    size="xs"
-                    :ui="{ base: 'w-20' }"
-                    @update:model-value="(size) => onPageSizeChange(Number(size))"
-                />
-            </div>
-
-            <UPagination
-                :itemsPerPage="query.pageSize"
-                :page="query.page"
-                :total="total"
-                @update:page="onPageChange"
-            />
-        </div>
-    </div>
+]"
+                    @click.stop
+                >
+                    <UButton
+                        :aria-label="messages.rowActions"
+                        color="neutral"
+                        :icon="icons.actions"
+                        size="xs"
+                        variant="ghost"
+                    />
+                </UDropdownMenu>
+
+                <slot
+                    v-else
+                    :name="`cell-${column.key}`"
+                    :row="row.original"
+                    :value="resolveColumnValue(column, row.original)"
+                >
+                    <TableCell
+                        :column="column"
+                        :row="row.original"
+                    />
+                </slot>
+            </template>
+
+            <template #empty>
+                <!-- Un fallo y una lista vacía no son lo mismo: el primero
+                     ofrece reintentar, el segundo invita a crear el primero. -->
+                <FailureState
+                    v-if="props.failure"
+                    :failure="props.failure"
+                />
+
+                <!-- Cargando y sin filas todavía no es «no hay nada»: decirlo
+                     antes de tiempo hace parpadear la tabla en cada cambio. -->
+                <div v-else-if="props.loading" />
+
+                <!-- Con `total` por encima de cero y sin filas, lo que falta es
+                     la página, no los datos. Se corrige sola arriba; entretanto
+                     no se afirma que no haya nada. -->
+                <div v-else-if="total > 0" />
+
+                <slot
+                    v-else
+                    name="empty"
+                >
+                    <EmptyState
+                        :hint="props.definition.empty?.hint"
+                        :icon="props.definition.empty?.icon"
+                        :title="props.definition.empty?.title"
+                    >
+                        <template #actions>
+                            <slot name="empty-actions" />
+                        </template>
+                    </EmptyState>
+                </slot>
+            </template>
+        </UTable>
+
+        <div
+            v-if="total > 0 && !hasFailure"
+            :class="ui.footer"
+        >
+            <div :class="ui.meta">
+                <span v-if="paginated">{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</span>
+
+                <!-- Sin paginar, un rango «1–30 de 30» sugiere que hay más. -->
+                <span v-else>{{ total }} {{ messages.results }}</span>
+
+                <USelect
+                    v-if="paginated"
+                    :items="pageSizes"
+                    :modelValue="query.pageSize"
+                    size="xs"
+                    :ui="{ base: 'w-20' }"
+                    @update:model-value="(size) => setPageSize(Number(size))"
+                />
+            </div>
+
+            <UPagination
+                v-if="paginated"
+                :itemsPerPage="query.pageSize"
+                :page="query.page"
+                :total="total"
+                @update:page="goToPage"
+            />
+        </div>
+    </div>
 </template>