@groupteknology/vuno 0.4.0 → 0.6.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Diego Otayza
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Diego Otayza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -68,6 +68,14 @@ const definition = {
 
 Cada uno declara sus propios props mediante una unión discriminada por `type`, así que el editor te avisa si a un `slug` le falta el `source` o si le pasas un `placeholder` a un `file`.
 
+### Campos obligatorios
+
+`required: true` hace tres cosas: pinta el asterisco en la etiqueta, pone el atributo `required` en el input —que es lo que anuncia el campo como obligatorio a un lector de pantalla y lo que permite estilar `:invalid`— y nada más. **Quien decide si el valor vale es el esquema.**
+
+El `<form>` lleva `novalidate`, así que el navegador no valida por su cuenta. Sin eso convivirían dos validaciones y ganaría la del navegador: cortaría el envío antes de que el esquema llegase a ejecutarse, y el usuario vería un globo del navegador, en su idioma y fuera del tema, en lugar del mensaje que tú escribiste.
+
+Conviene saberlo si vienes de Nuxt UI a secas: `UFormField` con `required` solo pinta el asterisco y no toca el input. Los campos de vuno sí lo propagan, a propósito y por accesibilidad, y por eso el `novalidate` es necesario y no una preferencia.
+
 ### Campos repetibles
 
 `type: 'array'` repite un grupo de campos y genera rutas anidadas (`variants.0.sku`) que coinciden con las que produce la validación, de modo que cada campo muestra su propio error. Admite anidamiento.
@@ -106,6 +114,87 @@ El slot `footer` recibe `formId`, necesario para enviar desde un botón propio:
 <VFormModal v-model:open="open" v-model:state="state" :definition="definition" :schema="schema" title="Nuevo producto" close-on-submit @submit="guardar" />
 ```
 
+### Un componente por formulario
+
+Un formulario largo no vive en la página. Se declara en su propio componente, que contiene **la definición, el esquema y los textos**, y nada más.
+
+Es la práctica recomendada y no es una cuestión de orden: el mismo formulario acaba abriéndose desde más de un sitio —la lista, la ficha, un atajo— y en el momento en que lleva dentro el guardado, ya no se puede reutilizar sin arrastrar consecuencias que no son suyas.
+
+La regla que lo resume: **el componente decide cómo es el formulario; quien lo usa decide qué pasa al enviarlo.**
+
+```vue
+<!-- app/components/Product/ProductForm.vue -->
+<script setup lang="ts">
+import type { VunoFormDefinition } from '@groupteknology/vuno'
+import * as z from 'zod'
+
+const props = defineProps<{
+  /** La fila en edición. Sin ella, el formulario es de alta. */
+  product?: null | Product
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{ submit: [] }>()
+
+const open = defineModel<boolean>('open', { default: false })
+const state = defineModel<ProductFormState>('state', { required: true })
+
+// Lo propio del formulario: su forma, sus reglas y sus textos.
+const schema = z.object({ sku: z.string().min(1, 'El SKU es requerido') })
+
+const title = computed(() => (props.product ? `Editar ${props.product.sku}` : 'Nuevo producto'))
+
+const definition = {
+  layout: 'tabs',
+  sections: [/* ... */],
+} satisfies VunoFormDefinition
+</script>
+
+<template>
+  <VFormModal
+    v-model:open="open"
+    v-model:state="state"
+    :definition="definition"
+    :loading="props.loading"
+    :schema="schema"
+    :title="title"
+    @submit="emit('submit')"
+  />
+</template>
+```
+
+Y la página queda sin saber nada de los campos:
+
+```vue
+<ProductForm
+  v-model:open="formOpen"
+  v-model:state="state"
+  :loading="isSaving"
+  :product="editing"
+  @submit="submit"
+/>
+```
+
+#### Qué expone
+
+| | |
+|---|---|
+| `v-model:state` | El estado del formulario. Obligatorio: lo posee quien lo usa, no el formulario. |
+| `v-model:open` | Solo si es modal. |
+| `:loading` | Si se está guardando, para bloquear el botón. |
+| La fila en edición | Un prop —`product`, `brand`, lo que sea— que vale `null` en el alta. De él salen el título y la etiqueta del botón. |
+| `@submit` | Significa «el usuario confirmó», nada más. Sin datos: ya están en `state`. |
+
+No es casualidad que encaje: son exactamente `state`, `formOpen`, `isSaving`, `editing` y `submit` de `useVunoCrud`.
+
+#### Qué se queda fuera
+
+La petición, la mutación, invalidar la caché, los avisos y cerrar el modal al terminar. Todo eso es consecuencia del envío, y la consecuencia cambia según desde dónde se abra el formulario.
+
+Si el componente hace el `$fetch` dentro, el síntoma llega pronto: en cuanto haga falta abrirlo desde otra pantalla con otro destino, hay que copiarlo o llenarlo de condicionales.
+
+El estado tampoco se queda dentro. Si el formulario declara su propio `ref` en vez de recibir `v-model:state`, quien lo usa no ve lo que el usuario escribió y el guardado envía el estado inicial: falla en silencio y lejos de la causa.
+
 ## Una pantalla de mantenimiento entera
 
 `useVunoCrud` resuelve el ciclo completo: listar, dar de alta o editar en un modal, borrar con confirmación, invalidar la caché y avisar. Está construido sobre [TanStack Query](https://tanstack.com/query).
@@ -241,6 +330,78 @@ const { data, status } = await useFetch('/api/products', {
 
 Con `url: true` los filtros, la página, la búsqueda y el orden viajan en la query string: el enlace es compartible y recargar conserva la vista.
 
+### Tipos de columna
+
+`text` · `number` · `currency` · `date` · `badge` · `boolean` · `image` · `actions` · `custom`
+
+Cada uno declara sus propios props en una unión discriminada por `type`, igual que los campos. `key` es la ruta del valor en la fila y admite anidado: `key: 'proveedor.nombre'`.
+
+```ts
+const definition = {
+  searchable: false,   // el endpoint no busca: no se pinta la barra
+  paginated: false,    // ni pagina: el pie dice cuántos hay y nada más
+  columns: [
+    { key: 'sku', label: 'SKU', type: 'text', sortable: true },
+    { key: 'price', label: 'Precio', type: 'currency', currency: 'EUR', align: 'end' },
+    { key: 'createdAt', label: 'Alta', type: 'date' },
+  ],
+} satisfies VunoTableDefinition<Product>
+```
+
+#### Traducir un valor a una etiqueta
+
+La columna `badge` tiene `map`, que convierte el valor crudo que llega del servidor en la etiqueta y el color que ve el usuario. Es lo que evita enseñar `user` o `published` en pantalla:
+
+```ts
+{
+  key: 'role',
+  label: 'Rol',
+  type: 'badge',
+  map: {
+    user:  { color: 'neutral', label: 'Usuario' },
+    admin: { color: 'primary', label: 'Administrador' },
+  },
+}
+```
+
+Un valor sin entrada en el `map` se pinta tal cual, con el `color` de la columna o `neutral`. Es deliberado: si el servidor empieza a mandar un estado nuevo, verás el valor crudo en pantalla en lugar de una celda vacía que esconde que hay algo sin contemplar.
+
+#### Calcular el valor desde la fila
+
+Cuando lo que se muestra no está en una sola clave, o hay que derivarlo, toda columna acepta `value`:
+
+```ts
+{ key: 'role',  label: 'Rol',    type: 'text', value: (row) => traducirRol(row.role) }
+{ key: 'total', label: 'Total',  type: 'currency', value: (row) => row.precio * row.unidades }
+{ key: 'autor', label: 'Autor',  type: 'text', value: (row) => `${row.nombre} ${row.apellido}` }
+```
+
+Recibe la fila entera y está tipada: con `VunoTableDefinition<Product>`, `row` es un `Product`.
+
+**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, así que se combina con todo lo demás: en una columna `currency` se formatea como moneda, en una `date` como fecha, y en un `badge` pasa por su `map`.
+
+```ts
+// Deriva el valor, y el `map` lo traduce después.
+{ key: 'estado', type: 'badge', value: (row) => (row.stock > 0 ? 'disponible' : 'agotado'), map: { agotado: { color: 'error', label: 'Agotado' }, disponible: { color: 'success', label: 'Disponible' } } }
+```
+
+`key` sigue haciendo falta: nombra la columna para el orden y para el slot `cell-<key>`.
+
+Y un aviso 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 —un nombre completo compuesto de dos campos, por ejemplo— el orden no coincidirá con lo que se ve. Para eso, ordena por la clave que de verdad manda o deja la columna sin `sortable`.
+
+`map` es solo de `badge`. Para traducir en otro tipo de columna, o para componer algo que no es una etiqueta, está `type: 'custom'` con su slot:
+
+```vue
+<VTable :definition="definition" :data="rows">
+  <template #cell-stock="{ row, value }">
+    <span class="tabular-nums">{{ value }} uds.</span>
+    <UBadge v-if="row.stock === 0" color="error" label="Agotado" />
+  </template>
+</VTable>
+```
+
+El slot se llama `cell-<key>` y recibe `value` —el valor de esa columna, ya resuelto por su `key`— y `row` entera, directa y sin envolver.
+
 ### Una tabla vacía no es una que falló
 
 Son dos estados distintos y se pintan distinto. Sin separarlos, una consulta que falla se normaliza a lista vacía (`data ?? []`) y la tabla dice «No hay resultados»: afirma que no hay nada cuando lo cierto es que no se pudo saber.
@@ -251,6 +412,10 @@ const failure = computed(() => isError.value
   : undefined)
 ```
 
+Con `useVunoCrud` no hace falta escribirlo: el objeto lo construye él, y el título y la pista se declaran en `messages` con `listFailed` y `listFailedHint`.
+
+Si vienes de componerlo a mano, cuenta con un efecto lateral: si tu proyecto tiene un test que sujeta esta invariante buscando el objeto en la pantalla, se pondrá **rojo** al mudar los textos, porque ahí ya no hay ningún `retry:` que encontrar. No es una regresión —la garantía sigue, solo que ahora la sostiene el tipo `VunoTableFailure`, cuyo `retry` es obligatorio y comprueba el typecheck— pero el test tiene que mirar otra cosa.
+
 El reintento va **dentro** del objeto para que no se pueda pintar un error sin ofrecer salida. Mientras hay fallo, la tabla no muestra filas ni paginación. El estado vacío se declara en la definición (`empty: { title, hint, icon }`) y tiene un slot `empty-actions` donde encaja el «crear el primero».
 
 Los dos estados existen además como componentes sueltos, para las pantallas que no son una tabla:
@@ -278,6 +443,39 @@ Tipos de columna: `text` · `number` · `currency` · `date` · `boolean` · `ba
 
 No se cierra solo cuando recibe `loading`: así se espera a que la acción termine contra la API y se cierra desde fuera.
 
+## Modales del proyecto
+
+Un modal por componente, en `components/modal/`, abierto por su clave:
+
+```
+app/components/modal/ModalProduct.vue   ->   open('product')
+app/components/modal/ModalInvoice.vue   ->   open('invoice')
+```
+
+```ts
+const modal = useVunoModal()
+
+const guardado = await modal.open<boolean>('product', { sku: row.sku })
+```
+
+No hay que registrarlo ni colocarlo en ninguna plantilla: el módulo marca esa carpeta como global, así que la clave **es** el nombre del componente y un modal que existe se puede abrir.
+
+El componente recibe `open` y los props que le pases, y resuelve la promesa emitiendo `close` con su resultado:
+
+```vue
+<script setup lang="ts">
+const emit = defineEmits<{ close: [guardado: boolean] }>()
+const open = defineModel<boolean>('open', { default: false })
+
+function guardar() {
+  open.value = false
+  emit('close', true)
+}
+</script>
+```
+
+Se pinta en `<VApp>` y no en la pantalla que lo abrió, así que navegar no lo desmonta a medias ni deja la promesa colgada. Cerrarlo con Escape o pulsando fuera resuelve sin valor.
+
 ## Composables
 
 | Composable | Para qué |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "vuno",
   "configKey": "vuno",
-  "version": "0.4.0",
+  "version": "0.6.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -20,6 +20,12 @@ const module$1 = defineNuxtModule({
       pathPrefix: false,
       prefix: options.prefix
     });
+    nuxt.hook("components:extend", (components) => {
+      for (const component of components) {
+        const path = component.filePath.split("\\").join("/");
+        if (path.includes("/components/modal/")) component.global = true;
+      }
+    });
     addImportsDir(resolver.resolve("./runtime/app/composables"));
     nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
   }

package/dist/runtime/app/assets/css/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";
+@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";:root{--vuno-modal-duration:180ms;--vuno-modal-ease:cubic-bezier(0.32,0.72,0,1);--vuno-backdrop:rgba(0,0,0,.5)}dialog{opacity:0;transform:scale(.97) translateY(.5rem);transition:opacity var(--vuno-modal-duration) var(--vuno-modal-ease),transform var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(.97) translateY(.5rem)}}dialog::backdrop{background-color:transparent;transition:background-color var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]::backdrop{background-color:var(--vuno-backdrop)}@starting-style{dialog[open]::backdrop{background-color:transparent}}dialog.vuno-overlay-behind::backdrop,dialog.vuno-overlay-behind[open]::backdrop{background-color:transparent}@media (prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition-duration:1ms}dialog{transform:none}}

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

@@ -0,0 +1,33 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * Monta un componente y espera a que emita `close`.
+ *
+ * Cerrar con Escape o pulsando fuera cuenta como cerrar sin resultado: un
+ * `update:open` en falso resuelve igual, porque si no la promesa se quedaría
+ * esperando para siempre a un diálogo que ya no está en pantalla.
+ */
+declare function open<TResult = unknown>(component: Component, props?: Record<string, unknown>): Promise<TResult | undefined>;
+declare function closeAll(): void;
+declare function dismiss(id: number): void;
+declare function notify(request: VunoNotifyRequest): number;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    alert: (request: VunoAlertRequest) => Promise<void>;
+    closeAll: typeof closeAll;
+    confirm: (request: VunoConfirmRequest) => Promise<boolean>;
+    dismiss: typeof dismiss;
+    notify: typeof notify;
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/App/App.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { onBeforeUnmount, provide, reactive, shallowReactive } from "vue";
+import Confirm from "#vuno/components/Confirm/Confirm.vue";
+import { vunoContextInjectionKey } from "#vuno/composables/useVunoContext";
+import AppOverlay from "./AppOverlay.vue";
+import AppToaster from "./AppToaster.vue";
+const overlays = reactive([]);
+const notifications = shallowReactive([]);
+let nextId = 0;
+const EXIT_MS = 220;
+function removeOverlay(id) {
+  const index = overlays.findIndex((entry) => entry.id === id);
+  if (index !== -1) overlays.splice(index, 1);
+}
+function dismissOverlay(id) {
+  const entry = overlays.find((item) => item.id === id);
+  if (entry) entry.open = false;
+  setTimeout(() => removeOverlay(id), EXIT_MS);
+}
+function open(component, props = {}) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    let settled = false;
+    const settle = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      dismissOverlay(id);
+    };
+    overlays.push({
+      id,
+      component,
+      listeners: {
+        close: (value) => settle(value),
+        /**
+         * Se aplaza una microtarea porque lo normal dentro del modal
+         * es cerrar y luego emitir el resultado:
+         *
+         * ```ts
+         * open.value = false
+         * emit('close', true)
+         * ```
+         *
+         * Resolver aquí en el acto se quedaría con el primero de los
+         * dos y devolvería `undefined` habiendo un resultado. Con el
+         * aplazamiento, un `close` síncrono llega antes y gana; si no
+         * llega ninguno —Escape, pulsar fuera—, resuelve sin valor.
+         */
+        "update:open": (value) => {
+          if (!value) queueMicrotask(() => settle(void 0));
+        }
+      },
+      open: true,
+      props: { ...props }
+    });
+  });
+}
+function askConfirm(request, dismissed) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    let settled = false;
+    const settle = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      dismissOverlay(id);
+    };
+    overlays.push({
+      id,
+      component: Confirm,
+      listeners: {
+        cancel: () => settle(false),
+        confirm: () => settle(true),
+        // Escape o pulsar fuera: en una confirmación es que no, y en
+        // una alerta es que ya se enteró.
+        "update:open": (value) => {
+          if (!value) settle(dismissed);
+        }
+      },
+      open: true,
+      props: { ...request }
+    });
+  });
+}
+const confirm = (request) => askConfirm(request, false);
+const alert = async (request) => {
+  await askConfirm({ ...request, alert: true }, true);
+};
+function closeAll() {
+  for (const entry of [...overlays]) (entry.listeners.cancel ?? entry.listeners.close)?.();
+}
+const timers = /* @__PURE__ */ new Map();
+function dismiss(id) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  const index = notifications.findIndex((entry) => entry.id === id);
+  if (index !== -1) notifications.splice(index, 1);
+}
+function notify(request) {
+  const id = nextId++;
+  const duration = request.duration ?? 5e3;
+  notifications.push({ ...request, id, color: request.color ?? "neutral", duration });
+  if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration));
+  return id;
+}
+onBeforeUnmount(() => {
+  for (const timer of timers.values()) clearTimeout(timer);
+  timers.clear();
+});
+const context = { alert, closeAll, confirm, dismiss, notifications, notify, open, overlays };
+provide(vunoContextInjectionKey, context);
+defineExpose({ alert, closeAll, confirm, dismiss, notify, open });
+</script>
+
+<template>
+    <slot />
+
+    <AppOverlay :overlays="overlays" />
+
+    <AppToaster
+        :notifications="notifications"
+        @dismiss="dismiss"
+    />
+</template>

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

@@ -0,0 +1,33 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * Monta un componente y espera a que emita `close`.
+ *
+ * Cerrar con Escape o pulsando fuera cuenta como cerrar sin resultado: un
+ * `update:open` en falso resuelve igual, porque si no la promesa se quedaría
+ * esperando para siempre a un diálogo que ya no está en pantalla.
+ */
+declare function open<TResult = unknown>(component: Component, props?: Record<string, unknown>): Promise<TResult | undefined>;
+declare function closeAll(): void;
+declare function dismiss(id: number): void;
+declare function notify(request: VunoNotifyRequest): number;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    alert: (request: VunoAlertRequest) => Promise<void>;
+    closeAll: typeof closeAll;
+    confirm: (request: VunoConfirmRequest) => Promise<boolean>;
+    dismiss: typeof dismiss;
+    notify: typeof notify;
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/App/AppContext.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppContext.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>
+        <!--  -->
+    </div>
+</template>

package/dist/runtime/app/components/App/AppContext.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppModal.d.vue.ts

@@ -0,0 +1,38 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = {
+    description?: string;
+    /** Cerrar con Escape o pulsando el fondo. */
+    dismissible?: boolean;
+    title?: string;
+    ui?: VunoFieldSlots;
+};
+type __VLS_Slots = {
+    body?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
+    header?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    ui: VunoFieldSlots;
+    dismissible: boolean;
+}, {}, {}, {}, 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/App/AppModal.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { onBeforeUnmount, useTemplateRef, watch } from "vue";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  dismissible: { type: Boolean, required: false, default: true },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+defineSlots();
+const ui = useVunoTheme("appModal", () => props.ui);
+const dialog = useTemplateRef("dialog");
+function lockScroll(locked) {
+  if (typeof document === "undefined") return;
+  document.body.style.overflow = locked ? "hidden" : "";
+}
+watch(
+  [open, dialog],
+  ([value, element]) => {
+    if (!element) return;
+    if (value && !element.open) {
+      element.showModal();
+      lockScroll(true);
+      return;
+    }
+    if (!value && element.open) {
+      element.close();
+      lockScroll(false);
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => lockScroll(false));
+function requestClose() {
+  open.value = false;
+  lockScroll(false);
+  emit("close");
+}
+function onCancel(event) {
+  event.preventDefault();
+  if (props.dismissible) requestClose();
+}
+function onClick(event) {
+  if (!props.dismissible) return;
+  const element = dialog.value;
+  if (!element || event.target !== element) return;
+  const box = element.getBoundingClientRect();
+  const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+  if (!inside) requestClose();
+}
+</script>
+
+<template>
+    <dialog
+        ref="dialog"
+        :aria-describedby="props.description ? 'vuno-modal-description' : void 0"
+        :aria-labelledby="props.title ? 'vuno-modal-title' : void 0"
+        :class="ui.root"
+        @cancel="onCancel"
+        @click="onClick"
+        @close="open = false"
+    >
+        <div :class="ui.content">
+            <slot name="header">
+                <div
+                    v-if="props.title || props.description"
+                    :class="ui.header"
+                >
+                    <h2
+                        v-if="props.title"
+                        id="vuno-modal-title"
+                        :class="ui.title"
+                    >
+                        {{ props.title }}
+                    </h2>
+
+                    <p
+                        v-if="props.description"
+                        id="vuno-modal-description"
+                        :class="ui.description"
+                    >
+                        {{ props.description }}
+                    </p>
+                </div>
+            </slot>
+
+            <div :class="ui.body">
+                <slot name="body">
+                    <slot />
+                </slot>
+            </div>
+
+            <div
+                v-if="$slots.footer"
+                :class="ui.footer"
+            >
+                <slot name="footer" />
+            </div>
+        </div>
+    </dialog>
+</template>