@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,233 @@
+import type { VunoSize } from './base.js';
+import type { VunoFieldInputType, VunoFieldType } from './field-type.js';
+import type { VunoResponsiveColumns, VunoResponsiveColumnSpan } from './responsive.js';
+import type { VunoUi } from './slots.js';
+type WithType<TField, TType extends string> = TField & {
+    name: string;
+    type: TType;
+};
+/** Tema del control interno que cada `VField*` compone con su propia raíz. */
+type VunoFieldControlThemeKey = {
+    array: never;
+    checkbox: 'checkbox';
+    color: 'control' | 'input';
+    currency: 'control' | 'input' | 'numberInput';
+    date: 'control' | 'input';
+    email: 'control' | 'input';
+    file: 'fileUpload';
+    number: 'control' | 'input' | 'numberInput';
+    password: 'control' | 'input';
+    phone: 'control' | 'input';
+    radio: 'radioGroup';
+    search: 'control' | 'input';
+    select: 'control' | 'select';
+    slug: 'control' | 'input';
+    switch: 'switch';
+    tags: 'control' | 'tagsInput';
+    text: 'control' | 'input';
+    textarea: 'control' | 'textarea';
+    url: 'control' | 'input';
+};
+type VunoFieldThemeKey<TType extends VunoFieldType> = TType extends VunoFieldInputType ? 'fieldInput' : `field${Capitalize<TType>}`;
+type VunoFieldUiKey<TType extends VunoFieldType> = VunoFieldControlThemeKey[TType] | VunoFieldThemeKey<TType>;
+export type VunoFieldColumns = VunoResponsiveColumns | VunoResponsiveColumnSpan;
+/** Posición de la etiqueta respecto al control. */
+export type VunoFieldOrientation = 'horizontal' | 'vertical';
+/** Dirección interna de controles que también tienen una disposición propia. */
+export type VunoControlOrientation = 'horizontal' | 'vertical';
+/** Valor que puede tomar una opción de lista. */
+export type VunoFieldOptionValue = boolean | null | number | string;
+/** Opción de los campos con lista (select, radio). */
+export type VunoFieldOption = {
+    description?: string;
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    value: VunoFieldOptionValue;
+};
+/**
+ * Props comunes a todos los campos: layout dentro del grid, metadatos del
+ * envoltorio de campo y los dos puntos de escape de estilo (`class` y `ui`).
+ */
+export type VunoFieldBase<TType extends VunoFieldType = VunoFieldType> = {
+    name?: string;
+    class?: string;
+    columns?: VunoFieldColumns;
+    description?: string;
+    disabled?: boolean;
+    /** Error controlado cuando el campo se usa fuera de `VForm`. */
+    error?: string;
+    help?: string;
+    hint?: string;
+    label?: string;
+    /** Etiqueta arriba por defecto, o al costado del control. */
+    orientation?: VunoFieldOrientation;
+    required?: boolean;
+    size?: VunoSize;
+    ui?: VunoUi<VunoFieldUiKey<TType>>;
+};
+/**
+ * Lista de grupos de campos repetibles (variantes, líneas, contactos...).
+ *
+ * El tipo es recursivo a propósito: dentro de un array puede haber otro, y los
+ * valores se guardan en el estado como `nombre.0.campo`, que es el mismo
+ * formato de ruta que usan los errores de validación.
+ */
+export type VunoFieldArray = VunoFieldBase<'array'> & {
+    addLabel?: string;
+    fields: VunoField[];
+    /** Número máximo de elementos; al alcanzarlo se desactiva añadir. */
+    max?: number;
+    /** Número mínimo; por debajo no se puede eliminar. */
+    min?: number;
+    sortable?: boolean;
+};
+export type VunoFieldCheckbox = VunoFieldBase<'checkbox'> & {
+    indeterminate?: boolean;
+};
+/**
+ * Interruptor para un booleano que es un estado encendido o apagado, no una
+ * opción que se marca. La diferencia con `checkbox` es de lectura, no de dato:
+ * en una pantalla de ajustes el interruptor dice «esto está activo» y la
+ * casilla dice «esto queda seleccionado».
+ */
+export type VunoFieldSwitch = VunoFieldBase<'switch'>;
+export type VunoFieldColor = VunoFieldBase<'color'> & {
+    placeholder?: string;
+};
+export type VunoFieldCurrency = VunoFieldBase<'currency'> & {
+    controlsOrientation?: VunoControlOrientation;
+    currency: string;
+    decimals?: number;
+    max?: number;
+    min?: number;
+    placeholder?: string;
+    step?: number;
+};
+export type VunoFieldDate = VunoFieldBase<'date'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    max?: string;
+    min?: string;
+};
+export type VunoFieldEmail = VunoFieldBase<'email'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    icon?: string;
+    placeholder?: string;
+};
+/** Props del único componente público para inputs nativos de texto y fecha. */
+export type VunoFieldInput = VunoFieldBase<VunoFieldInputType> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    icon?: string;
+    max?: string;
+    maxlength?: number;
+    min?: string;
+    placeholder?: string;
+    type?: VunoFieldInputType;
+};
+export type VunoFieldFile = VunoFieldBase<'file'> & {
+    accept?: string;
+    dropzone?: boolean;
+    layout?: 'grid' | 'list';
+    multiple?: boolean;
+    reorderable?: boolean;
+};
+export type VunoFieldNumber = VunoFieldBase<'number'> & {
+    controlsOrientation?: VunoControlOrientation;
+    max?: number;
+    min?: number;
+    placeholder?: string;
+    step?: number;
+};
+export type VunoFieldPassword = VunoFieldBase<'password'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    placeholder?: string;
+};
+export type VunoFieldPhone = VunoFieldBase<'phone'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    icon?: string;
+    maxlength?: number;
+    placeholder?: string;
+};
+export type VunoFieldRadio = VunoFieldBase<'radio'> & {
+    items: VunoFieldOption[];
+    itemsOrientation?: VunoControlOrientation;
+};
+export type VunoFieldSearch = VunoFieldBase<'search'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    placeholder?: string;
+};
+export type VunoFieldSelect = VunoFieldBase<'select'> & {
+    items: VunoFieldOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+};
+export type VunoFieldSlug = VunoFieldBase<'slug'> & {
+    placeholder?: string;
+    /** Campo del que se deriva el slug automáticamente. */
+    source: string;
+    /** Valor origen cuando el campo se usa fuera de `VForm`. */
+    sourceValue?: string;
+};
+export type VunoFieldTags = VunoFieldBase<'tags'> & {
+    max?: number;
+    placeholder?: string;
+};
+export type VunoFieldText = VunoFieldBase<'text'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    icon?: string;
+    maxlength?: number;
+    placeholder?: string;
+};
+export type VunoFieldTextarea = VunoFieldBase<'textarea'> & {
+    autoresize?: boolean;
+    maxrows?: number;
+    placeholder?: string;
+    rows?: number;
+};
+export type VunoFieldUrl = VunoFieldBase<'url'> & {
+    autocomplete?: string;
+    autofocus?: boolean;
+    icon?: string;
+    maxlength?: number;
+    placeholder?: string;
+};
+/** Contrato único entre cada discriminante y los props de su campo. */
+export type VunoFieldByType = {
+    array: VunoFieldArray;
+    checkbox: VunoFieldCheckbox;
+    color: VunoFieldColor;
+    currency: VunoFieldCurrency;
+    date: VunoFieldDate;
+    email: VunoFieldEmail;
+    file: VunoFieldFile;
+    number: VunoFieldNumber;
+    password: VunoFieldPassword;
+    phone: VunoFieldPhone;
+    radio: VunoFieldRadio;
+    search: VunoFieldSearch;
+    select: VunoFieldSelect;
+    slug: VunoFieldSlug;
+    switch: VunoFieldSwitch;
+    tags: VunoFieldTags;
+    text: VunoFieldText;
+    textarea: VunoFieldTextarea;
+    url: VunoFieldUrl;
+};
+/**
+ * Unión discriminada por `type`. Se deriva del mapa para que añadir un tipo de
+ * campo no obligue a repetir aquí una segunda unión manual.
+ */
+export type VunoField = {
+    [TType in VunoFieldType]: WithType<VunoFieldByType[TType], TType>;
+}[VunoFieldType];
+/** Extrae los props de un tipo concreto de campo: `VunoFieldOf<'slug'>`. */
+export type VunoFieldOf<TType extends VunoFieldType> = WithType<VunoFieldByType[TType], TType>;
+export {};

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

@@ -0,0 +1,67 @@
+import type { ComputedRef } from 'vue';
+import type { VunoSize } from './base.js';
+import type { VunoField, VunoFieldColumns } from './field.js';
+/** Cómo se disponen las secciones del formulario. */
+export type VunoFormLayout = 'sections' | 'tabs';
+export type VunoFormSection = {
+    id: string;
+    columns?: VunoFieldColumns;
+    description?: string;
+    /** Campos de la sección, tipados por la unión discriminada `VunoField`. */
+    fields: VunoField[];
+    /** Icono de la pestaña cuando el formulario usa `layout: 'tabs'`. */
+    icon?: string;
+    title?: string;
+};
+export type VunoFormDefinition = {
+    /**
+     * `tabs` convierte cada sección en una pestaña, usando su `title` como
+     * rótulo. Útil en formularios largos y dentro de un modal.
+     */
+    layout?: VunoFormLayout;
+    sections: VunoFormSection[];
+    /** Tamaño aplicado a los campos que no declaran el suyo. */
+    size?: VunoSize;
+};
+export type VunoFormState = Record<string, unknown>;
+/** Un segmento de ruta admitido por el contrato Standard Schema. */
+export type VunoSchemaPathSegment = PropertyKey | {
+    key: PropertyKey;
+};
+export type VunoSchemaIssue = {
+    readonly message: string;
+    readonly path?: readonly VunoSchemaPathSegment[];
+};
+/** Resultado discriminado de una validación Standard Schema. */
+export type VunoSchemaResult<TValue> = {
+    readonly issues: readonly VunoSchemaIssue[];
+} | {
+    readonly issues?: undefined;
+    readonly value: TValue;
+};
+/**
+ * Contrato mínimo que comparten zod, valibot y arktype.
+ *
+ * La salida no se ata al estado de entrada: un formulario incompleto puede no
+ * satisfacer todavía el tipo que el esquema promete devolver.
+ */
+export type VunoSchema<TValue = unknown> = {
+    '~standard': {
+        validate: (value: unknown) => Promise<VunoSchemaResult<TValue>> | VunoSchemaResult<TValue>;
+    };
+};
+export interface VunoFormContext<TState extends VunoFormState = VunoFormState> {
+    dirty: ComputedRef<boolean>;
+    initialState: TState;
+    size: ComputedRef<undefined | VunoSize>;
+    touched: Record<string, boolean>;
+    /** El error de un campo, solo cuando toca enseñarlo. */
+    errorFor(name: string): string | undefined;
+    getValue<TValue = unknown>(name: string): TValue | undefined;
+    isDirty(name?: string): boolean;
+    isTouched(name: string): boolean;
+    reset(): void;
+    resetField(name: string): void;
+    setTouched(name: string, touched?: boolean): void;
+    setValue<TValue = unknown>(name: string, value: TValue): void;
+}

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

@@ -0,0 +1,16 @@
+export type { VunoAlertProps } from './alert.js';
+export type { VunoAlertRequest, VunoConfirmRequest, VunoContext, VunoNotification, VunoNotificationColor, VunoNotifyRequest, VunoOverlayEntry } from './app.js';
+export * from './app-config.js';
+export type { VunoColor, VunoHeadingLevel, VunoModalSize, VunoPlacement, VunoPortalTarget, VunoRadius, VunoSize, VunoSlideoverSize, VunoSlots } from './base.js';
+export type { VunoConfirmOptions } from './confirm.js';
+export type { VunoCrud, VunoCrudMessages, VunoCrudOptions, VunoCrudPage } from './crud.js';
+export type { VunoControlOrientation, VunoField, VunoFieldArray, VunoFieldBase, VunoFieldByType, VunoFieldCheckbox, VunoFieldColor, VunoFieldColumns, VunoFieldCurrency, VunoFieldDate, VunoFieldEmail, VunoFieldFile, VunoFieldInput, VunoFieldNumber, VunoFieldOf, VunoFieldOption, VunoFieldOptionValue, VunoFieldOrientation, VunoFieldPassword, VunoFieldPhone, VunoFieldRadio, VunoFieldSearch, VunoFieldSelect, VunoFieldSlug, VunoFieldSwitch, VunoFieldTags, VunoFieldText, VunoFieldTextarea, VunoFieldUrl } from './field.js';
+export type { VunoFieldInputType, VunoFieldType } from './field-type.js';
+export type { VunoFormContext, VunoFormDefinition, VunoFormLayout, VunoFormSection, VunoFormState, VunoSchema, VunoSchemaIssue, VunoSchemaPathSegment, VunoSchemaResult } from './form.js';
+export type { VunoBreadcrumbItem, VunoContainerSize, VunoNavigationItem, VunoNavigationTocItem, VunoTabItem } from './page.js';
+export type { VunoResponsiveColumns, VunoResponsiveColumnSpan } from './responsive.js';
+export type { VunoShortcut, VunoShortcutHandler, VunoShortcuts, VunoShortcutsOptions } from './shortcuts.js';
+export type { VunoResolvedSlots, VunoSlotOf, VunoUi, VunoVariantOf, VunoVariantsOf } from './slots.js';
+export type { VunoStateEmptyProps, VunoStateFailureProps, VunoStateProps } from './state.js';
+export type { VunoTableAction, VunoTableAlign, VunoTableBadgeMap, VunoTableCellColumn, VunoTableCellProps, VunoTableCellType, VunoTableColumn, VunoTableColumnActions, VunoTableColumnBadge, VunoTableColumnBase, VunoTableColumnBoolean, VunoTableColumnCurrency, VunoTableColumnCustom, VunoTableColumnDate, VunoTableColumnImage, VunoTableColumnNumber, VunoTableColumnOf, VunoTableColumnText, VunoTableColumnType, VunoTableDefinition, VunoTableEmpty, VunoTableFailure, VunoTableFilters, VunoTableQuery, VunoTableQueryOptions, VunoTableRow, VunoTableSort, VunoTableSortDirection } from './table.js';
+export type { VunoAppConfig, VunoIcons, VunoMessages, VunoThemeCompoundVariant, VunoThemeConfig, VunoThemeEntry, VunoThemeKey, VunoThemeVariants } from './theme.js';

package/dist/runtime/app/types/index.js

@@ -0,0 +1 @@
+export * from "./app-config.js";

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

@@ -0,0 +1,61 @@
+import type { VunoColor } from './base.js';
+/** Elemento de la miga de pan; se corresponde con el de Nuxt UI. */
+export type VunoBreadcrumbItem = {
+    icon?: string;
+    label?: string;
+    to?: string;
+};
+/**
+ * Un elemento de navegación, que puede tener hijos hasta cualquier profundidad.
+ *
+ * `to` es opcional a propósito y las tres combinaciones significan cosas
+ * distintas: con `to` y sin hijos es una hoja; con hijos y sin `to` es solo un
+ * grupo que agrupa; y **con los dos es una página que además tiene hijos**, que
+ * es el caso que obliga a separar el enlace del botón de desplegar.
+ */
+export type VunoNavigationItem = {
+    badge?: string;
+    children?: VunoNavigationItem[];
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    to?: string;
+};
+/** Enlace de un índice de página declarado antes del render, también disponible en SSR. */
+export type VunoNavigationTocItem = {
+    label: string;
+    /** Nivel visual del enlace dentro del índice. */
+    level?: 2 | 3;
+    /** Destino del enlace, normalmente el identificador de una sección: `#usage`. */
+    to: string;
+};
+/**
+ * Una pestaña. El contenido lo pinta quien la usa, por el slot.
+ *
+ * Vivía dentro de `Tabs.vue`, y eso lo dejaba fuera del contrato: el componente
+ * recibe `items: VunoTabItem[]` y desde el proyecto consumidor **ese tipo no se
+ * podía nombrar** —`import type { VunoTabItem }` fallaba con TS2305—, así que la
+ * única salida era un `as` o repetir la forma a mano, que es peor porque deja de
+ * avisar cuando cambie. Los demás tipos de esta familia ya estaban aquí, de modo
+ * que era un olvido y no una decisión.
+ *
+ * El `badge` cae a `error` si no lleva color, porque existe para contar los
+ * fallos de una pestaña que no estás mirando.
+ */
+export type VunoTabItem = {
+    badge?: {
+        color?: VunoColor;
+        label: string;
+    };
+    icon?: string;
+    label: string;
+    value: string;
+};
+/**
+ * El ancho máximo de un contenedor, con la escala de Tailwind.
+ *
+ * `full` no es «sin contenedor»: es sin tope de ancho pero con el relleno
+ * lateral, que es lo que se quiere en una pantalla que ocupa todo y aun así no
+ * debe pegar el texto al borde.
+ */
+export type VunoContainerSize = '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 'full' | 'lg' | 'md' | 'sm' | 'xl';

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

@@ -0,0 +1,8 @@
+export type VunoResponsiveColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type VunoResponsiveColumns = {
+    xs?: VunoResponsiveColumnSpan;
+    sm?: VunoResponsiveColumnSpan;
+    md?: VunoResponsiveColumnSpan;
+    lg?: VunoResponsiveColumnSpan;
+    xl?: VunoResponsiveColumnSpan;
+};

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

@@ -0,0 +1,44 @@
+/** Lo que corre cuando el atajo entra. Recibe el evento por si hace falta pararlo o leerlo. */
+export type VunoShortcutHandler = (event: KeyboardEvent) => void;
+/**
+ * Un atajo: la función a secas, o la función con condiciones.
+ *
+ * `usingInput` decide qué pasa cuando el foco está dentro de un campo, y es la
+ * parte que no se puede omitir: sin ella, escribir «g» en un buscador dispararía
+ * el atajo «ir a…» y el usuario vería la página cambiar mientras teclea.
+ *
+ * - `false` —lo de serie— solo fuera de un campo.
+ * - `true` también dentro, que es lo que quiere `escape` para cerrar.
+ * - una cadena, solo dentro del campo que se llame así, que es lo que quiere
+ *   `enter` para buscar sin robarle el Enter al resto de formularios.
+ */
+export type VunoShortcut = VunoShortcutHandler | {
+    handler: VunoShortcutHandler;
+    usingInput?: boolean | string;
+};
+/**
+ * El mapa de atajos. La clave es la combinación y el valor lo que hace.
+ *
+ * Un valor falso —`false`, `null`, `undefined`— **salta ese atajo sin sacarlo
+ * del mapa**, que es como se enciende y se apaga uno según el estado sin
+ * reconstruir el objeto entero.
+ */
+export type VunoShortcuts = Record<string, false | null | undefined | VunoShortcut>;
+export type VunoShortcutsOptions = {
+    /**
+     * Cuánto se espera entre teclas para que sigan contando como una secuencia.
+     *
+     * Pasado ese tiempo la secuencia se olvida, que es lo que evita que teclear
+     * «g» ahora y «d» dentro de un minuto acabe navegando a otra parte.
+     */
+    chainDelay?: number;
+    /**
+     * Comparar por la **posición física** de la tecla en vez de por el carácter.
+     *
+     * Con esto puesto, un teclado árabe o hebreo dispara los mismos atajos que
+     * uno latino, porque se mira dónde está la tecla y no qué letra escribe. El
+     * precio es el contrario: un teclado AZERTY tendrá la `a` donde el QWERTY
+     * tiene la `q`.
+     */
+    layoutIndependent?: boolean;
+};

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

@@ -0,0 +1,30 @@
+import type { defaultTheme } from '#vuno/theme/index';
+import type { VunoSlots } from './base.js';
+import type { VunoThemeKey } from './theme.js';
+type DefaultTheme = typeof defaultTheme;
+/** Nombres de slot declarados por la base, las variantes o sus combinaciones. */
+type VunoSlotOfOne<TKey extends VunoThemeKey> = (DefaultTheme[TKey] extends {
+    compoundVariants: readonly {
+        class: infer TClass;
+    }[];
+} ? Extract<keyof TClass, string> : never) | (DefaultTheme[TKey] extends {
+    slots: infer TSlots;
+} ? Extract<keyof TSlots, string> : never) | (DefaultTheme[TKey] extends {
+    variants: infer TVariants;
+} ? {
+    [TDimension in keyof TVariants]: {
+        [TValue in keyof TVariants[TDimension]]: Extract<keyof TVariants[TDimension][TValue], string>;
+    }[keyof TVariants[TDimension]];
+}[keyof TVariants] : never);
+export type VunoSlotOf<TKey extends VunoThemeKey> = TKey extends VunoThemeKey ? VunoSlotOfOne<TKey> : never;
+/** Override `ui` de una clave concreta, con autocompletado y rechazo de errores tipográficos. */
+export type VunoUi<TKey extends VunoThemeKey> = VunoSlots<[VunoSlotOf<TKey>] extends [never] ? string : VunoSlotOf<TKey>>;
+/** Las dimensiones de variante que una clave admite. */
+export type VunoVariantOf<TKey extends VunoThemeKey> = DefaultTheme[TKey] extends {
+    variants: infer TVariants;
+} ? Extract<keyof TVariants, string> : string;
+/** Las variantes activas de una clave, con el valor elegido. */
+export type VunoVariantsOf<TKey extends VunoThemeKey> = Partial<Record<VunoVariantOf<TKey>, string | undefined>>;
+/** Slots resueltos por `useTheme`: todas sus clases ya son una cadena. */
+export type VunoResolvedSlots<TKey extends VunoThemeKey> = Record<[VunoSlotOf<TKey>] extends [never] ? string : VunoSlotOf<TKey>, string>;
+export {};

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

@@ -0,0 +1,35 @@
+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;