@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,80 +1,20 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-import type { VunoTableDefinition, VunoTableFailure, VunoTableQuery, VunoTableRow } from '#vuno/types/table';
-declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        data: TRow[];
-        definition: VunoTableDefinition<TRow>;
-        /**
-         * Fallo de la consulta. Sin esto, un error se pintaría como «no hay
-         * resultados» y la tabla afirmaría que no hay nada cuando en realidad
-         * no se pudo saber.
-         */
-        failure?: VunoTableFailure;
-        loading?: boolean;
-        /** La curvatura. Sin valor, la que traiga el tema. */
-        radius?: VunoRadius;
-        /** Total de filas en servidor, no las de la página actual. */
-        total?: number;
-        ui?: VunoUi<"table">;
-    } & {
-        /**
-             * Estado de consulta. El consumidor lo observa y devuelve `data` y `total`.
-             *
-             * Es obligatorio a propósito: la tabla no trae datos por sí misma, así que
-             * un estado interno avanzaría de página sin que nadie pidiera la siguiente
-             * —el pie diría «11-20» mientras se siguen viendo las filas 1-10—. Dónde
-             * vive ese estado lo decide `useTableQuery`: un `ref` normal o la
-             * query string.
-             */
-        query: VunoTableQuery;
-        /** Claves de las filas seleccionadas, no las filas: con paginación en servidor las de otras páginas no están cargadas. */
-        selection?: (number | string)[];
-    }) & {
-        onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
-        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: import("vue").ShallowUnwrapRef<{
-        clearFilters: () => void;
-        clearQuery: () => void;
-        clearSearch: () => void;
-        clearSelection: () => void;
-        goToPage: (page: number) => void;
-    }>) => void;
-    attrs: any;
-    slots: {
-        [key: `cell-${string}`]: (props: {
-            row: TRow;
-            value: unknown;
-        }) => unknown;
-        empty?: () => unknown;
-        'empty-actions'?: () => unknown;
-        'no-matches'?: (props: {
-            clear: () => void;
-        }) => unknown;
-        'no-matches-actions'?: (props: {
-            clear: () => void;
-        }) => unknown;
-        selection?: (props: {
-            count: number;
-            keys: (number | string)[];
-            clear: () => void;
-        }) => unknown;
-        toolbar?: (props: {
-            query: VunoTableQuery;
-        }) => unknown;
-    };
-    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:query", value: VunoTableQuery) => void) & ((event: "update:selection", value: (string | number)[]) => void));
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { TableProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
 };
+declare const __VLS_base: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    size: import("#vuno/components/DataTable/DataTable.types").DataTableLegacySize | import("#vuno/components/DataTable/DataTable.types").DataTableSize;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    isSortable: boolean;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+    useZebraStyles: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,483 +1,46 @@
 <script setup>
-import { computed, useId, useTemplateRef } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-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 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: () => [] } });
+import { computed, inject, provide, toRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { normalizeTableSize, tableContainerKey, tableKey } from "#vuno/components/DataTable/DataTable.context";
+defineOptions({ name: "Table" });
 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 }
+  isSortable: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "lg" },
+  stickyHeader: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  useStaticWidth: { type: Boolean, required: false, default: false },
+  useZebraStyles: { type: Boolean, required: false, default: 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 container = inject(tableContainerKey, void 0);
+const size = computed(() => normalizeTableSize(props.size));
+provide(tableKey, {
+  isSortable: toRef(props, "isSortable"),
+  size,
+  stickyHeader: toRef(props, "stickyHeader"),
+  useZebraStyles: toRef(props, "useZebraStyles")
+});
 const ui = useTheme(
-  "table",
+  "dataTable",
   () => props.ui,
-  () => ({ radius: props.radius })
+  () => ({
+    size: size.value,
+    sortable: String(props.isSortable),
+    static: String(props.useStaticWidth),
+    sticky: String(props.stickyHeader),
+    zebra: String(props.useZebraStyles)
+  })
 );
-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 columnCount = computed(() => Math.max(columns.value.length + (props.definition.selectable ? 1 : 0), 1));
-const { allSelected, isSelected, rowLabel, someSelected, toggleAll, toggleRow } = useVunoTableSelection({
-  columns,
-  getRowId,
-  selection,
-  definition: () => props.definition,
-  rowName: () => messages.value.row,
-  rows: () => rows.value
-});
-function ariaSortFor(key) {
-  const column = columns.value.find((item) => item.key === key);
-  if (!column?.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
-});
 </script>
 
 <template>
-    <div :class="ui.root">
-        <div
-            v-if="searchable || (props.definition.filters?.length ?? 0) > 0 || $slots.toolbar"
-            :class="ui.toolbar"
-        >
-            <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
-                    >
-                        <Badge
-                            color="primary"
-                            :label="String(activeFilters.length)"
-                            size="sm"
-                            variant="solid"
-                        />
-                    </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"
+    <div :class="[ui.content, props.stickyHeader && ui.innerContainer]">
+        <table
+            :aria-describedby="container?.descriptionId.value"
+            :aria-labelledby="container?.titleId.value"
+            :class="ui.table"
         >
-            <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)"
-                    >
-                        <!-- `stop` en la casilla: marcar una fila no es abrirla. -->
-                        <td
-                            v-if="props.definition.selectable"
-                            :class="[ui.td, ui.selectCell]"
-                            @click.stop
-                        >
-                            <!-- 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>
-
-                        <td
-                            v-for="item in columns"
-                            :key="item.key"
-                            :class="cn(ui.td, item.cellClass)"
-                        >
-                            <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,
-    disabled: action.disabled?.(row) ?? false,
-    icon: action.icon,
-    label: action.label,
-    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"
-                            />
-
-                            <!-- 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"
-                        >
-                            {{ size }}
-                        </option>
-                    </select>
-                </ControlShell>
-            </div>
-
-            <Pagination
-                v-if="paginated"
-                :page="query.page"
-                :pageSize="query.pageSize"
-                :total="total"
-                @update:page="goToPage"
-            />
-        </div>
+            <slot />
+        </table>
     </div>
 </template>