@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/composables/internal/useVunoAnchor.js

@@ -0,0 +1,35 @@
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { onScopeDispose, toValue } from "vue";
+export function useVunoAnchor(options = {}) {
+  let stop;
+  async function place(reference, floating) {
+    const edge = toValue(options.boundary);
+    const overflow = { padding: 8, ...edge ? { boundary: edge } : {} };
+    const middleware = [offset(toValue(options.distance) ?? 4), flip(overflow), shift(overflow)];
+    const arrowElement = toValue(options.arrowElement);
+    if (arrowElement) middleware.push(arrow({ element: arrowElement }));
+    middleware.push(...options.middleware?.() ?? []);
+    const position = await computePosition(reference, floating, {
+      middleware,
+      placement: toValue(options.placement) ?? "bottom-start",
+      strategy: "fixed"
+    });
+    if (!floating.isConnected) return;
+    Object.assign(floating.style, { left: `${position.x}px`, top: `${position.y}px` });
+    options.onPlaced?.(position);
+  }
+  function anchor(reference, floating) {
+    release();
+    if (!reference || !floating) return;
+    stop = autoUpdate(reference, floating, () => void place(reference, floating), {
+      elementResize: typeof ResizeObserver !== "undefined",
+      layoutShift: typeof IntersectionObserver !== "undefined"
+    });
+  }
+  function release() {
+    stop?.();
+    stop = void 0;
+  }
+  onScopeDispose(release, true);
+  return { anchor, release };
+}

package/dist/runtime/app/composables/internal/useVunoControlGroup.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoControlOrientation } from '#vuno/types/field';
+type VunoControlGroupContext = {
+    orientation?: VunoControlOrientation;
+    size?: VunoSize;
+};
+/** Provee el contexto sin exponer la clave de inyección a sus consumidores. */
+export declare function provideVunoControlGroup(context: MaybeRefOrGetter<VunoControlGroupContext>): void;
+/** Contexto visual del grupo más cercano; no añade semántica al control. */
+export declare function useVunoControlGroup(): {
+    orientation: ComputedRef<VunoControlOrientation | undefined>;
+    size: ComputedRef<VunoSize | undefined>;
+};
+/** Impide que las acciones internas de un control se comporten como hijos del grupo exterior. */
+export declare function resetControlGroup(): void;
+export {};

package/dist/runtime/app/composables/internal/useVunoControlGroup.js

@@ -0,0 +1,18 @@
+import { computed, inject, provide, toValue } from "vue";
+const vunoControlGroupInjectionKey = Symbol("vuno.control-group");
+export function provideVunoControlGroup(context) {
+  provide(
+    vunoControlGroupInjectionKey,
+    computed(() => toValue(context))
+  );
+}
+export function useVunoControlGroup() {
+  const group = inject(vunoControlGroupInjectionKey, void 0);
+  return {
+    orientation: computed(() => group?.value.orientation),
+    size: computed(() => group?.value.size)
+  };
+}
+export function resetControlGroup() {
+  provideVunoControlGroup({});
+}

package/dist/runtime/app/composables/internal/useVunoPortal.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { VunoPortalTarget } from '#vuno/types/base';
+/**
+ * Dónde montar un desplegable para que se vea.
+ *
+ * Un `<dialog>` abierto con `showModal()` vive en la **capa superior** del
+ * navegador, que está por encima de cualquier `z-index`. Un desplegable que se
+ * monte en `body` —lo que hacen por defecto los componentes de Nuxt UI— queda
+ * por debajo de esa capa: se abre de verdad, con su `aria-expanded` y su
+ * `listbox` en el DOM, colocado en el sitio correcto, y no se ve. El campo
+ * parece roto sin que nada falle.
+ *
+ * La salida es montarlo **dentro** del propio diálogo, que ya está en la capa
+ * superior. Fuera de un modal no hay nada que proveer y se usa `body`.
+ */
+export declare function useVunoPortal(target?: MaybeRefOrGetter<undefined | VunoPortalTarget>): ComputedRef<string>;
+/** Lo llama quien abre una capa superior, para que sus campos la encuentren. */
+export declare function provideVunoPortal(target: VunoPortalTarget): void;

package/dist/runtime/app/composables/internal/useVunoPortal.js

@@ -0,0 +1,12 @@
+import { computed, inject, provide, toValue } from "vue";
+const vunoPortalInjectionKey = Symbol("vuno-portal");
+export function useVunoPortal(target) {
+  const injected = inject(vunoPortalInjectionKey, true);
+  return computed(() => {
+    const resolved = toValue(target) ?? injected;
+    return resolved === true ? "body" : resolved;
+  });
+}
+export function provideVunoPortal(target) {
+  provide(vunoPortalInjectionKey, target);
+}

package/dist/runtime/app/composables/useConfirm.d.ts

@@ -0,0 +1,15 @@
+import type { VunoConfirmRequest } from '#vuno/types/app';
+/**
+ * Pide confirmación desde el código y espera la respuesta.
+ *
+ * ```ts
+ * if (await confirm({ title: `¿Eliminar ${row.sku}?` })) await borrar(row)
+ * ```
+ *
+ * El componente `VConfirm` sigue estando para quien quiera colocarlo y
+ * controlarlo. Esto existe porque lo otro obliga a llevar un `ref` de apertura y
+ * otro de la fila pendiente por cada acción confirmable, y eso se abandona: los
+ * dos primeros proyectos que usaron el módulo se quedaron con su diálogo propio,
+ * y los dos tenían una función como esta.
+ */
+export declare function useConfirm(): (request: VunoConfirmRequest) => Promise<boolean>;

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

@@ -0,0 +1,5 @@
+import { useContext } from "./useContext.js";
+export function useConfirm() {
+  const context = useContext();
+  return context.confirm;
+}

package/dist/runtime/app/composables/useContext.d.ts

@@ -0,0 +1,11 @@
+import type { VunoContext } from '#vuno/types/app';
+export type { VunoContext } from '#vuno/types/app';
+/**
+ * El contexto global del módulo, provisto por `<VApp>`.
+ *
+ * Lanza en vez de degradar a un valor vacío: lo que hay aquí —los overlays—
+ * necesita un sitio del árbol donde pintarse, y sin `<VApp>` una llamada a
+ * `confirm()` devolvería una promesa que no resuelve nunca. Es mejor un error
+ * en la primera ejecución que un diálogo que no aparece.
+ */
+export declare function useContext(): VunoContext;

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

@@ -0,0 +1,9 @@
+import { inject } from "vue";
+import { vunoContextInjectionKey } from "#vuno/internal/keys";
+export function useContext() {
+  const context = inject(vunoContextInjectionKey, null);
+  if (!context) {
+    throw new Error("[Vuno] useContext() debe utilizarse dentro de <VApp>.");
+  }
+  return context;
+}

package/dist/runtime/app/composables/useCrud.d.ts

@@ -0,0 +1,23 @@
+import type { VunoCrud, VunoCrudOptions } from '#vuno/types/crud';
+import type { VunoTableRow } from '#vuno/types/table';
+/**
+ * El ciclo completo de una pantalla de mantenimiento: listar, dar de alta o
+ * editar en un modal, borrar con confirmación, refrescar la caché y avisar.
+ *
+ * Existe porque ese ciclo es idéntico en todas las entidades y, escrito a mano,
+ * son unas cien líneas por pantalla en las que es fácil olvidar justo lo que no
+ * se ve: invalidar la caché, avisar del fallo o distinguir un listado vacío de
+ * uno que no se pudo cargar.
+ *
+ * ```ts
+ * const crud = useCrud({
+ *   key: 'brands',
+ *   list: (query) => $fetch('/api/brands', { query }),
+ *   create: (form) => $fetch('/api/brands', { body: form, method: 'POST' }),
+ *   update: (id, form) => $fetch(`/api/brands/${id}`, { body: form, method: 'PATCH' }),
+ *   remove: (row) => $fetch(`/api/brands/${row.id}`, { method: 'DELETE' }),
+ *   emptyForm: () => ({ name: '', slug: '' }),
+ * })
+ * ```
+ */
+export declare function useCrud<TRow extends VunoTableRow, TForm extends Record<string, unknown>>(options: VunoCrudOptions<TRow, TForm>): VunoCrud<TRow, TForm>;

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

@@ -0,0 +1,153 @@
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
+import { computed, onServerPrefetch, ref, shallowRef, toValue } from "vue";
+import { useToast } from "#vuno/composables/useToast";
+import { getPath } from "#vuno/utils/path";
+import { resolveQueryKey } from "#vuno/utils/query-key";
+import { useTableQuery } from "./useTableQuery.js";
+import { useMessages } from "./useTheme.js";
+export function useCrud(options) {
+  const toast = useToast();
+  const queryClient = useQueryClient();
+  const messages = useMessages();
+  const query = options.query ?? useTableQuery();
+  const resolvedKey = computed(() => resolveQueryKey(toValue(options.key)));
+  const baseKey = computed(() => resolvedKey.value.segments);
+  const isEnabled = computed(() => resolvedKey.value.ready && (toValue(options.enabled) ?? true));
+  const rowKey = options.rowKey ?? "id";
+  const text = computed(() => ({
+    created: options.messages?.created ?? messages.value.created,
+    createFailed: options.messages?.createFailed ?? messages.value.saveFailed,
+    deleted: options.messages?.deleted ?? messages.value.deleted,
+    deleteFailed: options.messages?.deleteFailed ?? messages.value.deleteFailed,
+    updated: options.messages?.updated ?? messages.value.updated,
+    updateFailed: options.messages?.updateFailed ?? messages.value.saveFailed
+  }));
+  const { data, isError, isPending, refetch, suspense } = useQuery({
+    // Sin esto, cambiar de filtro o de página deja `data` en undefined
+    // mientras llega la respuesta y la tabla parpadea enseñando su estado
+    // vacío. Con los datos anteriores en pantalla, el cambio no salta.
+    enabled: isEnabled,
+    placeholderData: keepPreviousData,
+    queryKey: computed(() => [...baseKey.value, query.value]),
+    // La consulta forma parte de la clave: otra página u otro filtro es otra
+    // consulta, y así cada una se cachea por separado.
+    queryFn: () => options.list(query.value)
+  });
+  onServerPrefetch(async () => {
+    if (options.server === false) return;
+    if (!isEnabled.value) return;
+    try {
+      await suspense();
+    } catch {
+    }
+  });
+  const items = computed(() => resolvedKey.value.ready ? data.value?.data ?? [] : []);
+  const total = computed(() => resolvedKey.value.ready ? data.value?.total ?? 0 : 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 });
+  }
+  const formOpen = ref(false);
+  const editing = shallowRef(null);
+  const state = ref(options.emptyForm());
+  const save = useMutation({
+    onError: (error) => {
+      toast.error({ description: describe(error), title: editing.value ? text.value.updateFailed : text.value.createFailed });
+    },
+    onSuccess: (result) => {
+      invalidate();
+      formOpen.value = false;
+      toast.success({ title: result === "updated" ? text.value.updated : text.value.created });
+    },
+    /**
+     * Sin la función que toca no se anuncia nada.
+     *
+     * `create` y `update` son opcionales porque hay pantallas que solo
+     * listan o solo editan, pero con el formulario ya enviado la opción
+     * de no hacer nada no existe: se guardaba el vacío y salía «Creado
+     * correctamente», así que el aviso de éxito tapaba que el cambio no
+     * había salido de la pantalla. Peor aún al editar sin `update`, donde
+     * además se anunciaba un alta. Falla, que es lo honesto, y el texto
+     * dice qué falta por conectar.
+     */
+    mutationFn: async (form) => {
+      const row = editing.value;
+      if (row) {
+        if (!options.update) throw new Error("[Vuno] useCrud: falta la funci\xF3n `update`, as\xED que no hay d\xF3nde guardar la edici\xF3n.");
+        await options.update(getPath(row, rowKey), form);
+        return "updated";
+      }
+      if (!options.create) throw new Error("[Vuno] useCrud: falta la funci\xF3n `create`, as\xED que no hay d\xF3nde guardar el alta.");
+      await options.create(form);
+      return "created";
+    }
+  });
+  function openCreate() {
+    editing.value = null;
+    state.value = options.emptyForm();
+    formOpen.value = true;
+  }
+  function openEdit(row) {
+    editing.value = row;
+    state.value = options.toForm ? options.toForm(row) : { ...row };
+    formOpen.value = true;
+  }
+  const confirmOpen = ref(false);
+  const deleting = shallowRef(null);
+  const remove = useMutation({
+    onError: (error) => {
+      toast.error({ description: describe(error), title: text.value.deleteFailed });
+    },
+    onSuccess: () => {
+      invalidate();
+      confirmOpen.value = false;
+      deleting.value = null;
+      toast.success({ title: text.value.deleted });
+    },
+    mutationFn: async (row) => {
+      if (!options.remove) throw new Error("[Vuno] useCrud: falta la funci\xF3n `remove`, as\xED que no hay d\xF3nde ejecutar el borrado.");
+      await options.remove(row);
+    }
+  });
+  function askDelete(row) {
+    deleting.value = row;
+    confirmOpen.value = true;
+  }
+  function confirmDelete() {
+    if (deleting.value) remove.mutate(deleting.value);
+  }
+  return {
+    askDelete,
+    confirmDelete,
+    confirmOpen,
+    deleting,
+    editing,
+    failure,
+    formOpen,
+    invalidate,
+    isDeleting: remove.isPending,
+    isEnabled,
+    isPending,
+    isSaving: save.isPending,
+    items,
+    openCreate,
+    openEdit,
+    query,
+    refetch,
+    state,
+    total,
+    submit: () => save.mutate(state.value)
+  };
+}
+function describe(error) {
+  return error instanceof Error ? error.message : void 0;
+}

package/dist/runtime/app/composables/useField.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export declare function useField<TValue = unknown>(name: MaybeRefOrGetter<string | undefined>, model?: Ref<TValue | undefined>): {
+    name: import("vue").ComputedRef<string | undefined>;
+    dirty: import("vue").ComputedRef<boolean>;
+    reset: () => void;
+    setTouched: (touched?: boolean) => void;
+    setValue: (newValue: TValue) => void;
+    touched: import("vue").ComputedRef<boolean>;
+    value: import("vue").WritableComputedRef<TValue | undefined, TValue | undefined>;
+};

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

@@ -0,0 +1,42 @@
+import { computed, toValue } from "vue";
+import { useForm } from "./useForm.js";
+export function useField(name, model) {
+  const form = useForm({ optional: true });
+  if (!form && !model) throw new Error("[Vuno] useField() necesita un <VForm> o un modelo externo.");
+  const resolvedName = computed(() => toValue(name));
+  const value = computed({
+    get() {
+      const fieldName = resolvedName.value;
+      if (form && fieldName) return form.getValue(fieldName);
+      return model?.value;
+    },
+    set(newValue) {
+      const fieldName = resolvedName.value;
+      if (form && fieldName) {
+        form.setValue(fieldName, newValue);
+        return;
+      }
+      if (model) model.value = newValue;
+    }
+  });
+  const dirty = computed(() => form && resolvedName.value ? form.isDirty(resolvedName.value) : false);
+  const touched = computed(() => form && resolvedName.value ? form.isTouched(resolvedName.value) : false);
+  function reset() {
+    if (form && resolvedName.value) form.resetField(resolvedName.value);
+  }
+  function setTouched(touched2 = true) {
+    if (form && resolvedName.value) form.setTouched(resolvedName.value, touched2);
+  }
+  function setValue(newValue) {
+    value.value = newValue;
+  }
+  return {
+    name: resolvedName,
+    dirty,
+    reset,
+    setTouched,
+    setValue,
+    touched,
+    value
+  };
+}

package/dist/runtime/app/composables/useForm.d.ts

@@ -0,0 +1,5 @@
+import type { VunoFormContext, VunoFormState } from '#vuno/types/form';
+export declare function useForm<TState extends VunoFormState = VunoFormState>(): VunoFormContext<TState>;
+export declare function useForm<TState extends VunoFormState = VunoFormState>(options: {
+    optional: true;
+}): null | VunoFormContext<TState>;

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

@@ -0,0 +1,9 @@
+import { inject } from "vue";
+import { vunoFormInjectionKey } from "#vuno/internal/keys";
+export function useForm(options) {
+  const form = inject(vunoFormInjectionKey, null);
+  if (!form && !options?.optional) {
+    throw new Error("[Vuno] useForm() debe utilizarse dentro de <VForm>.");
+  }
+  return form;
+}

package/dist/runtime/app/composables/useModal.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Abre los modales del proyecto por su clave.
+ *
+ * El convenio es una carpeta `components/modal/` y un componente por modal:
+ * `components/modal/ModalProduct.vue` se abre con `open('product')`. Nuxt ya
+ * registra esos componentes por su nombre, así que no hay nada que registrar:
+ * la clave **es** el nombre, y un modal que existe se puede abrir.
+ *
+ * ```ts
+ * const modal = useModal()
+ * const saved = await modal.open('product', { id: row.id })
+ * ```
+ *
+ * El componente recibe `open` y los props que le pases, y resuelve la promesa
+ * emitiendo `close` con su resultado. Se pinta en `<VApp>` y no en la pantalla
+ * que lo abrió, así que sobrevive a navegar y no arrastra la promesa consigo.
+ */
+export declare function useModal(): {
+    close: () => void;
+    open: <TResult = unknown>(key: string, props?: Record<string, unknown>) => Promise<TResult | undefined>;
+};

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

@@ -0,0 +1,24 @@
+import { getCurrentInstance } from "vue";
+import { useContext } from "./useContext.js";
+export function useModal() {
+  const context = useContext();
+  const instance = getCurrentInstance();
+  function resolve(key) {
+    const registry = { ...instance?.root.appContext.components, ...instance?.appContext.components };
+    const name = toComponentName(key);
+    const component = registry[name] ?? registry[key];
+    if (!component) {
+      const available = Object.keys(registry).filter((entry) => entry.startsWith("Modal"));
+      throw new Error(`[Vuno] No se encontr\xF3 el modal \xAB${name}\xBB. Debe existir en components/modal/ y llamarse ${name}.vue. ` + (available.length > 0 ? `Registrados: ${available.join(", ")}.` : `No hay ninguno registrado (${Object.keys(registry).length} componentes en total).`));
+    }
+    return component;
+  }
+  return {
+    close: context.closeAll,
+    open: (key, props) => context.open(resolve(key), props)
+  };
+}
+function toComponentName(key) {
+  const pascal = key.split(/[-_\s]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+  return pascal.startsWith("Modal") ? pascal : `Modal${pascal}`;
+}

package/dist/runtime/app/composables/useOverlay.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Abre overlays desde el código, sin colocarlos en la plantilla.
+ *
+ * ```ts
+ * const overlay = useOverlay()
+ * const elegido = await overlay.open<Producto>(SelectorDeProducto, { categoria })
+ * ```
+ *
+ * El componente recibe `open` y resuelve la promesa emitiendo `close` con su
+ * resultado. Cerrarlo con Escape o pulsando fuera resuelve con `undefined`, de
+ * modo que ninguna espera se queda colgada.
+ *
+ * Se pintan todos en `<VApp>`, no en la pantalla que los pidió: un diálogo
+ * montado dentro de la pantalla que lo abre se desmonta con ella, y su promesa
+ * no resuelve nunca. El apilado lo lleva el propio registro.
+ */
+export declare function useOverlay(): {
+    alert: (request: import("../types/app.js").VunoAlertRequest) => Promise<void>;
+    closeAll: () => void;
+    confirm: (request: import("../types/app.js").VunoConfirmRequest) => Promise<boolean>;
+    open: <TResult = unknown>(component: import("vue").Component, props?: Record<string, unknown>) => Promise<TResult | undefined>;
+};

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

@@ -0,0 +1,10 @@
+import { useContext } from "./useContext.js";
+export function useOverlay() {
+  const context = useContext();
+  return {
+    alert: context.alert,
+    closeAll: context.closeAll,
+    confirm: context.confirm,
+    open: context.open
+  };
+}

package/dist/runtime/app/composables/useTableQuery.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+import type { VunoTableQuery, VunoTableQueryOptions } from '#vuno/types/table';
+/**
+ * Estado de consulta para `<VTable v-model:query>`.
+ *
+ * Sin `url` es un `ref` normal. Con `url: true` se sincroniza en los dos
+ * sentidos con la query string, de modo que navegar atrás o pegar el enlace
+ * en otra pestaña reproduce la misma vista.
+ */
+export declare function useTableQuery(options?: VunoTableQueryOptions): Ref<VunoTableQuery>;

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

@@ -0,0 +1,126 @@
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "#imports";
+import { isEqual } from "#vuno/utils/path";
+const FILTER_JSON_PREFIX = "~vuno-json:";
+export function useTableQuery(options = {}) {
+  const defaults = {
+    filters: options.filters ?? {},
+    page: options.page ?? 1,
+    pageSize: options.pageSize ?? 25,
+    search: options.search ?? "",
+    sort: typeof options.sort === "string" ? { column: options.sort, direction: "asc" } : options.sort ?? null
+  };
+  const normalize = (value) => ({ ...value, sort: value.sort ?? defaults.sort });
+  if (!options.url) {
+    const local = ref({ ...defaults });
+    return computed({
+      get: () => local.value,
+      set: (value) => {
+        local.value = normalize(value);
+      }
+    });
+  }
+  const route = useRoute();
+  const router = useRouter();
+  const prefix = options.prefix ?? "";
+  const keys = {
+    direction: `${prefix}direction`,
+    page: `${prefix}page`,
+    pageSize: `${prefix}pageSize`,
+    search: `${prefix}search`,
+    sort: `${prefix}sort`
+  };
+  const filterKeys = options.filterKeys ?? Object.keys(defaults.filters);
+  const readFilters = () => {
+    const filters = { ...defaults.filters };
+    for (const key of filterKeys) {
+      const raw = route.query[`${prefix}${key}`];
+      if (raw === void 0) continue;
+      filters[key] = readFilterValue(readString(raw, ""));
+    }
+    return filters;
+  };
+  const fromRoute = () => {
+    const column = readString(route.query[keys.sort], "");
+    return {
+      filters: readFilters(),
+      page: readNumber(route.query[keys.page], defaults.page),
+      pageSize: readNumber(route.query[keys.pageSize], defaults.pageSize),
+      search: readString(route.query[keys.search], defaults.search),
+      // Sin parámetro se cae al orden por defecto.
+      sort: column ? { column, direction: readString(route.query[keys.direction], "asc") === "desc" ? "desc" : "asc" } : defaults.sort
+    };
+  };
+  const state = ref(fromRoute());
+  const toRouteQuery = (value) => {
+    const next = { ...route.query };
+    next[keys.page] = value.page === defaults.page ? void 0 : String(value.page);
+    next[keys.pageSize] = value.pageSize === defaults.pageSize ? void 0 : String(value.pageSize);
+    next[keys.search] = value.search === "" ? void 0 : value.search;
+    const isDefaultSort = value.sort?.column === defaults.sort?.column && value.sort?.direction === defaults.sort?.direction;
+    if (!value.sort || isDefaultSort) {
+      next[keys.sort] = void 0;
+      next[keys.direction] = void 0;
+    } else {
+      next[keys.sort] = value.sort.column;
+      next[keys.direction] = value.sort.direction;
+    }
+    for (const key of filterKeys) {
+      next[`${prefix}${key}`] = isEqual(value.filters[key], defaults.filters[key]) ? void 0 : serializeFilterValue(value.filters[key]);
+    }
+    for (const key of Object.keys(next)) {
+      if (next[key] === void 0) delete next[key];
+    }
+    return next;
+  };
+  const serialized = computed(() => JSON.stringify(toRouteQuery(state.value)));
+  watch(serialized, () => {
+    const to = { query: toRouteQuery(state.value) };
+    void (options.history === "push" ? router.push(to) : router.replace(to));
+  });
+  watch(
+    () => route.query,
+    () => {
+      const next = fromRoute();
+      if (JSON.stringify(next) !== JSON.stringify(state.value)) {
+        state.value = next;
+      }
+    }
+  );
+  return computed({
+    get: () => state.value,
+    set: (value) => {
+      state.value = normalize(value);
+    }
+  });
+}
+function readNumber(value, fallback) {
+  const parsed = Number(Array.isArray(value) ? value[0] : value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function readString(value, fallback) {
+  const raw = Array.isArray(value) ? value[0] : value;
+  return typeof raw === "string" ? raw : fallback;
+}
+function readFilterValue(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (!value.startsWith(FILTER_JSON_PREFIX)) return value;
+  try {
+    return JSON.parse(value.slice(FILTER_JSON_PREFIX.length));
+  } catch {
+    return value;
+  }
+}
+function serializeFilterValue(value) {
+  if (value === void 0 || value === null || value === "") return void 0;
+  if (typeof value === "boolean" || typeof value === "bigint" || typeof value === "number" || typeof value === "string") {
+    return String(value);
+  }
+  try {
+    const serialized = JSON.stringify(value);
+    return serialized === void 0 ? void 0 : `${FILTER_JSON_PREFIX}${serialized}`;
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/app/composables/useTheme.d.ts

@@ -0,0 +1,31 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { VunoSlots } from '#vuno/types/base';
+import type { VunoResolvedSlots, VunoVariantsOf } from '#vuno/types/slots';
+import type { VunoIcons, VunoMessages, VunoThemeKey } from '#vuno/types/theme';
+/**
+ * Resuelve las clases de un componente del módulo.
+ *
+ * Devuelve cadenas, no `VunoSlots`: ese tipo describe lo que se puede
+ * *escribir* —el tema, el `app.config` y la prop `ui` admiten un array de
+ * clases por comodidad—, y `mergeSlots` lo funde a una sola cadena antes de
+ * devolverlo. Un slot ausente sigue siendo `undefined`. Anunciar aquí el tipo
+ * de entrada obligaba a cada componente que pasa un slot a una prop de cadena
+ * —`enterActiveClass` y compañía de `TransitionGroup`— a afirmar un `string`
+ * que el compilador no podía comprobar.
+ *
+ * @param key Clave del tema (`fieldInput`, `form`, ...).
+ * @param ui Override de la instancia, normalmente `props.ui`.
+ */
+export declare function useTheme<TKey extends VunoThemeKey>(key: TKey, ui?: MaybeRefOrGetter<undefined | VunoSlots>, variants?: MaybeRefOrGetter<undefined | VunoVariantsOf<TKey>>): ComputedRef<VunoResolvedSlots<TKey>>;
+export declare function useIcons(): ComputedRef<VunoIcons>;
+/**
+ * El idioma con el que se formatea lo que lleva formato: fechas, números y
+ * monedas. Sale de `app.config`, como los textos y los iconos.
+ *
+ * El respaldo es el castellano y no el del navegador, por la misma razón que
+ * lo son los mensajes por defecto: el módulo trae unos y el proyecto los
+ * cambia en un sitio. Y además un idioma adivinado del navegador rompería el
+ * render en servidor, que no tiene ninguno.
+ */
+export declare function useLocale(): ComputedRef<string>;
+export declare function useMessages(): ComputedRef<VunoMessages>;