@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -1,356 +1,210 @@
 <script setup>
-import { computed, useId, useSlots, useTemplateRef } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import Badge from "#vuno/components/Badge/Badge.vue";
-import Button from "#vuno/components/Button/Button.vue";
-import FieldSearch from "#vuno/components/FieldSearch/FieldSearch.vue";
-import Form from "#vuno/components/Form/Form.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 VunoTable from "#vuno/components/Table/Table.vue";
-import Text from "#vuno/components/Text/Text.vue";
-import { useVunoDataTable } from "./internal/useVunoDataTable";
-import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
-defineOptions({ name: "VunoDataTable" });
-const query = defineModel("query", { type: Object, ...{ required: true } });
-const selection = defineModel("selection", { type: Array, ...{ default: () => [] } });
+import { computed, useId } from "vue";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Table from "#vuno/components/Table/Table.vue";
+import TableBody from "#vuno/components/TableBody/TableBody.vue";
+import TableCell from "#vuno/components/TableCell/TableCell.vue";
+import TableContainer from "#vuno/components/TableContainer/TableContainer.vue";
+import TableExpandedRow from "#vuno/components/TableExpandedRow/TableExpandedRow.vue";
+import TableExpandHeader from "#vuno/components/TableExpandHeader/TableExpandHeader.vue";
+import TableExpandRow from "#vuno/components/TableExpandRow/TableExpandRow.vue";
+import TableHead from "#vuno/components/TableHead/TableHead.vue";
+import TableHeader from "#vuno/components/TableHeader/TableHeader.vue";
+import TableRow from "#vuno/components/TableRow/TableRow.vue";
+import TableSelectAll from "#vuno/components/TableSelectAll/TableSelectAll.vue";
+import TableSelectRow from "#vuno/components/TableSelectRow/TableSelectRow.vue";
+import { normalizeTableSize } from "./DataTable.context";
+defineOptions({ name: "DataTable" });
+const expandedRows = defineModel("expandedRows", { type: Array, ...{ default: () => [] } });
+const selectedRows = defineModel("selectedRows", { type: Array, ...{ default: () => [] } });
+const sort = defineModel("sort", { type: Object, ...{ default: void 0 } });
 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 },
-  tableUi: { type: Object, required: false },
-  total: { type: Number, required: false },
-  ui: { type: Object, required: false }
+  description: { type: String, required: false, default: void 0 },
+  headers: { type: Array, required: true },
+  isSortable: { type: Boolean, required: false, default: false },
+  rows: { type: Array, required: true },
+  selectionMode: { type: String, required: false, default: "none" },
+  size: { type: String, required: false, default: "lg" },
+  stickyHeader: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: void 0 },
+  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 slots = useSlots();
-const total = computed(() => props.total ?? 0);
-const hasFailure = computed(() => Boolean(props.failure));
-const icons = useIcons();
+const slots = defineSlots();
 const messages = useMessages();
-const ui = useTheme("dataTable", () => props.ui);
-const table = useVunoDataTable({
-  query,
-  selection,
-  definition: () => props.definition,
-  total: () => total.value
+const baseId = useId();
+const size = computed(() => normalizeTableSize(props.size));
+const selecting = computed(() => props.selectionMode !== "none");
+const radio = computed(() => props.selectionMode === "single");
+const expandable = computed(() => {
+  const probe = props.rows[0];
+  return probe ? filled(() => slots.expanded?.({ row: probe })) : Boolean(slots.expanded);
 });
-const { activeFilters, applyFilters, clearFilters, clearQuery, clearSelection, filtersDefinition, filtersOpen, filterState, goToPage, isFiltered, pageSizes, paginated, rangeEnd, rangeStart, removeFilter, search, searchable, setPageSize } = 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 cellSlots = computed(() => Object.keys(slots).filter((name) => name.startsWith("cell-")));
-const tableSort = computed({
-  get: () => query.value.sort,
-  set: (sort) => {
-    query.value = { ...query.value, page: 1, sort };
-  }
-});
-function clearSearch() {
-  table.clearSearch();
-  searchField.value?.focus();
+const columns = computed(() => props.headers.length + (selecting.value ? 1 : 0) + (expandable.value ? 1 : 0));
+const selectable = computed(() => props.rows.filter((row) => !row.disabled));
+const selectedCount = computed(() => selectable.value.filter((row) => selectedRows.value.includes(row.id)).length);
+const allSelected = computed(() => selectable.value.length > 0 && selectedCount.value === selectable.value.length);
+const someSelected = computed(() => selectedCount.value > 0 && !allSelected.value);
+const sortableTable = computed(() => props.isSortable || props.headers.some((header) => isSortable(header)));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ size: size.value })
+);
+function isSortable(header) {
+  return header.isSortable ?? header.sortable ?? false;
 }
-function updateSearch(value) {
-  if (value === "") {
-    clearSearch();
-    return;
-  }
-  search.value = value ?? "";
+function rowName(row, index) {
+  const first = props.headers[0];
+  const value = first ? row[first.key] : void 0;
+  const text = value === null || value === void 0 ? "" : String(value).trim();
+  return text || `${messages.value.row} ${index + 1}`;
+}
+function expandedId(row) {
+  return `${baseId}-${row.id}`;
+}
+function isExpanded(row) {
+  return expandedRows.value.includes(row.id);
+}
+function setExpanded(id, expanded) {
+  expandedRows.value = expanded ? [...expandedRows.value, id] : expandedRows.value.filter((value) => value !== id);
+}
+function setSelected(id, selected) {
+  if (radio.value) return void (selectedRows.value = selected ? [id] : []);
+  selectedRows.value = selected ? [...selectedRows.value, id] : selectedRows.value.filter((value) => value !== id);
+}
+function setAllSelected(selected) {
+  selectedRows.value = selected ? selectable.value.map((row) => row.id) : [];
+}
+function onSort(key) {
+  const current = sort.value?.key === key ? sort.value.direction : "NONE";
+  const direction = current === "NONE" ? "ASC" : current === "ASC" ? "DESC" : "NONE";
+  sort.value = { direction, key };
+}
+function rowBindings(row, index) {
+  const isSelected = selectedRows.value.includes(row.id);
+  if (!expandable.value) return { isSelected };
+  return {
+    "onUpdate:expanded": (value) => setExpanded(row.id, value),
+    ariaControls: expandedId(row),
+    ariaLabel: `${isExpanded(row) ? "Contraer" : "Expandir"} ${rowName(row, index)}`,
+    expanded: isExpanded(row),
+    isSelected
+  };
 }
-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"
+    <TableContainer
+        :description="props.description"
+        :stickyHeader="props.stickyHeader"
+        :title="props.title"
+        :ui="props.ui"
+        :useStaticWidth="props.useStaticWidth"
+    >
+        <slot name="toolbar" />
+
+        <Table
+            :isSortable="sortableTable"
+            :size="size"
+            :stickyHeader="props.stickyHeader"
+            :ui="props.ui"
+            :useStaticWidth="props.useStaticWidth"
+            :useZebraStyles="props.useZebraStyles"
         >
-            <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"
+            <caption v-if="$slots.caption">
+                <slot name="caption" />
+            </caption>
+
+            <TableHead>
+                <TableRow>
+                    <TableExpandHeader v-if="expandable" />
+
+                    <TableSelectAll
+                        v-if="selecting && !radio"
+                        :indeterminate="someSelected"
+                        :modelValue="allSelected"
+                        @update:model-value="setAllSelected"
+                    />
+                    <TableHeader v-else-if="selecting">
+                        <span class="sr-only">{{ messages.selectRow }}</span>
+                    </TableHeader>
+
+                    <TableHeader
+                        v-for="header in props.headers"
+                        :key="header.key"
+                        :isSortHeader="sort?.key === header.key"
+                        :isSortable="isSortable(header)"
+                        :sortDirection="sort?.direction"
+                        @sort="onSort(header.key)"
+                    >
+                        <slot
+                            :header="header"
+                            name="header"
+                        >
+                            {{ header.header }}
+                        </slot>
+                    </TableHeader>
+                </TableRow>
+            </TableHead>
+
+            <TableBody>
+                <template
+                    v-for="(row, index) in props.rows"
+                    :key="row.id"
                 >
-                    <!-- `UButton` no admite `badge`: el contador va en el slot. -->
-                    <template
-                        v-if="activeFilters.length > 0"
-                        #trailing
+                    <component
+                        :is="expandable ? TableExpandRow : TableRow"
+                        v-bind="rowBindings(row, index)"
                     >
-                        <Badge
-                            color="primary"
-                            :label="String(activeFilters.length)"
-                            size="sm"
-                            variant="solid"
+                        <TableSelectRow
+                            v-if="selecting"
+                            :ariaLabel="`${messages.selectRow} ${rowName(row, index)}`"
+                            :disabled="row.disabled"
+                            :modelValue="selectedRows.includes(row.id)"
+                            :name="radio ? baseId : void 0"
+                            :radio="radio"
+                            @update:model-value="setSelected(row.id, $event)"
                         />
-                    </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"
-            >
-                <Text
-                    tag="span"
-                    tone="inherit"
-                    variant="inherit"
-                    >{{ selection.length }} {{ selection.length === 1 ? messages.rowSelected : messages.rowsSelected }}</Text
-                >
-                <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"
-            >
-                <Text
-                    tag="span"
-                    tone="inherit"
-                    variant="inherit"
-                    >{{ filter.label }}: {{ filter.value }}</Text
-                >
-                <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>
-
-        <a
-            v-if="skippable"
-            :class="ui.skip"
-            :href="`#${footerId}`"
-            >{{ messages.skipTable }}</a
-        >
-
-        <VunoTable
-            v-model:selection="selection"
-            v-model:sort="tableSort"
-            :data="rows"
-            :definition="props.definition"
-            :radius="props.radius"
-            :ui="props.tableUi"
-            @row-click="emit('rowClick', $event)"
-        >
-            <template
-                v-for="name in cellSlots"
-                :key="name"
-                #[name]="slotProps"
-            >
-                <slot
-                    :name="name"
-                    v-bind="slotProps"
-                />
-            </template>
-
-            <template #empty>
-                <State
-                    v-if="props.failure"
-                    :failure="props.failure"
-                    tone="failure"
-                />
-
-                <div v-else-if="props.loading || total > 0" />
-
-                <slot
-                    v-else-if="isFiltered"
-                    :clear="clearQuery"
-                    name="no-matches"
-                >
-                    <State
-                        :hint="messages.noMatchesHint"
-                        :icon="icons.noMatches"
-                        :title="messages.noMatches"
-                    >
-                        <template #actions>
+                        <TableCell
+                            v-for="header in props.headers"
+                            :key="header.key"
+                        >
                             <slot
-                                :clear="clearQuery"
-                                name="no-matches-actions"
+                                :header="header"
+                                name="cell"
+                                :row="row"
+                                :value="row[header.key]"
                             >
-                                <Button
-                                    color="neutral"
-                                    :label="messages.clearQuery"
-                                    variant="outline"
-                                    @click="clearQuery"
-                                />
+                                {{ row[header.key] }}
                             </slot>
-                        </template>
-                    </State>
-                </slot>
+                        </TableCell>
+                    </component>
 
-                <slot
-                    v-else
-                    name="empty"
-                >
-                    <State
-                        :hint="props.definition.empty?.hint"
-                        :icon="props.definition.empty?.icon"
-                        :title="props.definition.empty?.title"
+                    <TableExpandedRow
+                        v-if="expandable"
+                        :id="expandedId(row)"
+                        :colspan="columns"
                     >
-                        <template #actions>
-                            <slot name="empty-actions" />
-                        </template>
-                    </State>
-                </slot>
-            </template>
-        </VunoTable>
-
-        <div
-            v-if="total > 0 && !hasFailure"
-            :id="footerId"
-            :class="ui.footer"
-            tabindex="-1"
-        >
-            <div :class="ui.meta">
-                <Text
-                    v-if="paginated"
-                    tag="span"
-                    tone="inherit"
-                    variant="inherit"
-                    >{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</Text
-                >
-
-                <!-- Sin paginar, un rango «1–30 de 30» sugiere que hay más. -->
-                <Text
-                    v-else
-                    tag="span"
-                    tone="inherit"
-                    variant="inherit"
-                    >{{ total }} {{ messages.results }}</Text
-                >
-
-                <!--
-                    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 `PrimitiveControl` 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.
-                -->
+                        <slot
+                            name="expanded"
+                            :row="row"
+                        />
+                    </TableExpandedRow>
+                </template>
 
-                <PrimitiveControl
-                    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))"
+                <tr v-if="props.rows.length === 0">
+                    <td
+                        :class="ui.empty"
+                        :colspan="columns"
                     >
-                        <option
-                            v-for="size in pageSizes"
-                            :key="size"
-                            :value="size"
-                        >
-                            {{ size }}
-                        </option>
-                    </select>
-                </PrimitiveControl>
-            </div>
-
-            <Pagination
-                v-if="paginated"
-                :page="query.page"
-                :pageSize="query.pageSize"
-                :total="total"
-                @update:page="goToPage"
-            />
-        </div>
-    </div>
+                        <slot name="empty">{{ messages.emptyTable }}</slot>
+                    </td>
+                </tr>
+            </TableBody>
+        </Table>
+    </TableContainer>
 </template>

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

@@ -1,64 +1,51 @@
-import type { VunoTableQuery } from '#vuno/types/table';
-import type { VunoDataTableProps } from './DataTable.types.js';
-declare const __VLS_export: <TRow extends import("#vuno/types/table").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<(VunoDataTableProps<TRow> & {
-        /**
-             * 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:selection"?: ((value: (string | number)[]) => any) | undefined;
-        "onUpdate:query"?: ((value: VunoTableQuery) => 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:selection", value: (string | number)[]) => void) & ((event: "update:query", value: VunoTableQuery) => void));
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { DataTableHeader, DataTableProps, DataTableRow } from './DataTable.types.js';
+type __VLS_Props = Omit<DataTableProps, 'expandedRows' | 'selectedRows' | 'sort'>;
+type __VLS_Slots = {
+    caption?: () => unknown;
+    cell?: (props: {
+        header: DataTableHeader;
+        row: DataTableRow;
+        value: unknown;
+    }) => unknown;
+    empty?: () => unknown;
+    expanded?: (props: {
+        row: DataTableRow;
+    }) => unknown;
+    header?: (props: {
+        header: DataTableHeader;
+    }) => unknown;
+    toolbar?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expandedRows'?: string[];
+    'selectedRows'?: string[];
+    'sort'?: DataTableProps['sort'];
 };
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expandedRows": (value: string[]) => any;
+    "update:selectedRows": (value: string[]) => any;
+    "update:sort": (value: import("./DataTable.types.js").DataTableSort | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expandedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:selectedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:sort"?: ((value: import("./DataTable.types.js").DataTableSort | undefined) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    size: import("./DataTable.types.js").DataTableLegacySize | import("./DataTable.types.js").DataTableSize;
+    ui: import("./DataTable.types.js").DataTableUi;
+    selectionMode: import("./DataTable.types.js").DataTableSelectionMode;
+    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;
+    };
+};