@groupteknology/vuno 1.0.1 → 3.0.0

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/{structure/Table.vue.d.ts → DataTable/DataTable.vue.d.ts}

@@ -1,20 +1,7 @@
-import type { VunoSlots } from '#vuno/types/base';
-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;
-        /** Total de filas en servidor, no las de la página actual. */
-        total?: number;
-        ui?: VunoSlots;
-    } & {
+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`.
              *
@@ -29,8 +16,8 @@ declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable
         selection?: (number | string)[];
     }) & {
         onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
         "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -64,7 +51,7 @@ declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable
             query: VunoTableQuery;
         }) => unknown;
     };
-    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:query", value: VunoTableQuery) => void) & ((event: "update:selection", value: (string | number)[]) => void));
+    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>>;
 };

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

@@ -1,40 +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';
-/**
- * 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;
-};
+import type { VunoDataTableDefinition, VunoTableFilters, VunoTableQuery } from '#vuno/types/table';
 /** Un filtro activo, listo para pintarse como chip. */
-export type VunoTableActiveFilter = {
+type VunoTableActiveFilter = {
     name: string;
     label: string;
     value: string;
 };
-export 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;
 };
-export 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. */
@@ -70,17 +50,14 @@ export 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;
 };
 /**
  * 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,4 +66,5 @@ export type VunoTableContext<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 {};

package/dist/runtime/app/{internal/useVunoTable.js → components/DataTable/internal/useVunoDataTable.js}

@@ -1,16 +1,13 @@
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { clampPage } from "#vuno/utils/pagination";
-import { getPath } from "#vuno/utils/path";
-import { hasActiveQuery, hasFilterValue } from "#vuno/utils/query";
-export function useVunoTable(options) {
+import { hasActiveQuery, hasFilterValue } from "./query.js";
+export function useVunoDataTable(options) {
   const { query, selection } = options;
   const definition = computed(() => options.definition());
   const total = computed(() => options.total());
-  const rowKey = computed(() => definition.value.rowKey ?? "id");
   const pageSizes = computed(() => definition.value.pageSizes ?? [25, 50, 100]);
   const searchable = computed(() => definition.value.searchable ?? true);
   const paginated = computed(() => definition.value.paginated ?? true);
-  const getRowId = (row) => String(getPath(row, rowKey.value) ?? "");
   const search = ref(query.value.search);
   let searchTimer;
   watch(search, (value) => {
@@ -32,14 +29,6 @@ export function useVunoTable(options) {
     search.value = "";
     query.value = { ...query.value, page: 1, search: "" };
   }
-  function sortDirectionFor(key) {
-    return query.value.sort?.column === key ? query.value.sort.direction : null;
-  }
-  function toggleSort(key) {
-    const current = sortDirectionFor(key);
-    const sort = current === null ? { column: key, direction: "asc" } : current === "asc" ? { column: key, direction: "desc" } : null;
-    query.value = { ...query.value, page: 1, sort };
-  }
   const filtersOpen = ref(false);
   const filterState = ref({ ...query.value.filters });
   watch(
@@ -88,18 +77,6 @@ export function useVunoTable(options) {
   const clearSelection = () => {
     selection.value = [];
   };
-  const alignClass = (align) => align === "end" ? "text-end" : align === "center" ? "text-center" : "";
-  const columns = computed(
-    () => definition.value.columns.map((column) => ({
-      cellClass: [alignClass(column.align), column.class].filter(Boolean).join(" "),
-      column,
-      headerClass: [alignClass(column.align), column.width].filter(Boolean).join(" "),
-      key: column.key,
-      // La columna de acciones no lleva rótulo salvo que se pida uno.
-      label: column.type === "actions" ? column.label ?? "" : column.label ?? column.key,
-      sortable: column.sortable ?? false
-    }))
-  );
   const lastPage = computed(() => Math.max(1, Math.ceil(total.value / query.value.pageSize)));
   watch(
     [total, lastPage],
@@ -129,11 +106,9 @@ export function useVunoTable(options) {
     clearQuery,
     clearSearch,
     clearSelection,
-    columns,
     filtersDefinition,
     filtersOpen,
     filterState,
-    getRowId,
     goToPage,
     isFiltered,
     lastPage,
@@ -146,8 +121,6 @@ export function useVunoTable(options) {
     searchable,
     setPageSize,
     shownPage,
-    sortDirectionFor,
-    toggleSort,
     total
   };
 }

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

@@ -0,0 +1,13 @@
+import type { VunoFieldArrayProps } from './FieldArray.types.js';
+type __VLS_Props = VunoFieldArrayProps;
+type __VLS_ModelProps = {
+    modelValue?: Record<string, unknown>[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+export declare const fieldArrayTheme: Record<"fieldArray", {
+    readonly slots: {
+        readonly empty: "rounded-sm border border-dashed border-vuno-border px-4 py-6 text-center text-sm text-vuno-muted";
+        readonly item: "flex flex-col gap-3 rounded-sm border border-vuno-border p-4";
+        readonly itemAction: "pointer-coarse:size-11";
+        readonly itemActions: "flex items-center gap-1";
+        readonly itemFields: "grid w-full grid-cols-12 gap-x-4 gap-y-5";
+        readonly itemHeader: "flex items-center justify-between gap-2";
+        readonly itemLabel: "text-xs font-medium text-vuno-muted";
+        readonly root: "flex w-full flex-col gap-3";
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldArrayTheme = defineTheme("fieldArray", {
+  slots: {
+    empty: "rounded-sm border border-dashed border-vuno-border px-4 py-6 text-center text-sm text-vuno-muted",
+    item: "flex flex-col gap-3 rounded-sm border border-vuno-border p-4",
+    itemAction: "pointer-coarse:size-11",
+    itemActions: "flex items-center gap-1",
+    itemFields: "grid w-full grid-cols-12 gap-x-4 gap-y-5",
+    itemHeader: "flex items-center justify-between gap-2",
+    itemLabel: "text-xs font-medium text-vuno-muted",
+    root: "flex w-full flex-col gap-3"
+  }
+});

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

@@ -0,0 +1,2 @@
+import type { VunoFieldArray } from '#vuno/types/field';
+export type VunoFieldArrayProps = Omit<VunoFieldArray, 'columns'>;