@groupteknology/vuno 0.1.0

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

@@ -0,0 +1,137 @@
+<script setup>
+import { computed, provide, reactive, toRaw, useId, useTemplateRef } from "vue";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+import { vunoFormInjectionKey } from "#vuno/types/form";
+import { getColumnSpanClass } from "#vuno/utils/grid";
+import { cloneValue, getPath, isEqual, setPath } from "#vuno/utils/path";
+import FormSection from "./FormSection.vue";
+const props = defineProps({
+  id: { type: String, required: false },
+  definition: { type: Object, required: true },
+  schema: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["submit"]);
+const state = defineModel("state", { type: null, ...{ required: true } });
+const slots = defineSlots();
+const ui = useVunoTheme("form", () => props.ui);
+const fallbackId = useId();
+const formId = computed(() => props.id ?? fallbackId);
+const form = useTemplateRef("form");
+const initialState = cloneValue(toRaw(state.value));
+const touched = reactive({});
+const dirty = computed(() => !isEqual(state.value, initialState));
+const size = computed(() => props.definition.size);
+const isTabs = computed(() => props.definition.layout === "tabs");
+const errorNames = computed(() => new Set((form.value?.errors ?? []).map((error) => error.name).filter(Boolean)));
+const tabItems = computed(
+  () => props.definition.sections.map((section, index) => {
+    const errors = section.fields.filter((field) => errorNames.value.has(field.name) || [...errorNames.value].some((name) => name?.startsWith(`${field.name}.`))).length;
+    return {
+      // `UTabs` fija `variant="outline"` en su badge, que sobre la
+      // pestaña activa queda sin contraste: se pasa `solid` para que
+      // el contador se lea sobre cualquier fondo.
+      badge: errors > 0 ? { color: "error", label: String(errors), variant: "solid" } : void 0,
+      icon: section.icon,
+      label: section.title ?? section.id,
+      section,
+      value: `${section.id}-${index}`
+    };
+  })
+);
+function getValue(name) {
+  return getPath(state.value, name);
+}
+function setValue(name, value) {
+  setPath(state.value, name, value);
+}
+function isTouched(name) {
+  return touched[name] ?? false;
+}
+function setTouched(name, value = true) {
+  touched[name] = value;
+}
+function isDirty(name) {
+  if (!name) return dirty.value;
+  return !isEqual(getPath(state.value, name), getPath(initialState, name));
+}
+function resetField(name) {
+  setPath(state.value, name, cloneValue(getPath(initialState, name)));
+  touched[name] = false;
+}
+function reset() {
+  state.value = cloneValue(initialState);
+  for (const key of Object.keys(touched)) {
+    delete touched[key];
+  }
+}
+const context = {
+  dirty,
+  getValue,
+  initialState,
+  isDirty,
+  isTouched,
+  reset,
+  resetField,
+  setTouched,
+  setValue,
+  size,
+  touched
+};
+provide(vunoFormInjectionKey, context);
+function onSubmit(event) {
+  emit("submit", event);
+}
+defineExpose({ dirty, errors: errorNames, isDirty, reset, resetField, submit: () => form.value?.submit?.() });
+</script>
+
+<template>
+    <UForm
+        :id="formId"
+        ref="form"
+        :schema="props.schema"
+        :state="state"
+        :ui="{ base: ui.base }"
+        @submit="onSubmit"
+    >
+        <UTabs
+            v-if="isTabs"
+            :defaultValue="tabItems[0]?.value"
+            :items="tabItems"
+            :size="size"
+            :ui="{ root: ui.tabs, content: ui.tabsContent }"
+            :unmountOnHide="false"
+        >
+            <template #content="{ item }">
+                <FormSection
+                    plain
+                    :section="item.section"
+                />
+            </template>
+        </UTabs>
+
+        <div
+            v-else
+            :class="ui.sections"
+        >
+            <div
+                v-for="(section, index) in props.definition.sections"
+                :key="`${section.id}-${index}`"
+                :class="getColumnSpanClass(section.columns)"
+            >
+                <FormSection :section="section" />
+            </div>
+        </div>
+
+        <div
+            v-if="slots.footer"
+            :class="ui.footer"
+        >
+            <slot
+                :dirty="dirty"
+                name="footer"
+                :reset="reset"
+            />
+        </div>
+    </UForm>
+</template>

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

@@ -0,0 +1,48 @@
+import type { FormSchema, FormSubmitEvent } from '@nuxt/ui';
+import type { VunoFieldSlots } from '#vuno/types/field';
+import { type VunoFormDefinition, type VunoFormState } from '#vuno/types/form';
+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<({
+        /**
+         * Id del `<form>`. Permite enviarlo desde un botón que vive fuera de
+         * él —el pie de un modal, por ejemplo— con `<button form="...">`.
+         */
+        id?: string;
+        definition: VunoFormDefinition;
+        /** Opcional: un panel de filtros, por ejemplo, no necesita validación. */
+        schema?: FormSchema;
+        ui?: VunoFieldSlots;
+    } & {
+        state: TState;
+    }) & {
+        onSubmit?: ((event: FormSubmitEvent<TState>) => any) | undefined;
+        "onUpdate:state"?: ((value: TState) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        dirty: import("vue").ComputedRef<boolean>;
+        errors: import("vue").ComputedRef<Set<string | undefined>>;
+        isDirty: (name?: string) => boolean;
+        reset: () => void;
+        resetField: (name: string) => void;
+        submit: () => Promise<void> | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        footer?: (props: {
+            dirty: boolean;
+            reset: () => void;
+        }) => unknown;
+    };
+    emit: ((evt: "submit", event: FormSubmitEvent<TState>) => 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/Form/FormField.d.vue.ts

@@ -0,0 +1,7 @@
+import type { VunoField } from '#vuno/types/field';
+type __VLS_Props = {
+    field: VunoField;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Form/FormField.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoForm } from "#vuno/composables/useVunoForm";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+import FieldArray from "#vuno/components/Field/FieldArray.vue";
+import FieldCheckbox from "#vuno/components/Field/FieldCheckbox.vue";
+import FieldColor from "#vuno/components/Field/FieldColor.vue";
+import FieldEmail from "#vuno/components/Field/FieldEmail.vue";
+import FieldFile from "#vuno/components/Field/FieldFile.vue";
+import FieldNumber from "#vuno/components/Field/FieldNumber.vue";
+import FieldPassword from "#vuno/components/Field/FieldPassword.vue";
+import FieldRadio from "#vuno/components/Field/FieldRadio.vue";
+import FieldSelect from "#vuno/components/Field/FieldSelect.vue";
+import FieldSlug from "#vuno/components/Field/FieldSlug.vue";
+import FieldText from "#vuno/components/Field/FieldText.vue";
+import FieldTextarea from "#vuno/components/Field/FieldTextarea.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const components = {
+  array: FieldArray,
+  checkbox: FieldCheckbox,
+  color: FieldColor,
+  email: FieldEmail,
+  file: FieldFile,
+  number: FieldNumber,
+  password: FieldPassword,
+  radio: FieldRadio,
+  select: FieldSelect,
+  slug: FieldSlug,
+  text: FieldText,
+  textarea: FieldTextarea
+};
+const form = useVunoForm();
+const ui = useVunoTheme("formField");
+const component = computed(() => components[props.field.type]);
+const size = computed(() => props.field.size ?? form.size.value);
+const fieldProps = computed(() => {
+  const { class: _class, columns: _columns, type: _type, ...rest } = props.field;
+  return { ...rest, size: size.value };
+});
+</script>
+
+<template>
+    <UFormField
+        :class="props.field.class"
+        :description="props.field.description"
+        :help="props.field.help"
+        :hint="props.field.hint"
+        :label="props.field.label"
+        :name="props.field.name"
+        :required="props.field.required"
+        :size="size"
+        :ui="ui"
+    >
+        <component
+            :is="component"
+            v-bind="fieldProps"
+        />
+    </UFormField>
+</template>

package/dist/runtime/app/components/Form/FormField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { VunoField } from '#vuno/types/field';
+type __VLS_Props = {
+    field: VunoField;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,54 @@
+import type { FormSchema, FormSubmitEvent } from '@nuxt/ui';
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoFormDefinition, VunoFormState } from '#vuno/types/form';
+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?: VunoFieldSlots;
+        /** Marca el botón de guardar como ocupado y bloquea el cierre. */
+        loading?: boolean;
+        schema: FormSchema;
+        title?: string;
+        /** Slots del modal (`content`, `body`, ...). */
+        ui?: VunoFieldSlots;
+    } & {
+        open?: boolean;
+        state: TState;
+    }) & {
+        onClose?: (() => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSubmit?: ((event: FormSubmitEvent<TState>) => any) | undefined;
+        "onUpdate:state"?: ((value: TState) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        footer?: (props: {
+            dirty: boolean;
+            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", event: FormSubmitEvent<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/Form/FormModal.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { computed, useId, useTemplateRef } from "vue";
+import { useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+import Form from "./Form.vue";
+const props = defineProps({
+  closeOnSubmit: { type: Boolean, required: false },
+  definition: { type: Object, required: true },
+  description: { type: String, required: false },
+  formUi: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  schema: { type: null, required: true },
+  title: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["close", "submit"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const state = defineModel("state", { type: null, ...{ required: true } });
+defineSlots();
+const messages = useVunoMessages();
+const ui = useVunoTheme("formModal", () => props.ui);
+const modalUi = computed(() => ({ body: ui.value.body, content: ui.value.content, footer: ui.value.footer }));
+const formId = useId();
+const form = useTemplateRef("form");
+function close() {
+  if (props.loading) return;
+  open.value = false;
+  emit("close");
+}
+function onSubmit(event) {
+  emit("submit", event);
+  if (props.closeOnSubmit) open.value = false;
+}
+</script>
+
+<template>
+    <UModal
+        v-model:open="open"
+        :description="props.description"
+        :dismissible="!props.loading"
+        scrollable
+        :title="props.title"
+        :ui="modalUi"
+    >
+        <slot name="trigger" />
+
+        <template #body>
+            <Form
+                :id="formId"
+                ref="form"
+                v-model:state="state"
+                :definition="props.definition"
+                :schema="props.schema"
+                :ui="props.formUi"
+                @submit="onSubmit"
+            />
+        </template>
+
+        <template #footer>
+            <slot
+                :close="close"
+                :dirty="form?.dirty ?? false"
+                :loading="props.loading ?? false"
+                name="footer"
+                :reset="() => form?.reset?.()"
+            >
+                <UButton
+                    color="neutral"
+                    :disabled="props.loading"
+                    :label="messages.cancel"
+                    variant="ghost"
+                    @click="close"
+                />
+                <UButton
+                    :form="formId"
+                    :label="messages.save"
+                    :loading="props.loading"
+                    type="submit"
+                />
+            </slot>
+        </template>
+    </UModal>
+</template>

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

@@ -0,0 +1,54 @@
+import type { FormSchema, FormSubmitEvent } from '@nuxt/ui';
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoFormDefinition, VunoFormState } from '#vuno/types/form';
+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?: VunoFieldSlots;
+        /** Marca el botón de guardar como ocupado y bloquea el cierre. */
+        loading?: boolean;
+        schema: FormSchema;
+        title?: string;
+        /** Slots del modal (`content`, `body`, ...). */
+        ui?: VunoFieldSlots;
+    } & {
+        open?: boolean;
+        state: TState;
+    }) & {
+        onClose?: (() => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSubmit?: ((event: FormSubmitEvent<TState>) => any) | undefined;
+        "onUpdate:state"?: ((value: TState) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        footer?: (props: {
+            dirty: boolean;
+            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", event: FormSubmitEvent<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/Form/FormSection.d.vue.ts

@@ -0,0 +1,12 @@
+import type { VunoFormSection } from '#vuno/types/form';
+type __VLS_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;
+    section: VunoFormSection;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+import { getColumnSpanClass } from "#vuno/utils/grid";
+import FormField from "./FormField.vue";
+const props = defineProps({
+  plain: { type: Boolean, required: false },
+  section: { type: Object, required: true }
+});
+const ui = useVunoTheme("formSection");
+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)"
+        >
+            <FormField :field="field" />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+import type { VunoFormSection } from '#vuno/types/form';
+type __VLS_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;
+    section: VunoFormSection;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoBreadcrumbItem } from '#vuno/types/page';
+type __VLS_Props = {
+    breadcrumb?: VunoBreadcrumbItem[];
+    description?: string;
+    title: string;
+    ui?: VunoFieldSlots;
+};
+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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  breadcrumb: { type: Array, required: false },
+  description: { type: String, required: false },
+  title: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const ui = useVunoTheme("page", () => props.ui);
+const panelUi = computed(() => ({ body: ui.value.panelBody }));
+const navbarUi = computed(() => ({ left: ui.value.navbarLeft, root: ui.value.navbar }));
+</script>
+
+<template>
+    <UDashboardPanel :ui="panelUi">
+        <template #header>
+            <UDashboardNavbar :ui="navbarUi">
+                <!--
+                    Se ocupa `#left` entero en vez de `#title`: el `#title` de la
+                    barra vive dentro de un `<h1>`, y una miga de pan ahí sería un
+                    `<nav>` dentro de un encabezado.
+                -->
+                <template #left>
+                    <slot name="leading" />
+
+                    <!-- En `neutral`: en color de marca, el último segmento se lee
+                         como un enlace a otro sitio. -->
+                    <UBreadcrumb
+                        v-if="props.breadcrumb?.length"
+                        :class="ui.breadcrumb"
+                        color="neutral"
+                        :items="props.breadcrumb"
+                    />
+                </template>
+
+                <template #right>
+                    <slot name="actions" />
+                </template>
+            </UDashboardNavbar>
+        </template>
+
+        <template #body>
+            <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">
+                    <h1 :class="ui.title">{{ props.title }}</h1>
+
+                    <p
+                        v-if="props.description"
+                        :class="ui.description"
+                    >
+                        {{ props.description }}
+                    </p>
+                </div>
+
+                <slot />
+            </div>
+        </template>
+    </UDashboardPanel>
+</template>

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

@@ -0,0 +1,24 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+import type { VunoBreadcrumbItem } from '#vuno/types/page';
+type __VLS_Props = {
+    breadcrumb?: VunoBreadcrumbItem[];
+    description?: string;
+    title: string;
+    ui?: VunoFieldSlots;
+};
+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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/State/EmptyState.d.vue.ts

@@ -0,0 +1,20 @@
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = {
+    hint?: string;
+    icon?: string;
+    title?: string;
+    ui?: VunoFieldSlots;
+};
+type __VLS_Slots = {
+    /** La invitación a crear el primer registro va aquí. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};