@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,95 @@
+<script setup>
+import { computed, useId, useTemplateRef } from "vue";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Form from "#vuno/components/Form/Form.vue";
+import Modal from "#vuno/components/Modal/Modal.vue";
+defineOptions({ name: "VunoFormModal" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const state = defineModel("state", { type: null, ...{ required: true } });
+const props = defineProps({
+  closeOnSubmit: { type: Boolean, required: false, default: false },
+  definition: { type: Object, required: true },
+  description: { type: String, required: false, default: void 0 },
+  formUi: { type: Object, required: false, default: void 0 },
+  loading: { type: Boolean, required: false, default: false },
+  schema: { type: null, required: false, default: void 0 },
+  size: { type: String, required: false, default: "3xl" },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["close", "submit"]);
+defineSlots();
+const messages = useMessages();
+const ui = useTheme("formModal", () => props.ui);
+const modalUi = computed(() => ({ body: ui.value.body, content: ui.value.content, footer: ui.value.footer, root: ui.value.root }));
+const formId = useId();
+const form = useTemplateRef("form");
+function close() {
+  if (props.loading) return;
+  open.value = false;
+  emit("close");
+}
+function onSubmit(validated) {
+  emit("submit", validated);
+  if (props.closeOnSubmit) open.value = false;
+}
+</script>
+
+<template>
+    <!--
+        Sobre `Modal`: un `<dialog>` nativo, no el de Nuxt UI. El navegador lo
+        pone en su capa superior, que atrapa el foco, lo devuelve al cerrar y
+        apila los diálogos por orden de apertura.
+
+        Importa que sean todos del mismo sistema: la capa superior queda por
+        encima de cualquier z-index, así que un formulario posicionado con
+        z-index abierto sobre un diálogo nativo se pintaría detrás de él, en el
+        DOM y sin verse.
+    -->
+    <Modal
+        v-model:open="open"
+        :description="props.description"
+        :dismissible="!props.loading"
+        :size="props.size"
+        :title="props.title"
+        :ui="modalUi"
+    >
+        <slot name="trigger" />
+
+        <Form
+            :id="formId"
+            ref="form"
+            v-model:state="state"
+            :definition="props.definition"
+            :schema="props.schema"
+            :ui="props.formUi"
+            @submit="onSubmit"
+        />
+
+        <template #footer>
+            <slot
+                :close="close"
+                :dirty="form?.dirty ?? false"
+                :formId="formId"
+                :loading="props.loading ?? false"
+                name="footer"
+                :reset="() => form?.reset?.()"
+            >
+                <Button
+                    color="neutral"
+                    :disabled="props.loading"
+                    :label="messages.cancel"
+                    variant="ghost"
+                    @click="close"
+                />
+                <Button
+                    :form="formId"
+                    :label="messages.save"
+                    :loading="props.loading"
+                    type="submit"
+                />
+            </slot>
+        </template>
+    </Modal>
+</template>

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

@@ -0,0 +1,63 @@
+import type { VunoModalSize } from '#vuno/types/base';
+import type { VunoFormDefinition, VunoFormState, VunoSchema } from '#vuno/types/form';
+import type { VunoUi } from '#vuno/types/slots';
+declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        /**
+         * Cierra el modal nada más enviar. Déjalo apagado si guardas contra una
+         * API: querrás cerrar tú al confirmar, y mientras tanto usar `loading`.
+         */
+        closeOnSubmit?: boolean;
+        definition: VunoFormDefinition;
+        description?: string;
+        /** Slots del formulario que va dentro. */
+        formUi?: VunoUi<"form">;
+        /** Marca el botón de guardar como ocupado y bloquea el cierre. */
+        loading?: boolean;
+        /** Opcional, igual que en `VForm`: cualquier esquema Standard Schema. */
+        schema?: VunoSchema;
+        /** Ancho del diálogo; el formulario usa `3xl` de forma predeterminada. */
+        size?: VunoModalSize;
+        title?: string;
+        /** Slots del modal (`content`, `body`, ...). */
+        ui?: VunoUi<"formModal">;
+    } & {
+        open?: boolean;
+        state: TState;
+    }) & {
+        onClose?: (() => any) | undefined;
+        onSubmit?: ((state: TState) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:state"?: ((value: TState) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /**
+         * `formId` es imprescindible, no un extra: el pie del modal vive fuera
+         * del `<form>`, así que un botón propio solo puede enviarlo con
+         * `:form="formId"`. Sin exponerlo, cualquier pie a medida queda mudo.
+         */
+        footer?: (props: {
+            dirty: boolean;
+            formId: string;
+            loading: boolean;
+            close: () => void;
+            reset: () => void;
+        }) => unknown;
+        /** Elemento que abre el modal, si prefieres eso a controlar `open`. */
+        trigger?: () => unknown;
+    };
+    emit: (((evt: "close") => void) & ((evt: "submit", state: TState) => void)) & (((event: "update:open", value: boolean) => void) & ((event: "update:state", value: TState) => void));
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,15 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoFormSection } from '#vuno/types/form';
+type Props = {
+    /**
+     * Sin marco ni título: es lo que se usa dentro de una pestaña, donde
+     * el rótulo ya lo pone la propia pestaña.
+     */
+    plain?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    section: VunoFormSection;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormSection/FormSection.theme.d.ts

@@ -0,0 +1,12 @@
+export declare const formSectionTheme: Record<"formSection", {
+    readonly slots: {
+        readonly description: "mt-1 text-vuno-muted";
+        readonly header: "col-span-12 flex min-w-0 flex-col";
+        readonly plain: "grid w-full grid-cols-12 gap-x-4 gap-y-5";
+        readonly root: "grid w-full grid-cols-12 gap-x-4 gap-y-5 rounded-sm border border-vuno-border p-4";
+        readonly title: "font-semibold text-vuno-strong";
+    };
+    readonly variants: {
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+    };
+}>;

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

@@ -0,0 +1,14 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const formSectionTheme = defineTheme("formSection", {
+  slots: {
+    description: "mt-1 text-vuno-muted",
+    header: "col-span-12 flex min-w-0 flex-col",
+    plain: "grid w-full grid-cols-12 gap-x-4 gap-y-5",
+    root: "grid w-full grid-cols-12 gap-x-4 gap-y-5 rounded-sm border border-vuno-border p-4",
+    title: "font-semibold text-vuno-strong"
+  },
+  variants: {
+    radius: radiusByStep("root")
+  }
+});

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

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import FormFieldRenderer from "#vuno/components/Form/internal/FormFieldRenderer/FormFieldRenderer.vue";
+import { getColumnSpanClass } from "#vuno/components/Form/internal/grid";
+defineOptions({ name: "VunoFormSection" });
+const props = defineProps({
+  plain: { type: Boolean, required: false },
+  radius: { type: String, required: false },
+  section: { type: Object, required: true }
+});
+const ui = useTheme("formSection", void 0, () => ({ radius: props.radius }));
+const root = computed(() => props.plain ? ui.value.plain : ui.value.root);
+const showHeader = computed(() => props.plain ? Boolean(props.section.description) : Boolean(props.section.title || props.section.description));
+</script>
+
+<template>
+    <div :class="root">
+        <div
+            v-if="showHeader"
+            :class="ui.header"
+        >
+            <p
+                v-if="props.section.title && !props.plain"
+                :class="ui.title"
+            >
+                {{ props.section.title }}
+            </p>
+            <p
+                v-if="props.section.description"
+                :class="ui.description"
+            >
+                {{ props.section.description }}
+            </p>
+        </div>
+
+        <div
+            v-for="(field, index) in props.section.fields"
+            :key="`${field.name}-${index}`"
+            :class="getColumnSpanClass(field.columns)"
+        >
+            <FormFieldRenderer :field="field" />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoFormSection } from '#vuno/types/form';
+type Props = {
+    /**
+     * Sin marco ni título: es lo que se usa dentro de una pestaña, donde
+     * el rótulo ya lo pone la propia pestaña.
+     */
+    plain?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    section: VunoFormSection;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,32 @@
+<script setup>
+import { resolveDynamicComponent } from "vue";
+defineOptions({
+  /**
+   * El nombre sigue siendo explícito: identifica el wrapper en Vue y en
+   * las herramientas aunque el nombre público dependa del prefijo.
+   */
+  name: "VunoIcon"
+});
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const renderer = resolveDynamicComponent("VunoIconRenderer");
+const iconComponent = typeof renderer === "string" ? resolveDynamicComponent("Icon") : renderer;
+const unavailable = typeof iconComponent === "string";
+const is = unavailable ? "span" : iconComponent;
+</script>
+
+<template>
+    <!--
+        Decorativo por defecto: un nombre Iconify describe el dibujo, no la
+        información que comunica. Quien lo use solo tiene que aportar esa
+        información como texto accesible; si necesita semántica en el propio
+        icono, los atributos de la instancia ganan al llegar aquí.
+    -->
+    <component
+        :is="is"
+        aria-hidden="true"
+        :class="{ 'inline-block': unavailable }"
+        :name="unavailable ? void 0 : props.name"
+    />
+</template>

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

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

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

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
+/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
+type VunoMenuItem = {
+    onSelect: () => void;
+    color?: VunoColor;
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    /** Dibuja una línea encima, para separar lo destructivo del resto. */
+    separator?: boolean;
+};
+type Props = {
+    items: VunoMenuItem[];
+    /** Ubicación preferida; cambia automáticamente si no cabe. */
+    placement?: VunoPlacement;
+    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+};
+type __VLS_Slots = {
+    /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    placement: VunoPlacement;
+    portal: VunoPortalTarget;
+}, {}, {}, {}, 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/Menu/Menu.theme.d.ts

@@ -0,0 +1,17 @@
+export declare const menuTheme: Record<"menu", {
+    /**
+     * El color del texto pasa por la variable de acento aunque por defecto sea
+     * el del cuerpo. Escrito como `text-vuno-body`, la variante de color
+     * asignaba `--vuno-accent` y **nadie la consumía**: una acción destructiva
+     * se veía igual que las demás, sin que nada fallara.
+     */
+    readonly slots: {
+        readonly content: "z-50 min-w-40 rounded-sm border border-vuno-border bg-vuno-surface-1 p-1 shadow-lg";
+        readonly icon: "size-4 shrink-0";
+        readonly item: "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-(--vuno-accent) outline-none [--vuno-accent:var(--color-vuno-body)] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-(--vuno-accent)/10";
+        readonly separator: "-mx-1 my-1 h-px bg-vuno-border";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"item", string>>;
+    };
+}>;

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

@@ -0,0 +1,20 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const menuTheme = defineTheme("menu", {
+  /**
+   * El color del texto pasa por la variable de acento aunque por defecto sea
+   * el del cuerpo. Escrito como `text-vuno-body`, la variante de color
+   * asignaba `--vuno-accent` y **nadie la consumía**: una acción destructiva
+   * se veía igual que las demás, sin que nada fallara.
+   */
+  slots: {
+    content: "z-50 min-w-40 rounded-sm border border-vuno-border bg-vuno-surface-1 p-1 shadow-lg",
+    /* El tamaño del icono es del tema, como en las pestañas y el botón. */
+    icon: "size-4 shrink-0",
+    item: "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-(--vuno-accent) outline-none [--vuno-accent:var(--color-vuno-body)] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-(--vuno-accent)/10",
+    separator: "-mx-1 my-1 h-px bg-vuno-border"
+  },
+  variants: {
+    color: accentByColor("item")
+  }
+});

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

@@ -0,0 +1,182 @@
+<script setup>
+import { cloneVNode, computed, nextTick, onBeforeUnmount, ref, useId } from "vue";
+import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
+import { useTheme } from "#vuno/composables/useTheme";
+import { firstElement } from "#vuno/internal/slots";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoMenu" });
+const props = defineProps({
+  items: { type: Array, required: true },
+  placement: { type: String, required: false, default: "bottom-end" },
+  portal: { type: [String, Boolean], required: false, default: void 0 }
+});
+const slots = defineSlots();
+const portalTarget = useVunoPortal(() => props.portal);
+const ui = useTheme("menu");
+const colors = ["error", "info", "neutral", "primary", "secondary", "success", "warning"];
+const themeByColor = colors.map((color) => [color, useTheme("menu", void 0, () => ({ color }))]);
+const itemByColor = computed(() => Object.fromEntries(themeByColor.map(([color, theme]) => [color, theme.value.item])));
+const menuId = useId();
+const active = ref(-1);
+const contentEl = ref(null);
+const itemEls = ref([]);
+const open = ref(false);
+const triggerEl = ref(null);
+const enabled = computed(
+  () => props.items.map((item, index) => ({ index, usable: !item.disabled })).filter((entry) => entry.usable).map((entry) => entry.index)
+);
+const captureItem = (index, el) => {
+  itemEls.value[index] = el ?? null;
+};
+const { anchor, release } = useVunoAnchor({ placement: () => props.placement });
+const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
+const unfollow = () => release();
+async function focusItem(index) {
+  active.value = index;
+  await nextTick();
+  itemEls.value[index]?.focus();
+}
+async function show(from) {
+  open.value = true;
+  await nextTick();
+  follow();
+  if (from === "none") return contentEl.value?.focus();
+  const order = from === "first" ? enabled.value : [...enabled.value].reverse();
+  if (order.length > 0) await focusItem(order[0]);
+}
+function hide(returnFocus = true) {
+  if (!open.value) return;
+  open.value = false;
+  active.value = -1;
+  unfollow();
+  if (returnFocus) triggerEl.value?.focus();
+}
+function choose(item) {
+  if (item.disabled) return;
+  item.onSelect();
+  hide();
+}
+function step(delta) {
+  const order = enabled.value;
+  if (order.length === 0) return;
+  const current = order.indexOf(active.value);
+  const entry = delta > 0 ? 0 : order.length - 1;
+  const next = current === -1 ? entry : (current + delta + order.length) % order.length;
+  void focusItem(order[next]);
+}
+function onTriggerKeydown(event) {
+  if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    return void show("first");
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    return void show("last");
+  }
+}
+function onContentKeydown(event) {
+  const keys = {
+    ArrowDown: () => step(1),
+    ArrowUp: () => step(-1),
+    End: () => void focusItem(enabled.value.at(-1) ?? -1),
+    Escape: () => hide(),
+    Home: () => void focusItem(enabled.value[0] ?? -1),
+    /* Tabular fuera cierra: dejarlo abierto deja un menú huérfano. */
+    Tab: () => hide(false)
+  };
+  const run = keys[event.key];
+  if (!run) return;
+  if (event.key !== "Tab") event.preventDefault();
+  run();
+}
+function onPointerDown(event) {
+  const target = event.target;
+  if (!target || contentEl.value?.contains(target) || triggerEl.value?.contains(target)) return;
+  hide(false);
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("pointerdown", onPointerDown, true);
+  onBeforeUnmount(() => document.removeEventListener("pointerdown", onPointerDown, true));
+}
+const Trigger = () => {
+  const node = firstElement(slots.default?.({ open: open.value }));
+  if (!node) return null;
+  return cloneVNode(node, {
+    /*
+     * El `stop` es de la tabla pero se queda aquí: sin él, abrir el
+     * menú dispara también el clic de la fila y se acaban abriendo dos
+     * cosas a la vez.
+     */
+    onClick: (event) => {
+      event.stopPropagation();
+      if (open.value) hide();
+      else void show("none");
+    },
+    onKeydown: onTriggerKeydown,
+    "aria-controls": open.value ? menuId : void 0,
+    "aria-expanded": open.value ? "true" : "false",
+    "aria-haspopup": "menu",
+    ref: (el) => {
+      triggerEl.value = el?.$el ?? el;
+    }
+  });
+};
+onBeforeUnmount(unfollow);
+</script>
+
+<template>
+    <Trigger />
+
+    <Teleport
+        v-if="open"
+        :to="portalTarget"
+    >
+        <div
+            :id="menuId"
+            ref="contentEl"
+            :class="ui.content"
+            role="menu"
+            style="position: fixed; top: 0; left: 0"
+            tabindex="-1"
+            @keydown="onContentKeydown"
+        >
+            <template
+                v-for="(item, index) in props.items"
+                :key="`${item.label}-${index}`"
+            >
+                <!--
+                    `<hr>` y no un `<div role="separator">`: el elemento ya
+                    significa eso, así que la línea existe aunque el CSS no
+                    cargue y no depende de que el papel esté bien escrito.
+                -->
+                <hr
+                    v-if="item.separator && index > 0"
+                    :class="ui.separator"
+                />
+
+                <div
+                    :ref="(el) => captureItem(index, el)"
+                    :aria-disabled="item.disabled ? 'true' : void 0"
+                    :class="item.color ? itemByColor[item.color] : ui.item"
+                    :data-disabled="item.disabled ? '' : void 0"
+                    :data-highlighted="active === index ? '' : void 0"
+                    role="menuitem"
+                    :tabindex="active === index ? 0 : -1"
+                    @click="choose(item)"
+                    @keydown.enter.prevent="choose(item)"
+                    @keydown.space.prevent="choose(item)"
+                    @pointermove="!item.disabled && (active = index)"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+
+                    <span class="truncate">{{ item.label }}</span>
+                </div>
+            </template>
+        </div>
+    </Teleport>
+</template>

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

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
+/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
+type VunoMenuItem = {
+    onSelect: () => void;
+    color?: VunoColor;
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    /** Dibuja una línea encima, para separar lo destructivo del resto. */
+    separator?: boolean;
+};
+type Props = {
+    items: VunoMenuItem[];
+    /** Ubicación preferida; cambia automáticamente si no cabe. */
+    placement?: VunoPlacement;
+    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+};
+type __VLS_Slots = {
+    /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    placement: VunoPlacement;
+    portal: VunoPortalTarget;
+}, {}, {}, {}, 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/Modal/Modal.d.vue.ts

@@ -0,0 +1,43 @@
+import type { VunoModalSize, VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    description?: string;
+    /** Cerrar con Escape o pulsando el fondo. */
+    dismissible?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    /** Ancho máximo; `full` ocupa todo el viewport. */
+    size?: VunoModalSize;
+    title?: string;
+    ui?: VunoUi<'modal'>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    open?: boolean;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    radius: VunoRadius;
+    size: VunoModalSize;
+    ui: VunoUi<"modal">;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    body?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
+    header?: () => unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};