@groupteknology/vuno 0.4.0 → 0.6.0

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

@@ -5,6 +5,7 @@ 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 { resolveColumnValue } from "#vuno/utils/column";
 import TableCell from "./TableCell.vue";
 const props = defineProps({
   data: { type: Array, required: true },
@@ -25,6 +26,8 @@ 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 searchable = computed(() => props.definition.searchable ?? true);
+const paginated = computed(() => props.definition.paginated ?? true);
 const getRowId = (row) => String(getPath(row, rowKey.value) ?? "");
 const search = ref(query.value.search);
 let searchTimer;
@@ -152,197 +155,198 @@ function onRowSelect(_event, row) {
 </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)))"
+    <div :class="ui.root">
+        <div :class="ui.toolbar">
+            <UInput
+                v-if="searchable"
+                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'"
+"
+                />
+            </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,
@@ -351,82 +355,87 @@ function onRowSelect(_event, row) {
     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>
+]"
+                    @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="resolveColumnValue(column, row.original)"
+                >
+                    <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 v-if="paginated">{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</span>
+
+                <!-- Sin paginar, un rango «1–30 de 30» sugiere que hay más. -->
+                <span v-else>{{ total }} {{ messages.results }}</span>
+
+                <USelect
+                    v-if="paginated"
+                    :items="pageSizes"
+                    :modelValue="query.pageSize"
+                    size="xs"
+                    :ui="{ base: 'w-20' }"
+                    @update:model-value="(size) => onPageSizeChange(Number(size))"
+                />
+            </div>
+
+            <UPagination
+                v-if="paginated"
+                :itemsPerPage="query.pageSize"
+                :page="query.page"
+                :total="total"
+                @update:page="onPageChange"
+            />
+        </div>
+    </div>
 </template>