@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,35 @@
+export declare const slideoverTheme: Record<"slideover", {
+    readonly slots: {
+        readonly body: "";
+        readonly content: "h-dvh max-h-dvh";
+        readonly description: "";
+        readonly footer: "";
+        readonly header: "";
+        readonly root: "my-0 h-dvh max-h-dvh w-[calc(100dvw-2rem)] rounded-none";
+        readonly title: "";
+    };
+    readonly variants: {
+        readonly position: {
+            readonly end: {
+                readonly root: "ms-auto me-0";
+            };
+            readonly start: {
+                readonly root: "ms-0 me-auto";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly root: "max-w-sm";
+            };
+            readonly md: {
+                readonly root: "max-w-md";
+            };
+            readonly lg: {
+                readonly root: "max-w-lg";
+            };
+            readonly xl: {
+                readonly root: "max-w-xl";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const slideoverTheme = defineTheme("slideover", {
+  slots: {
+    body: "",
+    content: "h-dvh max-h-dvh",
+    description: "",
+    footer: "",
+    header: "",
+    root: "my-0 h-dvh max-h-dvh w-[calc(100dvw-2rem)] rounded-none",
+    title: ""
+  },
+  variants: {
+    position: {
+      end: { root: "ms-auto me-0" },
+      start: { root: "ms-0 me-auto" }
+    },
+    size: {
+      sm: { root: "max-w-sm" },
+      md: { root: "max-w-md" },
+      lg: { root: "max-w-lg" },
+      xl: { root: "max-w-xl" }
+    }
+  }
+});

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

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Modal from "#vuno/components/Modal/Modal.vue";
+defineOptions({ name: "VunoSlideover" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  dismissible: { type: Boolean, required: false, default: true },
+  position: { type: String, required: false, default: "end" },
+  size: { type: String, required: false, default: "md" },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["close"]);
+defineSlots();
+const ui = useTheme(
+  "slideover",
+  () => props.ui,
+  () => ({ position: props.position, size: props.size })
+);
+const modalUi = computed(() => ({ body: ui.value.body, content: ui.value.content, description: ui.value.description, footer: ui.value.footer, header: ui.value.header, root: ui.value.root, title: ui.value.title }));
+</script>
+
+<template>
+    <Modal
+        v-model:open="open"
+        :data-position="props.position"
+        :description="props.description"
+        :dismissible="props.dismissible"
+        :title="props.title"
+        :ui="modalUi"
+        @close="emit('close')"
+    >
+        <slot />
+
+        <template
+            v-if="$slots.body"
+            #body
+        >
+            <slot name="body" />
+        </template>
+
+        <template
+            v-if="$slots.footer"
+            #footer
+        >
+            <slot name="footer" />
+        </template>
+
+        <template
+            v-if="$slots.header"
+            #header
+        >
+            <slot name="header" />
+        </template>
+    </Modal>
+</template>

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

@@ -0,0 +1,43 @@
+import type { VunoSlideoverSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    description?: string;
+    dismissible?: boolean;
+    position?: 'end' | 'start';
+    size?: VunoSlideoverSize;
+    title?: string;
+    ui?: VunoUi<'slideover'>;
+};
+type __VLS_Props = Props;
+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;
+    size: VunoSlideoverSize;
+    position: "end" | "start";
+    ui: VunoUi<"slideover">;
+    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/State/State.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VunoStateFailureProps } from '#vuno/types/state';
+type __VLS_Slots = {
+    /** La invitación a crear el primer registro. Solo en el estado vacío: un fallo ya trae su reintento. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<(Partial<VunoStateFailureProps> & import("#vuno/types/state").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(Partial<VunoStateFailureProps> & import("#vuno/types/state").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps)> & 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/State.theme.d.ts

@@ -0,0 +1,19 @@
+export declare const stateTheme: Record<"state", {
+    readonly slots: {
+        readonly actions: "mt-3 empty:hidden";
+        readonly hint: "max-w-prose text-sm text-vuno-muted";
+        readonly icon: "size-8 shrink-0";
+        readonly root: "flex flex-col items-center gap-1 px-4 py-10 text-center";
+        readonly title: "font-medium text-vuno-strong";
+    };
+    readonly variants: {
+        readonly tone: {
+            readonly empty: {
+                readonly icon: "text-vuno-subtle";
+            };
+            readonly failure: {
+                readonly icon: "text-vuno-error";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,26 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const stateTheme = defineTheme("state", {
+  slots: {
+    actions: "mt-3 empty:hidden",
+    hint: "max-w-prose text-sm text-vuno-muted",
+    icon: "size-8 shrink-0",
+    root: "flex flex-col items-center gap-1 px-4 py-10 text-center",
+    title: "font-medium text-vuno-strong"
+  },
+  /*
+   * El color del icono lo decide la variante y no el componente.
+   *
+   * Estaban los dos escritos a mano sobre el `<Icon>`, **además** del
+   * `ui.icon`: una clase puesta sobre un componente no pasa por
+   * tailwind-merge, así que convivía con la del tema y ganaba el orden de
+   * la hoja. Y la del fallo era `text-error`, que no existe —el módulo no
+   * define `--color-error`— de modo que el estado de fallo se pintaba con
+   * el color del texto normal.
+   */
+  variants: {
+    tone: {
+      empty: { icon: "text-vuno-subtle" },
+      failure: { icon: "text-vuno-error" }
+    }
+  }
+});

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

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoState" });
+const props = defineProps({
+  failure: { type: Object, required: false },
+  tone: { type: String, required: false },
+  ui: { type: Object, required: false },
+  hint: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const failure = computed(() => props.tone === "failure" ? props.failure : void 0);
+const empty = computed(() => props.tone === "failure" ? void 0 : props);
+const ui = useTheme(
+  "state",
+  () => props.ui,
+  () => ({ tone: failure.value ? "failure" : "empty" })
+);
+const iconName = computed(() => failure.value ? icons.value.failure : empty.value?.icon ?? icons.value.empty);
+const title = computed(() => failure.value ? failure.value.title ?? messages.value.failureTitle : empty.value?.title ?? messages.value.emptyTable);
+const hint = computed(() => failure.value ? failure.value.hint ?? messages.value.failureHint : empty.value?.hint ?? messages.value.emptyHint);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <Icon
+            :class="ui.icon"
+            :name="iconName"
+        />
+
+        <p :class="ui.title">{{ title }}</p>
+
+        <p
+            v-if="hint"
+            :class="ui.hint"
+        >
+            {{ hint }}
+        </p>
+
+        <div :class="ui.actions">
+            <!--
+                El reintento no es un slot: viaja dentro del propio fallo, de
+                modo que no se puede pintar un error y olvidarse de la salida.
+            -->
+            <Button
+                v-if="failure"
+                color="neutral"
+                :icon="icons.retry"
+                :label="messages.retry"
+                variant="outline"
+                @click="failure.retry()"
+            />
+
+            <slot
+                v-else
+                name="actions"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { VunoStateFailureProps } from '#vuno/types/state';
+type __VLS_Slots = {
+    /** La invitación a crear el primer registro. Solo en el estado vacío: un fallo ya trae su reintento. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<(Partial<VunoStateFailureProps> & import("#vuno/types/state").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(Partial<VunoStateFailureProps> & import("#vuno/types/state").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps)> & 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/Table/Table.d.vue.ts

@@ -0,0 +1,80 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoTableDefinition, VunoTableFailure, VunoTableQuery, VunoTableRow } from '#vuno/types/table';
+declare const __VLS_export: <TRow extends VunoTableRow>(__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<({
+        data: TRow[];
+        definition: VunoTableDefinition<TRow>;
+        /**
+         * Fallo de la consulta. Sin esto, un error se pintaría como «no hay
+         * resultados» y la tabla afirmaría que no hay nada cuando en realidad
+         * no se pudo saber.
+         */
+        failure?: VunoTableFailure;
+        loading?: boolean;
+        /** La curvatura. Sin valor, la que traiga el tema. */
+        radius?: VunoRadius;
+        /** Total de filas en servidor, no las de la página actual. */
+        total?: number;
+        ui?: VunoUi<"table">;
+    } & {
+        /**
+             * Estado de consulta. El consumidor lo observa y devuelve `data` y `total`.
+             *
+             * Es obligatorio a propósito: la tabla no trae datos por sí misma, así que
+             * un estado interno avanzaría de página sin que nadie pidiera la siguiente
+             * —el pie diría «11-20» mientras se siguen viendo las filas 1-10—. Dónde
+             * vive ese estado lo decide `useTableQuery`: un `ref` normal o la
+             * query string.
+             */
+        query: VunoTableQuery;
+        /** Claves de las filas seleccionadas, no las filas: con paginación en servidor las de otras páginas no están cargadas. */
+        selection?: (number | string)[];
+    }) & {
+        onRowClick?: ((row: TRow) => any) | undefined;
+        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
+        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        clearFilters: () => void;
+        clearQuery: () => void;
+        clearSearch: () => void;
+        clearSelection: () => void;
+        goToPage: (page: number) => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        [key: `cell-${string}`]: (props: {
+            row: TRow;
+            value: unknown;
+        }) => unknown;
+        empty?: () => unknown;
+        'empty-actions'?: () => unknown;
+        'no-matches'?: (props: {
+            clear: () => void;
+        }) => unknown;
+        'no-matches-actions'?: (props: {
+            clear: () => void;
+        }) => unknown;
+        selection?: (props: {
+            count: number;
+            keys: (number | string)[];
+            clear: () => void;
+        }) => unknown;
+        toolbar?: (props: {
+            query: VunoTableQuery;
+        }) => unknown;
+    };
+    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:query", value: VunoTableQuery) => void) & ((event: "update:selection", value: (string | number)[]) => 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/Table/Table.theme.d.ts

@@ -0,0 +1,50 @@
+export declare const tableTheme: Record<"table", {
+    readonly slots: {
+        readonly chips: "flex flex-wrap items-center gap-2";
+        readonly emptyCell: "px-4 py-6";
+        readonly filtersBody: "flex flex-col gap-4";
+        readonly filtersFooter: "flex items-center justify-between gap-2";
+        readonly footer: "flex flex-wrap items-center justify-between gap-4 px-1";
+        readonly headRow: "border-b border-vuno-border";
+        readonly meta: "flex items-center gap-2 text-sm text-vuno-muted";
+        readonly pageSizeControl: "w-auto";
+        readonly pageSizeSelect: "cursor-pointer bg-transparent py-1 pr-1 outline-none";
+        readonly root: "flex w-full flex-col gap-4";
+        readonly search: "w-full sm:max-w-xs";
+        readonly selectCell: "w-0";
+        readonly selection: "flex items-center justify-between gap-2 rounded-sm bg-vuno-primary/10 px-3 py-2 text-sm";
+        readonly skip: "sr-only rounded-sm bg-vuno-surface text-vuno-body focus:not-sr-only focus:outline-vuno-primary focus:z-10 focus:inline-block focus:px-3 focus:py-1.5 focus:text-sm focus:outline-2 focus:outline-offset-2";
+        readonly sortButton: "-mx-2";
+        readonly table: "min-w-full";
+        readonly tableRoot: "relative overflow-auto rounded-sm border border-vuno-border";
+        /**
+         * El marco va en el contenedor y no en la `<table>`.
+         *
+         * Ponerlo en la tabla obliga a `border-separate` para que el radio
+         * no lo ignore el navegador, y en ese modo el navegador **también**
+         * ignora los bordes declarados en `<tr>`, que es donde Nuxt UI pone
+         * la línea entre filas: el marco salía y las divisiones
+         * desaparecían, sin ningún error de por medio.
+         *
+         * Aquí la tabla se queda colapsada —sus líneas vuelven— y el radio
+         * recorta porque el contenedor ya tiene `overflow` propio para el
+         * desplazamiento horizontal.
+         */
+        /**
+         * Nuxt UI solo aplica hover a las filas con `data-selectable`, que
+         * son las que reciben un manejador de selección. Aquí se aplica
+         * siempre, y con su misma utilidad semántica para que el color lo
+         * siga decidiendo el tema del proyecto.
+         */
+        readonly tbody: "[&>tr]:transition-colors [&>tr]:hover:bg-vuno-surface-1";
+        readonly td: "p-4 text-sm whitespace-nowrap text-vuno-muted";
+        readonly th: "px-4 py-3.5 text-start text-sm font-semibold text-vuno-strong";
+        readonly thead: "";
+        readonly toolbar: "flex flex-wrap items-center justify-between gap-2";
+        readonly toolbarActions: "flex items-center gap-2";
+        readonly tr: "border-b border-vuno-border transition-colors last:border-b-0 hover:bg-vuno-surface-1 data-[selected=true]:bg-vuno-primary/10";
+    };
+    readonly variants: {
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"tableRoot", string>>;
+    };
+}>;

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

@@ -0,0 +1,64 @@
+import { radiusByStep, skipLink } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const tableTheme = defineTheme("table", {
+  slots: {
+    chips: "flex flex-wrap items-center gap-2",
+    emptyCell: "px-4 py-6",
+    filtersBody: "flex flex-col gap-4",
+    filtersFooter: "flex items-center justify-between gap-2",
+    footer: "flex flex-wrap items-center justify-between gap-4 px-1",
+    headRow: "border-b border-vuno-border",
+    meta: "flex items-center gap-2 text-sm text-vuno-muted",
+    /*
+     * El ancho viaja por `ui` de instancia a propósito —pelea con el
+     * `w-full` del tema y puesto como clase convivirían los dos—, pero
+     * el valor sale de aquí en vez de estar escrito en la plantilla.
+     */
+    pageSizeControl: "w-auto",
+    pageSizeSelect: "cursor-pointer bg-transparent py-1 pr-1 outline-none",
+    root: "flex w-full flex-col gap-4",
+    search: "w-full sm:max-w-xs",
+    selectCell: "w-0",
+    selection: "flex items-center justify-between gap-2 rounded-sm bg-vuno-primary/10 px-3 py-2 text-sm",
+    /* Ver `skipLink`: la clase está en un solo sitio para las tres. */
+    skip: skipLink,
+    /*
+     * El margen negativo cancela el relleno del botón para que la
+     * cabecera se alinee con el texto de la columna, así que depende del
+     * relleno de `baseButton`: un proyecto que cambie uno tiene que poder
+     * cambiar el otro.
+     */
+    sortButton: "-mx-2",
+    table: "min-w-full",
+    tableRoot: "relative overflow-auto rounded-sm border border-vuno-border",
+    /**
+     * El marco va en el contenedor y no en la `<table>`.
+     *
+     * Ponerlo en la tabla obliga a `border-separate` para que el radio
+     * no lo ignore el navegador, y en ese modo el navegador **también**
+     * ignora los bordes declarados en `<tr>`, que es donde Nuxt UI pone
+     * la línea entre filas: el marco salía y las divisiones
+     * desaparecían, sin ningún error de por medio.
+     *
+     * Aquí la tabla se queda colapsada —sus líneas vuelven— y el radio
+     * recorta porque el contenedor ya tiene `overflow` propio para el
+     * desplazamiento horizontal.
+     */
+    /**
+     * Nuxt UI solo aplica hover a las filas con `data-selectable`, que
+     * son las que reciben un manejador de selección. Aquí se aplica
+     * siempre, y con su misma utilidad semántica para que el color lo
+     * siga decidiendo el tema del proyecto.
+     */
+    tbody: "[&>tr]:transition-colors [&>tr]:hover:bg-vuno-surface-1",
+    td: "p-4 text-sm whitespace-nowrap text-vuno-muted",
+    th: "px-4 py-3.5 text-start text-sm font-semibold text-vuno-strong",
+    thead: "",
+    toolbar: "flex flex-wrap items-center justify-between gap-2",
+    toolbarActions: "flex items-center gap-2",
+    tr: "border-b border-vuno-border transition-colors last:border-b-0 hover:bg-vuno-surface-1 data-[selected=true]:bg-vuno-primary/10"
+  },
+  variants: {
+    radius: radiusByStep("tableRoot")
+  }
+});