@groupteknology/vuno 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupteknology/vuno",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Formularios, tablas y diálogos declarativos para Nuxt 4, con componentes propios y tokens sobreescribibles.",
   "keywords": [
     "nuxt",
@@ -58,28 +58,28 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@iconify-json/lucide": "^1.2.134",
+    "@iconify-json/lucide": "^1.2.136",
     "@nuxt/icon": "^2.5.1",
     "@nuxt/kit": "^4.5.2",
+    "@nuxtjs/color-mode": "^4.0.1",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/vue-query": "^5.102.8",
-    "clsx": "^2.1.1",
+    "@tanstack/vue-query": "^5.104.0",
     "gsap": "^3.15.0",
-    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^3.3.1",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.5.2",
     "@nuxt/test-utils": "^4.3.2",
-    "@types/node": "^26.6.2",
+    "@types/node": "^26.6.3",
     "@vitejs/plugin-vue": "^6.0.9",
-    "@vitest/coverage-v8": "^5.0.1",
-    "@vue/test-utils": "^2.5.0",
+    "@vitest/coverage-v8": "^5.0.2",
+    "@vue/test-utils": "^2.5.1",
     "happy-dom": "^20.14.5",
     "nuxt": "^4.5.2",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.1",
+    "vitest": "^5.0.2",
     "vue": "^3.5.43",
     "vue-tsc": "^3.3.11"
   },

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

@@ -1,40 +0,0 @@
-import type { VunoHeadingLevel } from '#vuno/types/base';
-import type { VunoBreadcrumbItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    breadcrumb?: VunoBreadcrumbItem[];
-    description?: string;
-    /**
-     * El nivel del título. `1` por defecto, que es lo correcto cuando
-     * esto **es** la pantalla.
-     *
-     * Se baja cuando no lo es: un `VPage` dentro de otra página deja dos
-     * `h1` y un salto en lo que venga debajo, y eso no se ve —se oye, y
-     * solo con un lector de pantalla—. El aspecto no cambia: el tamaño y
-     * el peso los pone `ui.title`, no la etiqueta.
-     */
-    level?: VunoHeadingLevel;
-    title: string;
-    ui?: VunoUi<'page'>;
-};
-type __VLS_Slots = {
-    /** Acciones de la pantalla, a la derecha de la barra superior. */
-    actions?: () => unknown;
-    default?: () => unknown;
-    /** Lo que va antes de la miga de pan: un botón de plegado, por ejemplo. */
-    leading?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    description: string;
-    breadcrumb: VunoBreadcrumbItem[];
-    ui: VunoUi<"page">;
-    level: VunoHeadingLevel;
-}, {}, {}, {}, 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/Page/Page.theme.d.ts

@@ -1,32 +0,0 @@
-export declare const pageTheme: Record<"page", {
-    /**
-     * La barra y el panel los pinta el módulo: los componentes de la gama Pro
-     * que había antes solo aportaban dos huecos, y encima había que anularles
-     * el relleno porque el ritmo lo pone `body`.
-     */
-    readonly slots: {
-        readonly body: "flex w-full flex-col gap-7 px-4 py-6 sm:px-6 sm:py-8 lg:p-10";
-        readonly breadcrumb: "hidden min-w-0 sm:block";
-        readonly breadcrumbCurrent: "truncate text-sm font-semibold text-vuno-strong";
-        readonly breadcrumbItem: "flex min-w-0 items-center gap-1.5";
-        readonly breadcrumbLink: "truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
-        readonly breadcrumbList: "flex items-center gap-1.5";
-        readonly breadcrumbSeparator: "size-4 shrink-0 text-vuno-subtle";
-        readonly description: "max-w-prose text-sm text-vuno-muted";
-        readonly heading: "flex flex-col gap-2";
-        readonly navbar: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-vuno-border bg-vuno-surface/90 px-4 backdrop-blur-xl sm:px-6";
-        readonly navbarLeft: "flex min-w-0 items-center gap-1";
-        readonly navbarRight: "flex shrink-0 items-center gap-2";
-        readonly panel: "min-h-0 flex-1 overflow-y-auto";
-        readonly root: "flex min-h-0 w-full flex-1 flex-col";
-        readonly title: "text-2xl font-bold tracking-tight text-vuno-strong sm:text-3xl";
-    };
-    readonly variants: {
-        readonly mobileNavbar: {
-            readonly false: {
-                readonly navbar: "hidden sm:flex";
-            };
-            readonly true: {};
-        };
-    };
-}>;

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

@@ -1,31 +0,0 @@
-import { defineTheme } from "#vuno/utils/theme";
-export const pageTheme = defineTheme("page", {
-  /**
-   * La barra y el panel los pinta el módulo: los componentes de la gama Pro
-   * que había antes solo aportaban dos huecos, y encima había que anularles
-   * el relleno porque el ritmo lo pone `body`.
-   */
-  slots: {
-    body: "flex w-full flex-col gap-7 px-4 py-6 sm:px-6 sm:py-8 lg:p-10",
-    breadcrumb: "hidden min-w-0 sm:block",
-    breadcrumbCurrent: "truncate text-sm font-semibold text-vuno-strong",
-    breadcrumbItem: "flex min-w-0 items-center gap-1.5",
-    breadcrumbLink: "truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)",
-    breadcrumbList: "flex items-center gap-1.5",
-    breadcrumbSeparator: "size-4 shrink-0 text-vuno-subtle",
-    description: "max-w-prose text-sm text-vuno-muted",
-    heading: "flex flex-col gap-2",
-    navbar: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-vuno-border bg-vuno-surface/90 px-4 backdrop-blur-xl sm:px-6",
-    navbarLeft: "flex min-w-0 items-center gap-1",
-    navbarRight: "flex shrink-0 items-center gap-2",
-    panel: "min-h-0 flex-1 overflow-y-auto",
-    root: "flex min-h-0 w-full flex-1 flex-col",
-    title: "text-2xl font-bold tracking-tight text-vuno-strong sm:text-3xl"
-  },
-  variants: {
-    mobileNavbar: {
-      false: { navbar: "hidden sm:flex" },
-      true: {}
-    }
-  }
-});

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

@@ -1,132 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import { filled } from "#vuno/internal/slots";
-import Icon from "#vuno/components/Icon/Icon.vue";
-defineOptions({ name: "VunoPage" });
-const props = defineProps({
-  breadcrumb: { type: Array, required: false, default: void 0 },
-  description: { type: String, required: false, default: void 0 },
-  level: { type: Number, required: false, default: 1 },
-  title: { type: String, required: true },
-  ui: { type: Object, required: false, default: void 0 }
-});
-const slots = defineSlots();
-const icons = useIcons();
-const messages = useMessages();
-const hasMobileNavbar = computed(() => filled(slots.actions) || filled(slots.leading));
-const ui = useTheme(
-  "page",
-  () => props.ui,
-  () => ({ mobileNavbar: String(hasMobileNavbar.value) })
-);
-</script>
-
-<template>
-    <!--
-        El panel y la barra son dos `div` y no los de la gama Pro de Nuxt UI.
-        De aquellos solo se usaban cuatro huecos, y encima había que anularle el
-        relleno al panel porque el ritmo lo pone el cuerpo: lo que traían de
-        verdad —redimensionar, plegar, recordar el tamaño— no se usaba.
-
-        Se gana además quitarse una dependencia que no se veía: el panel de
-        Nuxt UI está pensado para vivir dentro de su grupo, así que `VPage`
-        solo se comportaba bien si el proyecto montaba ese armazón. Ahora
-        funciona en cualquier sitio.
-    -->
-    <div :class="ui.root">
-        <div :class="ui.navbar">
-            <!--
-                La miga ocupa la zona izquierda entera y no un hueco de título:
-                el título de una barra vive dentro de un `<h1>`, y una miga ahí
-                sería un `<nav>` dentro de un encabezado.
-            -->
-            <div :class="ui.navbarLeft">
-                <slot name="leading" />
-
-                <nav
-                    v-if="props.breadcrumb?.length"
-                    :aria-label="messages.breadcrumb"
-                    :class="ui.breadcrumb"
-                >
-                    <ol :class="ui.breadcrumbList">
-                        <li
-                            v-for="(item, index) in props.breadcrumb"
-                            :key="`${item.label ?? item.to ?? index}`"
-                            :class="ui.breadcrumbItem"
-                        >
-                            <!--
-                                El separador va dentro del elemento al que
-                                precede y no como elemento propio: no es un
-                                sitio al que ir, y como `<li>` suelto haría que
-                                un lector anunciara el doble de elementos de los
-                                que hay. Decorativo, así que no se lee.
-                            -->
-                            <Icon
-                                v-if="index > 0"
-                                aria-hidden="true"
-                                :class="ui.breadcrumbSeparator"
-                                :name="icons.breadcrumbSeparator"
-                            />
-
-                            <!--
-                                El último no enlaza a donde ya estás, y lo dice:
-                                `aria-current` es lo que distingue el sitio en el
-                                que uno está de los que lo llevaron hasta aquí.
-                            -->
-                            <span
-                                v-if="index === props.breadcrumb.length - 1"
-                                aria-current="page"
-                                :class="ui.breadcrumbCurrent"
-                            >
-                                {{ item.label }}
-                            </span>
-
-                            <NuxtLink
-                                v-else-if="item.to"
-                                :class="ui.breadcrumbLink"
-                                :to="item.to"
-                            >
-                                {{ item.label }}
-                            </NuxtLink>
-
-                            <span
-                                v-else
-                                :class="ui.breadcrumbLink"
-                            >
-                                {{ item.label }}
-                            </span>
-                        </li>
-                    </ol>
-                </nav>
-            </div>
-
-            <div :class="ui.navbarRight">
-                <slot name="actions" />
-            </div>
-        </div>
-
-        <div :class="ui.panel">
-            <div :class="ui.body">
-                <!-- Un `<div>` y no un `<header>`: un `<header>` suelto es un
-                     landmark `banner`, y solo puede haber uno por página. -->
-                <div :class="ui.heading">
-                    <component
-                        :is="`h${props.level}`"
-                        :class="ui.title"
-                        >{{ props.title }}</component
-                    >
-
-                    <p
-                        v-if="props.description"
-                        :class="ui.description"
-                    >
-                        {{ props.description }}
-                    </p>
-                </div>
-
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>

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

@@ -1,40 +0,0 @@
-import type { VunoHeadingLevel } from '#vuno/types/base';
-import type { VunoBreadcrumbItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    breadcrumb?: VunoBreadcrumbItem[];
-    description?: string;
-    /**
-     * El nivel del título. `1` por defecto, que es lo correcto cuando
-     * esto **es** la pantalla.
-     *
-     * Se baja cuando no lo es: un `VPage` dentro de otra página deja dos
-     * `h1` y un salto en lo que venga debajo, y eso no se ve —se oye, y
-     * solo con un lector de pantalla—. El aspecto no cambia: el tamaño y
-     * el peso los pone `ui.title`, no la etiqueta.
-     */
-    level?: VunoHeadingLevel;
-    title: string;
-    ui?: VunoUi<'page'>;
-};
-type __VLS_Slots = {
-    /** Acciones de la pantalla, a la derecha de la barra superior. */
-    actions?: () => unknown;
-    default?: () => unknown;
-    /** Lo que va antes de la miga de pan: un botón de plegado, por ejemplo. */
-    leading?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    description: string;
-    breadcrumb: VunoBreadcrumbItem[];
-    ui: VunoUi<"page">;
-    level: VunoHeadingLevel;
-}, {}, {}, {}, 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/internal/keys.d.ts

@@ -1,43 +0,0 @@
-import type { InjectionKey } from 'vue';
-import type { VunoContext } from '#vuno/types/app';
-import type { VunoFormContext } from '#vuno/types/form';
-/**
- * Las claves de inyección del módulo.
- *
- * Viven aquí y no en `composables/` porque `addImportsDir` escanea **exports**:
- * una constante exportada desde ahí acaba en el espacio global de todo proyecto
- * que instale vuno, y `vunoContextInjectionKey` lo estaba. Nadie la escribe —el
- * módulo la usa por ruta— así que ser global no le aportaba nada y sí ocupaba un
- * nombre ajeno para siempre.
- *
- * Y no en `types/` porque son **valores**, no tipos: un `Symbol` en la carpeta de
- * los tipos es de esas cosas que confunden al siguiente que abra el árbol.
- */
-export declare const vunoContextInjectionKey: InjectionKey<VunoContext>;
-/** Si el modal pertenece a la pila global pero ya no es el que está arriba. */
-export declare const vunoOverlayBehindInjectionKey: InjectionKey<() => boolean>;
-export declare const vunoFormInjectionKey: InjectionKey<VunoFormContext>;
-/**
- * Las ramas abiertas de una navegación anidada.
- *
- * El componente se recursa, así que el estado tiene que vivir en la instancia de
- * fuera y heredarse: un `Set` por nivel dejaría cada uno abriéndose por su
- * cuenta. La de fuera se reconoce por no encontrar nada inyectado.
- */
-export declare const vunoNavigationListInjectionKey: InjectionKey<Set<string>>;
-/** Cierres diferidos compartidos por todos los paneles de un navbar. */
-export declare const vunoNavigationMenuCloseInjectionKey: InjectionKey<Set<ReturnType<typeof setTimeout>>>;
-/** Ramas abiertas compartidas por todos los niveles del menú flotante. */
-export declare const vunoNavigationMenuOpenInjectionKey: InjectionKey<Set<string>>;
-/** Ramas fijadas por clic: no se cierran al abandonar el disparador. */
-export declare const vunoNavigationMenuPinnedInjectionKey: InjectionKey<Set<string>>;
-/**
- * La dirección de lectura, que la provee `VApp`.
- *
- * Importa en un sitio muy concreto y nada evidente: **las flechas de una lista
- * de pestañas**. En árabe,
- * la flecha derecha va a la pestaña anterior, no a la siguiente, y quien no lee
- * en árabe no lo descubre probando. El CSS del módulo no la necesita porque usa
- * propiedades lógicas.
- */
-export declare const vunoDirectionInjectionKey: InjectionKey<() => 'ltr' | 'rtl'>;

package/dist/runtime/app/internal/keys.js

@@ -1,8 +0,0 @@
-export const vunoContextInjectionKey = Symbol("vuno-context");
-export const vunoOverlayBehindInjectionKey = Symbol("vuno-overlay-behind");
-export const vunoFormInjectionKey = Symbol("vuno-form");
-export const vunoNavigationListInjectionKey = Symbol("vuno-navigation-list");
-export const vunoNavigationMenuCloseInjectionKey = Symbol("vuno-navigation-menu-close");
-export const vunoNavigationMenuOpenInjectionKey = Symbol("vuno-navigation-menu-open");
-export const vunoNavigationMenuPinnedInjectionKey = Symbol("vuno-navigation-menu-pinned");
-export const vunoDirectionInjectionKey = Symbol("vuno-direction");

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

@@ -1,13 +0,0 @@
-import type { VunoColor } from './base.js';
-import type { VunoUi } from './slots.js';
-/** Propiedades del aviso persistente que se integra en el contenido. */
-export type VunoAlertProps = {
-    color?: VunoColor;
-    description?: string;
-    /** `null` oculta el icono semántico que Vuno elige por defecto. */
-    icon?: null | string;
-    /** `status` identifica un estado no urgente; `alert` se reserva para lo urgente. */
-    role?: 'alert' | 'status';
-    title: string;
-    ui?: VunoUi<'alert'>;
-};

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

@@ -1,35 +0,0 @@
-import type { VunoUi } from './slots.js';
-import type { VunoTableFailure } from './table.js';
-/** El estado vacío: lo que hay que decir cuando todavía no hay nada. */
-export type VunoStateEmptyProps = {
-    /** La pista de debajo del título. Sin ella, `messages.emptyHint`. */
-    hint?: string;
-    /** El icono. Sin él, `icons.empty`. */
-    icon?: string;
-    /** El título. Sin él, `messages.emptyTable`. */
-    title?: string;
-    /** `'empty'` o nada: es el que sale por defecto. */
-    tone?: 'empty';
-    ui?: VunoUi<'state'>;
-};
-/** El estado de fallo, que no existe sin el objeto que trae el reintento. */
-export type VunoStateFailureProps = {
-    /** El fallo con su reintento dentro: no hay forma de pintarlo sin salida. */
-    failure: VunoTableFailure;
-    tone: 'failure';
-    ui?: VunoUi<'state'>;
-};
-/**
- * Lo que se pinta donde debería haber contenido y no lo hay.
- *
- * **Es una unión discriminada y no un objeto con todo opcional**, y ahí está
- * metida una regla de producto que antes la sostenían dos componentes
- * separados: vacío y fallido no son lo mismo. Un fallo se pinta con su salida
- * dentro —`VunoTableFailure` lleva el `retry`—, así que `tone: 'failure'`
- * **exige** ese objeto y no hay manera de escribir un error sin reintento sin
- * que el typecheck lo diga en la plantilla.
- *
- * Con `tone` opcional en la otra mitad, `<VState />` a secas sigue siendo el
- * estado vacío, que es el caso que más se escribe.
- */
-export type VunoStateProps = VunoStateEmptyProps | VunoStateFailureProps;