@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -0,0 +1,64 @@
+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>>;
+};
+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];
+}) & {};

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

@@ -0,0 +1,17 @@
+export declare const dataTableTheme: Record<"dataTable", {
+    readonly slots: {
+        readonly chips: "flex flex-wrap items-center gap-2";
+        readonly filtersBody: "flex flex-col gap-4";
+        readonly filtersFooter: "flex items-center justify-between gap-2";
+        readonly footer: "flex flex-wrap items-center justify-between gap-4 px-1";
+        readonly meta: "flex items-center gap-2 text-sm text-vuno-muted";
+        readonly pageSizeControl: "w-auto";
+        readonly pageSizeSelect: "cursor-pointer bg-transparent py-1 pr-1 outline-none";
+        readonly root: "flex w-full flex-col gap-4";
+        readonly search: "w-full sm:max-w-xs";
+        readonly selection: "flex items-center justify-between gap-2 rounded-sm bg-vuno-primary/10 px-3 py-2 text-sm";
+        readonly skip: "sr-only rounded-sm bg-vuno-surface text-vuno-body focus:not-sr-only focus:outline-vuno-primary focus:z-10 focus:inline-block focus:px-3 focus:py-1.5 focus:text-sm focus:outline-2 focus:outline-offset-2";
+        readonly toolbar: "flex flex-wrap items-center justify-between gap-2";
+        readonly toolbarActions: "flex items-center gap-2";
+    };
+}>;

package/dist/runtime/app/components/DataTable/DataTable.theme.js

@@ -0,0 +1,19 @@
+import { skipLink } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const dataTableTheme = defineTheme("dataTable", {
+  slots: {
+    chips: "flex flex-wrap items-center gap-2",
+    filtersBody: "flex flex-col gap-4",
+    filtersFooter: "flex items-center justify-between gap-2",
+    footer: "flex flex-wrap items-center justify-between gap-4 px-1",
+    meta: "flex items-center gap-2 text-sm text-vuno-muted",
+    pageSizeControl: "w-auto",
+    pageSizeSelect: "cursor-pointer bg-transparent py-1 pr-1 outline-none",
+    root: "flex w-full flex-col gap-4",
+    search: "w-full sm:max-w-xs",
+    selection: "flex items-center justify-between gap-2 rounded-sm bg-vuno-primary/10 px-3 py-2 text-sm",
+    skip: skipLink,
+    toolbar: "flex flex-wrap items-center justify-between gap-2",
+    toolbarActions: "flex items-center gap-2"
+  }
+});

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

@@ -0,0 +1,13 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoDataTableDefinition, VunoTableFailure, VunoTableRow } from '#vuno/types/table';
+export type VunoDataTableProps<TRow extends VunoTableRow> = {
+    data: TRow[];
+    definition: VunoDataTableDefinition<TRow>;
+    failure?: VunoTableFailure;
+    loading?: boolean;
+    radius?: VunoRadius;
+    tableUi?: VunoUi<'table'>;
+    total?: number;
+    ui?: VunoUi<'dataTable'>;
+};

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

@@ -0,0 +1,356 @@
+<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: () => [] } });
+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 }
+});
+const emit = defineEmits(["rowClick"]);
+defineSlots();
+const slots = useSlots();
+const total = computed(() => props.total ?? 0);
+const hasFailure = computed(() => Boolean(props.failure));
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("dataTable", () => props.ui);
+const table = useVunoDataTable({
+  query,
+  selection,
+  definition: () => props.definition,
+  total: () => total.value
+});
+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();
+}
+function updateSearch(value) {
+  if (value === "") {
+    clearSearch();
+    return;
+  }
+  search.value = value ?? "";
+}
+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"
+            >
+                <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>
+                            <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>
+            </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.
+                -->
+
+                <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))"
+                    >
+                        <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>
+</template>

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

@@ -0,0 +1,64 @@
+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>>;
+};
+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];
+}) & {};

package/dist/runtime/app/components/{Table/internal/useVunoTable.d.ts → DataTable/internal/useVunoDataTable.d.ts}

@@ -1,21 +1,20 @@
 import { type ComputedRef, type Ref } from 'vue';
 import type { VunoFormDefinition } from '#vuno/types/form';
-import type { VunoTableColumn, VunoTableDefinition, VunoTableFilters, VunoTableQuery, VunoTableRow, VunoTableSortDirection } from '#vuno/types/table';
+import type { VunoDataTableDefinition, VunoTableFilters, VunoTableQuery } from '#vuno/types/table';
 /** Un filtro activo, listo para pintarse como chip. */
 type VunoTableActiveFilter = {
     name: string;
     label: string;
     value: string;
 };
-type VunoTableOptions<TRow extends VunoTableRow> = {
+type VunoTableOptions<TRow extends object> = {
     query: Ref<VunoTableQuery>;
     selection: Ref<(number | string)[]>;
-    definition: () => VunoTableDefinition<TRow>;
+    definition: () => VunoDataTableDefinition<TRow>;
     total: () => number;
 };
-type VunoTableContext<TRow extends VunoTableRow> = {
+type VunoTableContext = {
     activeFilters: ComputedRef<VunoTableActiveFilter[]>;
-    columns: ComputedRef<VunoTableRenderColumn<TRow>[]>;
     filtersDefinition: ComputedRef<VunoFormDefinition>;
     filtersOpen: Ref<boolean>;
     /** Copia editable del panel: no llega a la consulta hasta aplicar. */
@@ -51,36 +50,14 @@ type VunoTableContext<TRow extends VunoTableRow> = {
     clearQuery: () => void;
     clearSearch: () => void;
     clearSelection: () => void;
-    getRowId: (row: TRow) => string;
     goToPage: (page: number) => void;
     removeFilter: (name: string) => void;
     setPageSize: (size: number) => void;
-    sortDirectionFor: (key: string) => null | VunoTableSortDirection;
-    toggleSort: (key: string) => void;
-};
-/**
- * Una columna lista para pintar: la definición y lo que la disposición necesita
- * resuelto una vez.
- *
- * La columna va **dentro** y no esparcida: `VunoTableColumn` es una unión
- * discriminada por `type` y esparcirla la aplana, que es justo lo que impide a
- * la celda saber qué está pintando.
- */
-export type VunoTableRenderColumn<TRow extends VunoTableRow> = {
-    /** Alineación y clases propias de la columna, para la celda. */
-    cellClass: string;
-    column: VunoTableColumn<TRow>;
-    /** Alineación y ancho, para la cabecera. */
-    headerClass: string;
-    key: string;
-    /** El rótulo ya resuelto; la columna de acciones no lleva salvo que se pida. */
-    label: string;
-    sortable: boolean;
 };
 /**
  * Toda la lógica de una tabla, sin nada de disposición.
  *
- * Vive aparte del componente para que `VTable` sea **una** disposición posible
+ * Vive aparte del componente para que `VDataTable` mantenga separada su lógica
  * y no la única: quien necesite los filtros en línea en vez de detrás de un
  * botón puede escribir su propia plantilla sobre esto, en lugar de esperar a
  * que el componente crezca un prop más por cada proyecto que no encaja.
@@ -89,5 +66,5 @@ export type VunoTableRenderColumn<TRow extends VunoTableRow> = {
  * `composables/`—: publicarlo congela esta forma, y antes conviene que la haya
  * usado algo real.
  */
-export declare function useVunoTable<TRow extends VunoTableRow>(options: VunoTableOptions<TRow>): VunoTableContext<TRow>;
+export declare function useVunoDataTable<TRow extends object>(options: VunoTableOptions<TRow>): VunoTableContext;
 export {};