@groupteknology/vuno 0.1.0

package/dist/runtime/app/components/State/EmptyState.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  hint: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("state", () => props.ui);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <UIcon
+            class="text-dimmed"
+            :class="ui.icon"
+            :name="props.icon ?? icons.empty"
+        />
+
+        <p :class="ui.title">{{ props.title ?? messages.emptyTable }}</p>
+
+        <p
+            v-if="props.hint"
+            :class="ui.hint"
+        >
+            {{ props.hint }}
+        </p>
+
+        <div :class="ui.actions">
+            <slot name="actions" />
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/State/EmptyState.vue.d.ts

@@ -0,0 +1,20 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = {
+    hint?: string;
+    icon?: string;
+    title?: string;
+    ui?: VunoFieldSlots;
+};
+type __VLS_Slots = {
+    /** La invitación a crear el primer registro va aquí. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/State/FailureState.d.vue.ts

@@ -0,0 +1,10 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoTableFailure } from '#vuno/types/table';
+type __VLS_Props = {
+    /** El fallo con su reintento dentro: no hay forma de pintarlo sin salida. */
+    failure: VunoTableFailure;
+    ui?: VunoFieldSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/State/FailureState.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  failure: { type: Object, required: true },
+  ui: { type: Object, required: false }
+});
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("state", () => props.ui);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <UIcon
+            class="text-error"
+            :class="ui.icon"
+            :name="icons.failure"
+        />
+
+        <p :class="ui.title">{{ props.failure.title ?? messages.failureTitle }}</p>
+
+        <p :class="ui.hint">{{ props.failure.hint ?? messages.failureHint }}</p>
+
+        <div :class="ui.actions">
+            <UButton
+                color="neutral"
+                :icon="icons.retry"
+                :label="messages.retry"
+                variant="outline"
+                @click="props.failure.retry()"
+            />
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/State/FailureState.vue.d.ts

@@ -0,0 +1,10 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoTableFailure } from '#vuno/types/table';
+type __VLS_Props = {
+    /** El fallo con su reintento dentro: no hay forma de pintarlo sin salida. */
+    failure: VunoTableFailure;
+    ui?: VunoFieldSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,70 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+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?: VunoFieldSlots;
+    } & {
+        /**
+             * 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 `useVunoTableQuery`: 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;
+        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;
+        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>>;
+};
+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/Table.vue

@@ -0,0 +1,432 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
+import EmptyState from "#vuno/components/State/EmptyState.vue";
+import FailureState from "#vuno/components/State/FailureState.vue";
+import Form from "#vuno/components/Form/Form.vue";
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+import { getPath } from "#vuno/utils/path";
+import TableCell from "./TableCell.vue";
+const props = defineProps({
+  data: { type: Array, required: true },
+  definition: { type: Object, required: true },
+  failure: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  total: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const total = computed(() => props.total ?? 0);
+const hasFailure = computed(() => Boolean(props.failure));
+const emit = defineEmits(["rowClick"]);
+const query = defineModel("query", { type: Object, ...{ required: true } });
+const selection = defineModel("selection", { type: Array, ...{ default: () => [] } });
+defineSlots();
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("table", () => props.ui);
+const rowKey = computed(() => props.definition.rowKey ?? "id");
+const pageSizes = computed(() => props.definition.pageSizes ?? [10, 25, 50, 100]);
+const getRowId = (row) => String(getPath(row, rowKey.value) ?? "");
+const search = ref(query.value.search);
+let searchTimer;
+watch(search, (value) => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    if (value === query.value.search) return;
+    query.value = { ...query.value, page: 1, search: value };
+  }, 300);
+});
+watch(
+  () => query.value.search,
+  (value) => {
+    if (value !== search.value) search.value = value;
+  }
+);
+onBeforeUnmount(() => clearTimeout(searchTimer));
+const searchInput = useTemplateRef("searchInput");
+function clearSearch() {
+  clearTimeout(searchTimer);
+  search.value = "";
+  query.value = { ...query.value, page: 1, search: "" };
+  searchInput.value?.inputRef?.focus();
+}
+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 };
+}
+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;
+}
+const filtersOpen = ref(false);
+const filterState = ref({ ...query.value.filters });
+watch(
+  () => query.value.filters,
+  (value) => {
+    filterState.value = { ...value };
+  },
+  { deep: true }
+);
+const hasValue = (value) => value !== void 0 && value !== null && value !== "";
+const filtersDefinition = computed(() => ({
+  sections: [{ id: "filters", fields: props.definition.filters ?? [] }]
+}));
+const activeFilters = computed(
+  () => (props.definition.filters ?? []).filter((field) => hasValue(query.value.filters[field.name])).map((field) => {
+    const value = query.value.filters[field.name];
+    const option = "items" in field ? field.items?.find((item) => String(item.value) === String(value)) : void 0;
+    return {
+      name: field.name,
+      label: field.label ?? field.name,
+      value: option?.label ?? String(value)
+    };
+  })
+);
+function applyFilters() {
+  query.value = { ...query.value, filters: { ...filterState.value }, page: 1 };
+  filtersOpen.value = false;
+}
+function clearFilters() {
+  filterState.value = {};
+  query.value = { ...query.value, filters: {}, page: 1 };
+  filtersOpen.value = false;
+}
+function removeFilter(name) {
+  const filters = { ...query.value.filters };
+  delete filters[name];
+  query.value = { ...query.value, filters, page: 1 };
+}
+const rowSelection = computed({
+  get: () => Object.fromEntries(selection.value.map((key) => [String(key), true])),
+  set: (value) => {
+    selection.value = Object.entries(value).filter(([, selected]) => selected).map(([key]) => key);
+  }
+});
+const clearSelection = () => {
+  selection.value = [];
+};
+const columns = computed(() => {
+  const list = [];
+  if (props.definition.selectable) {
+    list.push({ id: "select", enableSorting: false });
+  }
+  for (const column of props.definition.columns) {
+    list.push({
+      id: column.key,
+      accessorKey: column.key,
+      enableSorting: false,
+      // La columna de acciones no lleva rótulo salvo que se pida uno.
+      header: column.type === "actions" ? column.label ?? "" : column.label ?? column.key,
+      meta: {
+        class: {
+          td: [column.align === "end" ? "text-end" : column.align === "center" ? "text-center" : "", column.class].filter(Boolean).join(" "),
+          th: [column.align === "end" ? "text-end" : column.align === "center" ? "text-center" : "", column.width].filter(Boolean).join(" ")
+        }
+      }
+    });
+  }
+  return list;
+});
+const rangeStart = computed(() => total.value === 0 ? 0 : (query.value.page - 1) * query.value.pageSize + 1);
+const rangeEnd = computed(() => Math.min(query.value.page * query.value.pageSize, total.value));
+function onPageChange(page) {
+  query.value = { ...query.value, page };
+}
+function onPageSizeChange(size) {
+  query.value = { ...query.value, page: 1, pageSize: size };
+}
+defineExpose({
+  clearFilters,
+  clearSearch,
+  clearSelection,
+  goToPage: onPageChange
+});
+function onRowSelect(_event, row) {
+  emit("rowClick", row.original);
+}
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.toolbar">
+            <UInput
+                ref="searchInput"
+                v-model="search"
+                :icon="icons.search"
+                :placeholder="props.definition.searchPlaceholder ?? messages.searchPlaceholder"
+                :ui="{ root: ui.search }"
+            >
+                <template
+                    v-if="search.length > 0"
+                    #trailing
+                >
+                    <UButton
+                        :aria-label="messages.clearSearch"
+                        color="neutral"
+                        :icon="icons.clearSearch"
+                        size="xs"
+                        variant="link"
+                        @click="clearSearch"
+                    />
+                </template>
+            </UInput>
+
+            <div :class="ui.toolbarActions">
+                <UButton
+                    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
+                    >
+                        <UBadge
+                            color="primary"
+                            :label="String(activeFilters.length)"
+                            size="sm"
+                            variant="solid"
+                        />
+                    </template>
+                </UButton>
+
+                <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>
+                <UButton
+                    color="neutral"
+                    :label="messages.clearSelection"
+                    size="xs"
+                    variant="ghost"
+                    @click="clearSelection"
+                />
+            </slot>
+        </div>
+
+        <div
+            v-if="activeFilters.length > 0"
+            :class="ui.chips"
+        >
+            <UBadge
+                v-for="filter in activeFilters"
+                :key="filter.name"
+                color="neutral"
+                variant="subtle"
+            >
+                <span>{{ filter.label }}: {{ filter.value }}</span>
+                <UButton
+                    :aria-label="`${messages.clearFilters}: ${filter.label}`"
+                    color="neutral"
+                    :icon="icons.fileRemove"
+                    size="xs"
+                    variant="link"
+                    @click="removeFilter(filter.name)"
+                />
+            </UBadge>
+
+            <UButton
+                color="neutral"
+                :label="messages.clearFilters"
+                size="xs"
+                variant="ghost"
+                @click="clearFilters"
+            />
+        </div>
+
+        <USlideover
+            v-model:open="filtersOpen"
+            :title="messages.filtersTitle"
+        >
+            <template #body>
+                <Form
+                    v-model:state="filterState"
+                    :definition="filtersDefinition"
+                    :ui="{ sections: ui.filtersBody }"
+                />
+            </template>
+
+            <template #footer>
+                <div :class="ui.filtersFooter">
+                    <UButton
+                        color="neutral"
+                        :label="messages.clearFilters"
+                        variant="ghost"
+                        @click="clearFilters"
+                    />
+                    <UButton
+                        :label="messages.applyFilters"
+                        @click="applyFilters"
+                    />
+                </div>
+            </template>
+        </USlideover>
+
+        <UTable
+            v-model:rowSelection="rowSelection"
+            :columns="columns"
+            :data="hasFailure ? [] : props.data"
+            :getRowId="getRowId"
+            :loading="props.loading ?? false"
+            :paginationOptions="{ manualPagination: true }"
+            :sortingOptions="{ manualSorting: true }"
+            :ui="{ base: ui.table, tbody: ui.tbody, td: ui.td, th: ui.th }"
+            @select="onRowSelect"
+        >
+            <template #select-header>
+                <UCheckbox
+                    :modelValue="props.data.length > 0 && props.data.every((row2) => selection.includes(getRowId(row2)))"
+                    @update:model-value="
+  (checked) => {
+    const keys = props.data.map((row2) => getRowId(row2));
+    selection = checked ? [.../* @__PURE__ */ new Set([...selection, ...keys])] : selection.filter((key) => !keys.includes(String(key)));
+  }
+"
+                />
+            </template>
+
+            <template #select-cell="{ row }">
+                <UCheckbox
+                    :modelValue="row.getIsSelected()"
+                    @update:model-value="row.toggleSelected(!row.getIsSelected())"
+                />
+            </template>
+
+            <template
+                v-for="column in props.definition.columns"
+                :key="`${column.key}-header`"
+                #[`${column.key}-header`]
+            >
+                <UButton
+                    v-if="column.sortable"
+                    class="-mx-2"
+                    color="neutral"
+                    :icon="sortIcon(column.key)"
+                    :label="column.label ?? column.key"
+                    size="xs"
+                    trailing
+                    variant="ghost"
+                    @click="toggleSort(column.key)"
+                />
+                <span v-else>{{ column.type === "actions" ? column.label ?? "" : column.label ?? column.key }}</span>
+            </template>
+
+            <template
+                v-for="column in props.definition.columns"
+                :key="`${column.key}-cell`"
+                #[`${column.key}-cell`]="{ row }"
+            >
+                <!-- `stop`: sin esto, abrir el menú dispara también el clic de
+                     fila y se acaban abriendo dos diálogos a la vez. -->
+                <UDropdownMenu
+                    v-if="column.type === 'actions'"
+                    :items="[
+  column.actions.filter((action) => !action.hidden?.(row.original)).map((action) => ({
+    color: action.color,
+    disabled: action.disabled?.(row.original) ?? false,
+    icon: action.icon,
+    label: action.label,
+    onSelect: () => action.onSelect(row.original)
+  }))
+]"
+                    @click.stop
+                >
+                    <UButton
+                        :aria-label="messages.rowActions"
+                        color="neutral"
+                        :icon="icons.actions"
+                        size="xs"
+                        variant="ghost"
+                    />
+                </UDropdownMenu>
+
+                <slot
+                    v-else
+                    :name="`cell-${column.key}`"
+                    :row="row.original"
+                    :value="getPath(row.original, column.key)"
+                >
+                    <TableCell
+                        :column="column"
+                        :row="row.original"
+                    />
+                </slot>
+            </template>
+
+            <template #empty>
+                <!-- Un fallo y una lista vacía no son lo mismo: el primero
+                     ofrece reintentar, el segundo invita a crear el primero. -->
+                <FailureState
+                    v-if="props.failure"
+                    :failure="props.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" />
+
+                <slot
+                    v-else
+                    name="empty"
+                >
+                    <EmptyState
+                        :hint="props.definition.empty?.hint"
+                        :icon="props.definition.empty?.icon"
+                        :title="props.definition.empty?.title"
+                    >
+                        <template #actions>
+                            <slot name="empty-actions" />
+                        </template>
+                    </EmptyState>
+                </slot>
+            </template>
+        </UTable>
+
+        <div
+            v-if="total > 0 && !hasFailure"
+            :class="ui.footer"
+        >
+            <div :class="ui.meta">
+                <span>{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</span>
+
+                <USelect
+                    :items="pageSizes"
+                    :modelValue="query.pageSize"
+                    size="xs"
+                    :ui="{ base: 'w-20' }"
+                    @update:model-value="(size) => onPageSizeChange(Number(size))"
+                />
+            </div>
+
+            <UPagination
+                :itemsPerPage="query.pageSize"
+                :page="query.page"
+                :total="total"
+                @update:page="onPageChange"
+            />
+        </div>
+    </div>
+</template>