@groupteknology/vuno 0.3.0 → 0.6.0

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

@@ -1,84 +1,35 @@
 <script setup>
 import { computed } from "vue";
-import { useLocale } from "@nuxt/ui/composables";
-import { formatCurrency, formatDate, formatNumber } from "#vuno/utils/format";
-import { getPath } from "#vuno/utils/path";
+import CellBadge from "#vuno/components/Cell/CellBadge.vue";
+import CellBoolean from "#vuno/components/Cell/CellBoolean.vue";
+import CellCurrency from "#vuno/components/Cell/CellCurrency.vue";
+import CellDate from "#vuno/components/Cell/CellDate.vue";
+import CellImage from "#vuno/components/Cell/CellImage.vue";
+import CellNumber from "#vuno/components/Cell/CellNumber.vue";
+import CellText from "#vuno/components/Cell/CellText.vue";
+import { resolveColumnValue } from "#vuno/utils/column";
 const props = defineProps({
   column: { type: null, required: true },
   row: { type: Object, required: true }
 });
-const locale = useLocale();
-const value = computed(() => getPath(props.row, props.column.key));
-const text = computed(() => {
-  const raw = value.value;
-  if (raw === null || raw === void 0) return "";
-  return String(raw);
-});
-const badge = computed(() => {
-  if (props.column.type !== "badge") return null;
-  const entry = props.column.map?.[text.value];
-  return {
-    color: entry?.color ?? props.column.color ?? "neutral",
-    label: entry?.label ?? text.value
-  };
-});
-const alt = computed(() => {
-  if (props.column.type !== "image") return "";
-  if (props.column.altKey) return String(getPath(props.row, props.column.altKey) ?? "");
-  return props.column.alt ?? "";
-});
+const components = {
+  badge: CellBadge,
+  boolean: CellBoolean,
+  currency: CellCurrency,
+  date: CellDate,
+  image: CellImage,
+  number: CellNumber,
+  text: CellText
+};
+const value = computed(() => resolveColumnValue(props.column, props.row));
+const component = computed(() => components[props.column.type] ?? CellText);
 </script>
 
 <template>
-    <span
-        v-if="props.column.type === 'number'"
-        class="tabular-nums"
-    >
-        {{ formatNumber(value, locale.code.value, props.column.decimals) }}
-    </span>
-
-    <span
-        v-else-if="props.column.type === 'currency'"
-        class="tabular-nums"
-    >
-        {{ formatCurrency(value, locale.code.value, props.column.currency, props.column.decimals) }}
-    </span>
-
-    <span
-        v-else-if="props.column.type === 'date'"
-        class="tabular-nums"
-    >
-        {{ formatDate(value, locale.code.value, { dateStyle: props.column.dateStyle ?? "medium", ...props.column.timeStyle ? { timeStyle: props.column.timeStyle } : {} }) }}
-    </span>
-
-    <UBadge
-        v-else-if="props.column.type === 'badge' && badge"
-        :color="badge.color"
-        :label="badge.label"
-        variant="subtle"
+    <component
+        :is="component"
+        :column="props.column"
+        :row="props.row"
+        :value="value"
     />
-
-    <UIcon
-        v-else-if="props.column.type === 'boolean' && !props.column.trueLabel && !props.column.falseLabel"
-        :class="value ? 'text-success' : 'text-muted'"
-        :name="value ? 'lucide:check' : 'lucide:minus'"
-    />
-
-    <span v-else-if="props.column.type === 'boolean'">
-        {{ value ? props.column.trueLabel ?? "" : props.column.falseLabel ?? "" }}
-    </span>
-
-    <UAvatar
-        v-else-if="props.column.type === 'image'"
-        :alt="alt"
-        :size="props.column.size ?? 'md'"
-        :src="text"
-    />
-
-    <span
-        v-else
-        :class="props.column.type === 'text' && props.column.truncate ? 'block max-w-[32ch] truncate' : void 0"
-    >
-        {{ text }}
-    </span>
 </template>

package/dist/runtime/app/composables/useVunoCrud.js

@@ -43,7 +43,15 @@ export function useVunoCrud(options) {
   });
   const items = computed(() => data.value?.data ?? []);
   const total = computed(() => data.value?.total ?? 0);
-  const failure = computed(() => isError.value ? { retry: () => void refetch() } : void 0);
+  const failure = computed(
+    () => isError.value ? {
+      // Sin valor propio los deja en `undefined` y el estado de
+      // fallo cae a los textos globales de `vuno.messages`.
+      hint: options.messages?.listFailedHint,
+      title: options.messages?.listFailed,
+      retry: () => void refetch()
+    } : void 0
+  );
   function invalidate() {
     if (!resolvedKey.value.ready) return;
     void queryClient.invalidateQueries({ queryKey: baseKey.value });

package/dist/runtime/app/theme/index.js

@@ -50,6 +50,9 @@ export const defaultTheme = {
   fieldSlug: {
     slots: { root: "w-full", trailing: "pe-1" }
   },
+  fieldSwitch: {
+    slots: { root: "w-full" }
+  },
   fieldText: {
     slots: { root: "w-full" }
   },
@@ -135,7 +138,18 @@ export const defaultTheme = {
       root: "flex w-full flex-col gap-4",
       search: "w-full sm:max-w-xs",
       selection: "bg-elevated/50 flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm",
-      table: "min-w-full",
+      /**
+       * `border-separate` es obligatorio, no una preferencia: con
+       * `border-collapse: collapse` el navegador ignora el `border-radius`
+       * de una tabla y el marco saldría cuadrado. El `border-spacing-0`
+       * devuelve el aspecto de colapsada.
+       *
+       * Se sostiene sobre dos cosas de Nuxt UI: que la cabecera no lleva
+       * fondo propio —si lo llevara, taparía las esquinas de arriba— y que
+       * la última fila no tiene borde inferior, que si no doblaría la
+       * línea con la del marco.
+       */
+      table: "border-default min-w-full rounded-lg border border-separate border-spacing-0",
       /**
        * Nuxt UI solo aplica hover a las filas con `data-selectable`, que
        * son las que reciben un manejador de selección. Aquí se aplica
@@ -153,6 +167,8 @@ export const defaultTheme = {
 export const defaultIcons = {
   actions: "lucide:ellipsis-vertical",
   addItem: "lucide:plus",
+  booleanFalse: "lucide:minus",
+  booleanTrue: "lucide:check",
   clearSearch: "lucide:x",
   confirm: "lucide:triangle-alert",
   empty: "lucide:inbox",
@@ -196,6 +212,7 @@ export const defaultMessages = {
   filtersTitle: "Filtrar resultados",
   of: "de",
   removeItem: "Eliminar elemento",
+  results: "resultados",
   retry: "Reintentar",
   rowActions: "Acciones",
   rowSelected: "fila seleccionada",

package/dist/runtime/app/types/crud.d.ts

@@ -10,6 +10,14 @@ export type VunoCrudMessages = {
     createFailed: string;
     deleted: string;
     deleteFailed: string;
+    /** Título cuando falla el listado. Por defecto, el de `vuno.messages`. */
+    listFailed: string;
+    /**
+     * Pista bajo ese título. Es el sitio para lo que evita un error a quien
+     * mira una tabla que no cargó: «no des una de alta sin verlas, puede
+     * existir ya».
+     */
+    listFailedHint: string;
     updated: string;
     updateFailed: string;
 };
@@ -55,7 +63,15 @@ export type VunoCrudOptions<TRow extends VunoTableRow, TForm> = {
     emptyForm: () => TForm;
     list: (query: VunoTableQuery) => Promise<VunoCrudPage<TRow>>;
     remove?: (row: TRow) => Promise<unknown>;
-    /** Convierte una fila en el estado del formulario al editar. */
+    /**
+     * Convierte una fila en el estado del formulario al editar.
+     *
+     * Es opcional solo mientras la fila y el formulario tengan la misma forma.
+     * En cuanto la fila traiga campos que no son del formulario —un contador,
+     * una fecha de alta— hace falta: sin él se copia la fila entera al estado
+     * y esos campos acaban viajando en el guardado, que es donde se nota, lejos
+     * de aquí.
+     */
     toForm?: (row: TRow) => TForm;
     update?: (id: number | string, form: TForm) => Promise<unknown>;
 };

package/dist/runtime/app/types/field.d.ts

@@ -52,6 +52,13 @@ export type VunoFieldArray = VunoFieldBase & {
 export type VunoFieldCheckbox = VunoFieldBase & {
     indeterminate?: boolean;
 };
+/**
+ * Interruptor para un booleano que es un estado encendido o apagado, no una
+ * opción que se marca. La diferencia con `checkbox` es de lectura, no de dato:
+ * en una pantalla de ajustes el interruptor dice «esto está activo» y la
+ * casilla dice «esto queda seleccionado».
+ */
+export type VunoFieldSwitch = VunoFieldBase;
 export type VunoFieldColor = VunoFieldBase & {
     placeholder?: string;
 };
@@ -112,7 +119,7 @@ export type VunoFieldTextarea = VunoFieldBase & {
  * Unión discriminada por `type`. Es lo que consume `VunoFormDefinition`, de modo
  * que cada campo de la definición queda tipado con sus propios props.
  */
-export type VunoField = WithType<VunoFieldArray, 'array'> | WithType<VunoFieldCheckbox, 'checkbox'> | WithType<VunoFieldColor, 'color'> | WithType<VunoFieldEmail, 'email'> | WithType<VunoFieldFile, 'file'> | WithType<VunoFieldNumber, 'number'> | WithType<VunoFieldPassword, 'password'> | WithType<VunoFieldRadio, 'radio'> | WithType<VunoFieldSelect, 'select'> | WithType<VunoFieldSlug, 'slug'> | WithType<VunoFieldText, 'text'> | WithType<VunoFieldTextarea, 'textarea'>;
+export type VunoField = WithType<VunoFieldArray, 'array'> | WithType<VunoFieldCheckbox, 'checkbox'> | WithType<VunoFieldColor, 'color'> | WithType<VunoFieldEmail, 'email'> | WithType<VunoFieldFile, 'file'> | WithType<VunoFieldNumber, 'number'> | WithType<VunoFieldPassword, 'password'> | WithType<VunoFieldRadio, 'radio'> | WithType<VunoFieldSelect, 'select'> | WithType<VunoFieldSlug, 'slug'> | WithType<VunoFieldSwitch, 'switch'> | WithType<VunoFieldText, 'text'> | WithType<VunoFieldTextarea, 'textarea'>;
 export type VunoFieldType = VunoField['type'];
 /** Extrae los props de un tipo concreto de campo: `VunoFieldOf<'slug'>`. */
 export type VunoFieldOf<TType extends VunoFieldType> = Extract<VunoField, {

package/dist/runtime/app/types/table.d.ts

@@ -41,7 +41,18 @@ export type VunoTableEmpty = {
     title?: string;
 };
 export type VunoTableAlign = 'center' | 'end' | 'start';
-export type VunoTableRow = Record<string, unknown>;
+/**
+ * Una fila. `object` y no `Record<string, unknown>` a propósito: un `interface`
+ * de TypeScript no tiene firma de índice implícita, así que no satisface un
+ * `Record`, y los tipos de respuesta de una API se declaran como `interface`
+ * casi siempre. Con el `Record`, cada consumidor tenía que escribir
+ * `type Fila = SuInterface & Record<string, unknown>` para poder usar la tabla,
+ * y el error que salía —«no assignable to VunoTableRow»— no señalaba la causa.
+ *
+ * La firma de índice no hacía falta para nada: los valores se leen con
+ * `getPath`, que recorre el objeto en tiempo de ejecución y acepta `unknown`.
+ */
+export type VunoTableRow = object;
 /** Color semántico de Nuxt UI; el proyecto consumidor decide qué tono es cada uno. */
 export type VunoColor = 'error' | 'info' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning';
 /**
@@ -49,31 +60,52 @@ export type VunoColor = 'error' | 'info' | 'neutral' | 'primary' | 'secondary' |
  * que es quien sabe sobre qué campos puede buscar; declararlo aquí sugeriría
  * que la tabla filtra, y no lo hace.
  */
-export type VunoTableColumnBase = {
+export type VunoTableColumnBase<TRow extends VunoTableRow = VunoTableRow> = {
     align?: VunoTableAlign;
     class?: string;
-    /** Ruta del valor en la fila. Admite anidado: `'proveedor.nombre'`. */
+    /**
+     * Ruta del valor en la fila. Admite anidado: `'proveedor.nombre'`.
+     *
+     * Sigue haciendo falta con `value`: nombra la columna para el orden y para
+     * el slot `cell-<key>`.
+     */
     key: string;
     label?: string;
     sortable?: boolean;
     ui?: VunoFieldSlots;
     width?: string;
+    /**
+     * Calcula el valor a partir de la fila entera, en lugar de leerlo de `key`.
+     *
+     * ```ts
+     * { key: 'role', type: 'badge', value: (row) => traducirRol(row.role) }
+     * ```
+     *
+     * Sustituye de dónde sale el valor, no cómo se pinta: lo que devuelve sigue
+     * pasando por el formato de su tipo de columna —moneda, fecha, el `map` de
+     * un badge—, así que se combinan.
+     *
+     * Cuidado al ordenar: `sortable` ordena en servidor por `key`, y el servidor
+     * no conoce esta función. Si el valor mostrado no se deriva de `key` de
+     * forma monótona, el orden no coincidirá con lo que se ve.
+     */
+    value?: (row: TRow) => unknown;
 };
-export type VunoTableColumnText = VunoTableColumnBase & {
+export type VunoTableColumnText<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     truncate?: boolean;
 };
-export type VunoTableColumnNumber = VunoTableColumnBase & {
+export type VunoTableColumnNumber<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     decimals?: number;
 };
-export type VunoTableColumnCurrency = VunoTableColumnBase & {
+export type VunoTableColumnCurrency<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     currency?: string;
     decimals?: number;
 };
-export type VunoTableColumnDate = VunoTableColumnBase & {
+export type VunoTableColumnDate<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     dateStyle?: 'full' | 'long' | 'medium' | 'short';
     timeStyle?: 'full' | 'long' | 'medium' | 'short';
 };
-export type VunoTableColumnBoolean = VunoTableColumnBase & {
+export type VunoTableColumnBoolean<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     falseLabel?: string;
     trueLabel?: string;
 };
@@ -82,18 +114,18 @@ export type VunoTableBadgeMap = Record<string, {
     color?: VunoColor;
     label?: string;
 }>;
-export type VunoTableColumnBadge = VunoTableColumnBase & {
+export type VunoTableColumnBadge<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     color?: VunoColor;
     map?: VunoTableBadgeMap;
 };
-export type VunoTableColumnImage = VunoTableColumnBase & {
+export type VunoTableColumnImage<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     alt?: string;
     /** Clave de la fila de la que sacar el texto alternativo. */
     altKey?: string;
     size?: 'lg' | 'md' | 'sm' | 'xs';
 };
 /** Delega el contenido en el slot `cell-<key>`. */
-export type VunoTableColumnCustom = VunoTableColumnBase;
+export type VunoTableColumnCustom<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow>;
 export type VunoTableAction<TRow extends VunoTableRow = VunoTableRow> = {
     onSelect: (row: TRow) => void;
     color?: VunoColor;
@@ -105,12 +137,29 @@ export type VunoTableAction<TRow extends VunoTableRow = VunoTableRow> = {
     /** Oculta la acción para esa fila concreta. */
     hidden?: (row: TRow) => boolean;
 };
-export type VunoTableColumnActions<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase & {
+export type VunoTableColumnActions<TRow extends VunoTableRow = VunoTableRow> = VunoTableColumnBase<TRow> & {
     actions: VunoTableAction<TRow>[];
 };
 /** Unión discriminada por `type`, igual que `VunoField` en los formularios. */
-export type VunoTableColumn<TRow extends VunoTableRow = VunoTableRow> = WithType<VunoTableColumnActions<TRow>, 'actions'> | WithType<VunoTableColumnBadge, 'badge'> | WithType<VunoTableColumnBoolean, 'boolean'> | WithType<VunoTableColumnCurrency, 'currency'> | WithType<VunoTableColumnCustom, 'custom'> | WithType<VunoTableColumnDate, 'date'> | WithType<VunoTableColumnImage, 'image'> | WithType<VunoTableColumnNumber, 'number'> | WithType<VunoTableColumnText, 'text'>;
+export type VunoTableColumn<TRow extends VunoTableRow = VunoTableRow> = WithType<VunoTableColumnActions<TRow>, 'actions'> | WithType<VunoTableColumnBadge<TRow>, 'badge'> | WithType<VunoTableColumnBoolean<TRow>, 'boolean'> | WithType<VunoTableColumnCurrency<TRow>, 'currency'> | WithType<VunoTableColumnCustom<TRow>, 'custom'> | WithType<VunoTableColumnDate<TRow>, 'date'> | WithType<VunoTableColumnImage<TRow>, 'image'> | WithType<VunoTableColumnNumber<TRow>, 'number'> | WithType<VunoTableColumnText<TRow>, 'text'>;
 export type VunoTableColumnType = VunoTableColumn['type'];
+/** Extrae los props de un tipo concreto de columna: `VunoTableColumnOf<'badge'>`. */
+export type VunoTableColumnOf<TType extends VunoTableColumnType> = Extract<VunoTableColumn, {
+    type: TType;
+}>;
+/**
+ * Tipos que pinta una celda.
+ *
+ * `actions` y `custom` quedan fuera porque no los resuelve la celda: el menú de
+ * acciones y el slot propio los pinta la tabla, que es quien tiene los eventos.
+ */
+export type VunoTableCellType = Exclude<VunoTableColumnType, 'actions' | 'custom'>;
+/** Props comunes a toda celda. El valor llega resuelto para no repetir `getPath`. */
+export type VunoTableCellProps<TType extends VunoTableCellType = VunoTableCellType> = {
+    column: VunoTableColumnOf<TType>;
+    row: VunoTableRow;
+    value: unknown;
+};
 export type VunoTableDefinition<TRow extends VunoTableRow = VunoTableRow> = {
     columns: VunoTableColumn<TRow>[];
     /** Texto e icono cuando no hay ninguna fila. */
@@ -122,8 +171,26 @@ export type VunoTableDefinition<TRow extends VunoTableRow = VunoTableRow> = {
     filters?: VunoField[];
     /** Tamaños ofrecidos en el selector de filas por página. */
     pageSizes?: number[];
+    /**
+     * Si el endpoint pagina. Por defecto `true`.
+     *
+     * En `false` desaparecen el paginador y el selector de tamaño, y el pie
+     * pasa a decir cuántos resultados hay y nada más.
+     */
+    paginated?: boolean;
     /** Campo que identifica la fila; se usa como clave de selección. */
     rowKey?: string;
+    /**
+     * Si el endpoint busca. Por defecto `true`.
+     *
+     * En `false` no se pinta la barra de búsqueda. No es cosmética: una barra
+     * que no filtra es una promesa que la pantalla no puede cumplir, y como
+     * funciona visualmente nadie la reporta como defecto.
+     *
+     * Es del endpoint y no de cada columna: quien decide sobre qué campos se
+     * busca es el servidor, no la tabla.
+     */
+    searchable?: boolean;
     searchPlaceholder?: string;
     selectable?: boolean;
 };

package/dist/runtime/app/types/theme.d.ts

@@ -14,6 +14,10 @@ export type VunoThemeConfig = {
 export type VunoIcons = {
     actions: string;
     addItem: string;
+    /** Celda booleana sin etiquetas: el «no». */
+    booleanFalse: string;
+    /** Celda booleana sin etiquetas: el «sí». */
+    booleanTrue: string;
     clearSearch: string;
     confirm: string;
     empty: string;
@@ -57,6 +61,8 @@ export type VunoMessages = {
     filtersTitle: string;
     of: string;
     removeItem: string;
+    /** Pie de una tabla que no pagina: «30 resultados». */
+    results: string;
     retry: string;
     rowActions: string;
     rowSelected: string;

package/dist/runtime/app/utils/column.d.ts

@@ -0,0 +1,9 @@
+import type { VunoTableColumn, VunoTableRow } from '#vuno/types/table';
+/**
+ * El valor que muestra una columna.
+ *
+ * Vive aquí y no dentro de la celda porque lo necesitan dos sitios —la celda y
+ * el slot `cell-<key>`—, y si cada uno lo resolviera por su cuenta, una columna
+ * con `value` enseñaría una cosa en la celda y le pasaría otra al slot.
+ */
+export declare function resolveColumnValue<TRow extends VunoTableRow>(column: VunoTableColumn<TRow>, row: TRow): unknown;

package/dist/runtime/app/utils/column.js

@@ -0,0 +1,5 @@
+import { getPath } from "./path.js";
+export function resolveColumnValue(column, row) {
+  if (column.value) return column.value(row);
+  return getPath(row, column.key);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupteknology/vuno",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "type": "module",
   "exports": {
     ".": {