@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,323 +1,169 @@
 <script setup>
-import { computed, useId, useTemplateRef } from "vue";
+import { computed } from "vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { getPath } from "#vuno/utils/path";
 import { cn } from "#vuno/utils/theme";
-import Badge from "#vuno/components/Badge/Badge.vue";
 import Button from "#vuno/components/Button/Button.vue";
 import Checkbox from "#vuno/components/FieldCheckbox/internal/Checkbox/Checkbox.vue";
-import FieldSearch from "#vuno/components/FieldSearch/FieldSearch.vue";
-import Form from "#vuno/components/Form/Form.vue";
-import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
 import Menu from "#vuno/components/Menu/Menu.vue";
-import Pagination from "#vuno/components/Pagination/Pagination.vue";
-import Slideover from "#vuno/components/Slideover/Slideover.vue";
-import State from "#vuno/components/State/State.vue";
-import { resolveColumnValue } from "./internal/column";
+import Text from "#vuno/components/Text/Text.vue";
+import { resolveColumns, resolveColumnValue } from "./internal/column";
 import TableCell from "./internal/TableCell/TableCell.vue";
-import { useVunoTable } from "./internal/useVunoTable";
 import { useVunoTableSelection } from "./internal/useVunoTableSelection";
 defineOptions({ name: "VunoTable" });
-const query = defineModel("query", { type: Object, ...{ required: true } });
 const selection = defineModel("selection", { type: Array, ...{ default: () => [] } });
+const sort = defineModel("sort", { type: [null, Object], ...{ default: null } });
 const props = defineProps({
   data: { type: Array, required: true },
   definition: { type: Object, required: true },
-  failure: { type: Object, required: false },
-  loading: { type: Boolean, required: false },
   radius: { type: String, required: false },
-  total: { type: Number, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["rowClick"]);
 defineSlots();
-const total = computed(() => props.total ?? 0);
-const hasFailure = computed(() => Boolean(props.failure));
 const icons = useIcons();
 const messages = useMessages();
 const ui = useTheme(
   "table",
   () => props.ui,
-  () => ({ radius: props.radius })
+  () => ({ density: props.definition.density, radius: props.radius })
 );
-const table = useVunoTable({
-  query,
-  selection,
-  definition: () => props.definition,
-  total: () => total.value
-});
-const { activeFilters, applyFilters, clearFilters, clearQuery, clearSelection, columns, filtersDefinition, filtersOpen, filterState, getRowId, goToPage, isFiltered, pageSizes, paginated, rangeEnd, rangeStart, removeFilter, search, searchable, setPageSize, sortDirectionFor, toggleSort } = table;
-const searchField = useTemplateRef("searchField");
-const rows = computed(() => hasFailure.value ? [] : props.data);
-const footerId = useId();
-const skippable = computed(() => rows.value.length > 3 && total.value > 0 && !hasFailure.value);
+const columns = computed(() => resolveColumns(props.definition.columns));
 const columnCount = computed(() => Math.max(columns.value.length + (props.definition.selectable ? 1 : 0), 1));
+const getRowId = (row) => String(getPath(row, props.definition.rowKey ?? "id") ?? "");
 const { allSelected, isSelected, rowLabel, someSelected, toggleAll, toggleRow } = useVunoTableSelection({
   columns,
   getRowId,
   selection,
   definition: () => props.definition,
   rowName: () => messages.value.row,
-  rows: () => rows.value
+  rows: () => props.data
 });
+function sortDirectionFor(key) {
+  return sort.value?.column === key ? sort.value.direction : null;
+}
+function toggleSort(key) {
+  const current = sortDirectionFor(key);
+  if (current === null) {
+    sort.value = { column: key, direction: "asc" };
+  } else if (current === "asc") {
+    sort.value = { column: key, direction: "desc" };
+  } else {
+    sort.value = null;
+  }
+}
 function ariaSortFor(key) {
-  const column = columns.value.find((item) => item.key === key);
-  if (!column?.sortable) return void 0;
+  if (!columns.value.find((item) => item.key === key)?.sortable) return void 0;
   const direction = sortDirectionFor(key);
   if (direction === "asc") return "ascending";
   if (direction === "desc") return "descending";
   return "none";
 }
-function clearSearch() {
-  table.clearSearch();
-  searchField.value?.focus();
-}
-function updateSearch(value) {
-  if (value === "") {
-    clearSearch();
-    return;
-  }
-  search.value = value ?? "";
-}
 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;
 }
-defineExpose({
-  clearFilters,
-  clearQuery,
-  clearSearch,
-  clearSelection,
-  goToPage
-});
+function activateRow(row) {
+  if (props.definition.interactive) emit("rowClick", row);
+}
 </script>
 
 <template>
-    <div :class="ui.root">
-        <div
-            v-if="searchable || (props.definition.filters?.length ?? 0) > 0 || $slots.toolbar"
-            :class="ui.toolbar"
+    <div
+        :class="ui.tableRoot"
+        tabindex="0"
+    >
+        <table
+            :aria-labelledby="props.definition.labelledBy"
+            :class="ui.table"
         >
-            <FieldSearch
-                v-if="searchable"
-                ref="searchField"
-                :modelValue="search"
-                :placeholder="props.definition.searchPlaceholder ?? messages.searchPlaceholder"
-                :ui="{ root: ui.search }"
-                @update:model-value="updateSearch"
-            />
-
-            <div :class="ui.toolbarActions">
-                <Button
-                    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
+            <caption
+                v-if="props.definition.caption"
+                :class="ui.caption"
+            >
+                {{
+                    props.definition.caption
+                }}
+            </caption>
+
+            <thead :class="ui.thead">
+                <tr :class="ui.headRow">
+                    <th
+                        v-if="props.definition.selectable"
+                        :class="cn(ui.th, ui.selectCell, props.definition.stickyHeader && ui.stickyHeader)"
+                        scope="col"
                     >
-                        <Badge
-                            color="primary"
-                            :label="String(activeFilters.length)"
-                            size="sm"
-                            variant="solid"
+                        <Checkbox
+                            :aria-label="messages.selectAll"
+                            :indeterminate="someSelected"
+                            :modelValue="allSelected"
+                            @update:model-value="(checked) => toggleAll(checked === true)"
                         />
-                    </template>
-                </Button>
-
-                <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>
-                <Button
-                    color="neutral"
-                    :label="messages.clearSelection"
-                    size="xs"
-                    variant="ghost"
-                    @click="clearSelection"
-                />
-            </slot>
-        </div>
-
-        <div
-            v-if="activeFilters.length > 0"
-            :class="ui.chips"
-        >
-            <Badge
-                v-for="filter in activeFilters"
-                :key="filter.name"
-                color="neutral"
-                variant="subtle"
-            >
-                <span>{{ filter.label }}: {{ filter.value }}</span>
-                <Button
-                    :aria-label="`${messages.clearFilters}: ${filter.label}`"
-                    color="neutral"
-                    :icon="icons.fileRemove"
-                    size="xs"
-                    variant="link"
-                    @click="removeFilter(filter.name)"
-                />
-            </Badge>
-
-            <Button
-                color="neutral"
-                :label="messages.clearFilters"
-                size="xs"
-                variant="ghost"
-                @click="clearFilters"
-            />
-        </div>
-
-        <!-- El panel comparte el `<dialog>` nativo de `VModal`: así hereda el
-             foco, el portal y la capa superior sin mezclar geometrías. -->
-        <Slideover
-            v-model:open="filtersOpen"
-            position="end"
-            :title="messages.filtersTitle"
-        >
-            <template #body>
-                <Form
-                    v-model:state="filterState"
-                    :definition="filtersDefinition"
-                    :ui="{ sections: ui.filtersBody }"
-                />
-            </template>
-
-            <template #footer>
-                <div :class="ui.filtersFooter">
-                    <Button
-                        color="neutral"
-                        :label="messages.clearFilters"
-                        variant="ghost"
-                        @click="clearFilters"
-                    />
-                    <Button
-                        :label="messages.applyFilters"
-                        @click="applyFilters"
-                    />
-                </div>
-            </template>
-        </Slideover>
-
-        <!--
-            La tabla se pinta aquí y no la pinta `UTable`. Lo único que aportaba
-            era el `rowSelection`, y esa ya no es la fuente de verdad: lo es
-            `selection`, la lista de claves que sale por `v-model:selection`. El
-            `Record<string, boolean>` existía solo para hablar con TanStack, que
-            además corría con su motor apagado —`manualPagination` y
-            `manualSorting`—, porque quien pagina y ordena es el servidor.
-
-            El marco va en el contenedor, que es quien tiene el desplazamiento
-            horizontal: en la `<table>` obligaría a `border-separate` y con eso
-            el navegador deja de pintar las líneas entre filas.
-        -->
-        <a
-            v-if="skippable"
-            :class="ui.skip"
-            :href="`#${footerId}`"
-            >{{ messages.skipTable }}</a
-        >
-
-        <div
-            :class="ui.tableRoot"
-            tabindex="0"
-        >
-            <table :class="ui.table">
-                <thead :class="ui.thead">
-                    <tr :class="ui.headRow">
-                        <th
-                            v-if="props.definition.selectable"
-                            :class="[ui.th, ui.selectCell]"
-                            scope="col"
-                        >
-                            <Checkbox
-                                :aria-label="messages.selectAll"
-                                :indeterminate="someSelected"
-                                :modelValue="allSelected"
-                                @update:model-value="(checked) => toggleAll(checked === true)"
-                            />
-                        </th>
-
-                        <!--
-                            `aria-sort` lo pone la tabla y no lo ponía `UTable`:
-                            sin él, quien no ve la pantalla oye el nombre de la
-                            columna y el botón, pero no por cuál está ordenada la
-                            lista ni en qué sentido. Es una mejora, no paridad.
-                        -->
-                        <th
-                            v-for="item in columns"
-                            :key="item.key"
-                            :aria-sort="ariaSortFor(item.key)"
-                            :class="cn(ui.th, item.headerClass)"
-                            scope="col"
-                        >
-                            <Button
-                                v-if="item.sortable"
-                                color="neutral"
-                                :icon="sortIcon(item.key)"
-                                :label="item.label"
-                                size="xs"
-                                trailing
-                                :ui="{ base: ui.sortButton }"
-                                variant="ghost"
-                                @click="toggleSort(item.key)"
-                            />
-                            <span v-else>{{ item.label }}</span>
-                        </th>
-                    </tr>
-                </thead>
-
-                <tbody :class="ui.tbody">
-                    <tr
-                        v-for="(row, index) in rows"
-                        :key="getRowId(row)"
-                        :class="ui.tr"
-                        :data-selected="isSelected(row) ? 'true' : void 0"
-                        @click="emit('rowClick', row)"
+                    </th>
+
+                    <th
+                        v-for="item in columns"
+                        :key="item.key"
+                        :aria-sort="ariaSortFor(item.key)"
+                        :class="cn(ui.th, item.headerClass, props.definition.stickyHeader && ui.stickyHeader, item.column.sticky && ui.stickyColumn, item.column.sticky === 'start' && ui.stickyColumnStart, item.column.sticky === 'end' && ui.stickyColumnEnd, props.definition.stickyHeader && item.column.sticky && ui.stickyIntersection)"
+                        scope="col"
                     >
-                        <!-- `stop` en la casilla: marcar una fila no es abrirla. -->
-                        <td
-                            v-if="props.definition.selectable"
-                            :class="[ui.td, ui.selectCell]"
-                            @click.stop
+                        <Button
+                            v-if="item.sortable"
+                            color="neutral"
+                            :icon="sortIcon(item.key)"
+                            :label="item.label"
+                            size="xs"
+                            trailing
+                            :ui="{ base: ui.sortButton }"
+                            variant="ghost"
+                            @click="toggleSort(item.key)"
+                        />
+                        <Text
+                            v-else
+                            tag="span"
+                            tone="inherit"
+                            variant="inherit"
+                            >{{ item.label }}</Text
                         >
-                            <!-- El nombre lleva dentro el de la fila: sin eso, veinte casillas se llaman igual. -->
-                            <Checkbox
-                                :aria-label="`${messages.selectRow} ${rowLabel(row, index)}`"
-                                :modelValue="isSelected(row)"
-                                @update:model-value="(checked) => toggleRow(row, checked === true)"
-                            />
-                        </td>
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody :class="ui.tbody">
+                <tr
+                    v-for="(row, index) in props.data"
+                    :key="getRowId(row)"
+                    :aria-label="props.definition.interactive ? `${messages.openRow} ${rowLabel(row, index)}` : void 0"
+                    :class="cn(ui.tr, props.definition.interactive && ui.interactiveRow)"
+                    :data-selected="isSelected(row) ? 'true' : void 0"
+                    :tabindex="props.definition.interactive ? 0 : void 0"
+                    @click="emit('rowClick', row)"
+                    @keydown.enter.self="activateRow(row)"
+                    @keydown.space.self.prevent="activateRow(row)"
+                >
+                    <td
+                        v-if="props.definition.selectable"
+                        :class="[ui.td, ui.selectCell]"
+                        @click.stop
+                    >
+                        <Checkbox
+                            :aria-label="`${messages.selectRow} ${rowLabel(row, index)}`"
+                            :modelValue="isSelected(row)"
+                            @update:model-value="(checked) => toggleRow(row, checked === true)"
+                        />
+                    </td>
 
-                        <td
-                            v-for="item in columns"
-                            :key="item.key"
-                            :class="cn(ui.td, item.cellClass)"
-                        >
-                            <Menu
-                                v-if="item.column.type === 'actions'"
-                                :items="
+                    <td
+                        v-for="item in columns"
+                        :key="item.key"
+                        :class="cn(ui.td, item.cellClass, item.column.sticky && ui.stickyColumn, item.column.sticky === 'start' && ui.stickyColumnStart, item.column.sticky === 'end' && ui.stickyColumnEnd)"
+                    >
+                        <Menu
+                            v-if="item.column.type === 'actions'"
+                            :items="
   item.column.actions.filter((action) => !action.hidden?.(row)).map((action) => ({
     onSelect: () => action.onSelect(row),
     color: action.color,
@@ -327,157 +173,39 @@ defineExpose({
     separator: action.separator
   }))
 "
-                            >
-                                <Button
-                                    :aria-label="`${messages.rowActions} ${rowLabel(row, index)}`"
-                                    color="neutral"
-                                    :icon="icons.actions"
-                                    size="xs"
-                                    variant="ghost"
-                                />
-                            </Menu>
-
-                            <slot
-                                v-else
-                                :name="`cell-${item.key}`"
-                                :row="row"
-                                :value="resolveColumnValue(item.column, row)"
-                            >
-                                <TableCell
-                                    :column="item.column"
-                                    :row="row"
-                                />
-                            </slot>
-                        </td>
-                    </tr>
-
-                    <tr v-if="rows.length === 0">
-                        <td
-                            :class="ui.emptyCell"
-                            :colspan="columnCount"
                         >
-                            <!-- Un fallo y una lista vacía no son lo mismo: el
-                                 primero ofrece reintentar, el segundo invita a
-                                 crear el primero. -->
-                            <State
-                                v-if="props.failure"
-                                :failure="props.failure"
-                                tone="failure"
+                            <Button
+                                :aria-label="`${messages.rowActions} ${rowLabel(row, index)}`"
+                                color="neutral"
+                                :icon="icons.actions"
+                                size="xs"
+                                variant="ghost"
                             />
+                        </Menu>
 
-                            <!-- 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" />
-
-                            <!-- Buscando o filtrando, «no hay nada» sería falso:
-                                 lo que no hay es nada que case. Lo primero
-                                 invita a crear el primer registro y lo segundo
-                                 a quitar el filtro. -->
-                            <slot
-                                v-else-if="isFiltered"
-                                :clear="clearQuery"
-                                name="no-matches"
-                            >
-                                <State
-                                    :hint="messages.noMatchesHint"
-                                    :icon="icons.noMatches"
-                                    :title="messages.noMatches"
-                                >
-                                    <template #actions>
-                                        <slot
-                                            :clear="clearQuery"
-                                            name="no-matches-actions"
-                                        >
-                                            <Button
-                                                color="neutral"
-                                                :label="messages.clearQuery"
-                                                variant="outline"
-                                                @click="clearQuery"
-                                            />
-                                        </slot>
-                                    </template>
-                                </State>
-                            </slot>
-
-                            <slot
-                                v-else
-                                name="empty"
-                            >
-                                <State
-                                    :hint="props.definition.empty?.hint"
-                                    :icon="props.definition.empty?.icon"
-                                    :title="props.definition.empty?.title"
-                                >
-                                    <template #actions>
-                                        <slot name="empty-actions" />
-                                    </template>
-                                </State>
-                            </slot>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <div
-            v-if="total > 0 && !hasFailure"
-            :id="footerId"
-            :class="ui.footer"
-            tabindex="-1"
-        >
-            <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>
-
-                <!--
-                    Un `<select>` nativo y no un combobox: son cinco números sin
-                    búsqueda ni selección múltiple, y el navegador ya resuelve
-                    el teclado, el foco y la lista —en el móvil, con su propia
-                    rueda—. La caja la pone `ControlShell` para que se vea como
-                    los demás controles.
-
-                    El ancho va por `ui` porque pelea con el `w-full` del tema;
-                    puesto como `class` sobre el componente convivirían los dos.
-                -->
-
-                <ControlShell
-                    v-if="paginated"
-                    size="xs"
-                    :ui="{ root: ui.pageSizeControl }"
-                >
-                    <select
-                        :aria-label="messages.pageSize"
-                        :class="ui.pageSizeSelect"
-                        :value="query.pageSize"
-                        @change="(event) => setPageSize(Number(event.target.value))"
-                    >
-                        <option
-                            v-for="size in pageSizes"
-                            :key="size"
-                            :value="size"
+                        <slot
+                            v-else
+                            :name="`cell-${item.key}`"
+                            :row="row"
+                            :value="resolveColumnValue(item.column, row)"
                         >
-                            {{ size }}
-                        </option>
-                    </select>
-                </ControlShell>
-            </div>
-
-            <Pagination
-                v-if="paginated"
-                :page="query.page"
-                :pageSize="query.pageSize"
-                :total="total"
-                @update:page="goToPage"
-            />
-        </div>
+                            <TableCell
+                                :column="item.column"
+                                :row="row"
+                            />
+                        </slot>
+                    </td>
+                </tr>
+
+                <tr v-if="props.data.length === 0">
+                    <td
+                        :class="ui.emptyCell"
+                        :colspan="columnCount"
+                    >
+                        <slot name="empty" />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 </template>