@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,9 +1,9 @@
-import type { VunoStateFailureProps } from '#vuno/types/state';
+import type { VunoStateFailureProps } from './State.types.js';
 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_base: import("vue").DefineComponent<(Partial<VunoStateFailureProps> & import("./State.types.js").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(Partial<VunoStateFailureProps> & import("./State.types.js").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;

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

@@ -0,0 +1,15 @@
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoTableFailure } from '#vuno/types/table';
+export type VunoStateEmptyProps = {
+    hint?: string;
+    icon?: string;
+    title?: string;
+    tone?: 'empty';
+    ui?: VunoUi<'state'>;
+};
+export type VunoStateFailureProps = {
+    failure: VunoTableFailure;
+    tone: 'failure';
+    ui?: VunoUi<'state'>;
+};
+export type VunoStateProps = VunoStateEmptyProps | VunoStateFailureProps;

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

@@ -3,6 +3,7 @@ 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";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoState" });
 const props = defineProps({
   failure: { type: Object, required: false },
@@ -34,14 +35,23 @@ const hint = computed(() => failure.value ? failure.value.hint ?? messages.value
             :name="iconName"
         />
 
-        <p :class="ui.title">{{ title }}</p>
+        <Text
+            :class="ui.title"
+            tag="p"
+            tone="inherit"
+            variant="inherit"
+            >{{ title }}</Text
+        >
 
-        <p
+        <Text
             v-if="hint"
             :class="ui.hint"
+            tag="p"
+            tone="inherit"
+            variant="inherit"
         >
             {{ hint }}
-        </p>
+        </Text>
 
         <div :class="ui.actions">
             <!--

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

@@ -1,9 +1,9 @@
-import type { VunoStateFailureProps } from '#vuno/types/state';
+import type { VunoStateFailureProps } from './State.types.js';
 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_base: import("vue").DefineComponent<(Partial<VunoStateFailureProps> & import("./State.types.js").VunoStateEmptyProps) | (Partial<VunoStateFailureProps> & VunoStateFailureProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(Partial<VunoStateFailureProps> & import("./State.types.js").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;

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

@@ -1,49 +1,17 @@
-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. */
+import type { VunoTableSort } from '#vuno/types/table';
+import type { VunoTableProps } from './Table.types.js';
+declare const __VLS_export: <TRow extends import("#vuno/types/table").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<(VunoTableProps<TRow> & {
         selection?: (number | string)[];
+        sort?: null | VunoTableSort;
     }) & {
         onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
         "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+        "onUpdate:sort"?: ((value: VunoTableSort | null) => 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;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         [key: `cell-${string}`]: (props: {
@@ -51,23 +19,8 @@ declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable
             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));
+    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:sort", value: VunoTableSort | null) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -1,50 +1,32 @@
 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 caption: "px-4 py-3 text-start text-sm font-semibold text-vuno-strong";
+        readonly emptyCell: "px-4 py-6 text-center text-sm text-vuno-muted";
         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 interactiveRow: "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-vuno-primary";
         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 stickyColumn: "sticky z-10 bg-vuno-surface after:pointer-events-none after:absolute after:inset-y-0 after:w-6 group-hover/row:bg-vuno-surface-1 group-data-[selected=true]/row:bg-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]";
+        readonly stickyColumnEnd: "end-0 after:-start-6 after:bg-linear-to-l after:from-vuno-surface after:to-transparent group-hover/row:after:from-vuno-surface-1 group-data-[selected=true]/row:after:from-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]";
+        readonly stickyColumnStart: "start-0 after:-end-6 after:bg-linear-to-r after:from-vuno-surface after:to-transparent group-hover/row:after:from-vuno-surface-1 group-data-[selected=true]/row:after:from-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]";
+        readonly stickyHeader: "sticky top-0 z-20 bg-vuno-surface";
+        readonly stickyIntersection: "z-30";
         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 tableRoot: "relative isolate overflow-auto rounded-sm border border-vuno-border";
         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 tr: "group/row 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 density: {
+            readonly compact: {
+                readonly td: "px-3 py-2 text-xs";
+                readonly th: "px-3 py-2 text-xs";
+            };
+            readonly default: {};
+        };
         readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"tableRoot", string>>;
     };
 }>;

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

@@ -1,64 +1,31 @@
-import { radiusByStep, skipLink } from "#vuno/theme/shared";
+import { radiusByStep } 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",
+    caption: "px-4 py-3 text-start text-sm font-semibold text-vuno-strong",
+    emptyCell: "px-4 py-6 text-center text-sm text-vuno-muted",
     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",
+    interactiveRow: "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-vuno-primary",
     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",
+    stickyColumn: "sticky z-10 bg-vuno-surface after:pointer-events-none after:absolute after:inset-y-0 after:w-6 group-hover/row:bg-vuno-surface-1 group-data-[selected=true]/row:bg-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]",
+    stickyColumnEnd: "end-0 after:-start-6 after:bg-linear-to-l after:from-vuno-surface after:to-transparent group-hover/row:after:from-vuno-surface-1 group-data-[selected=true]/row:after:from-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]",
+    stickyColumnStart: "start-0 after:-end-6 after:bg-linear-to-r after:from-vuno-surface after:to-transparent group-hover/row:after:from-vuno-surface-1 group-data-[selected=true]/row:after:from-[color-mix(in_oklch,var(--color-vuno-primary)_10%,var(--color-vuno-surface))]",
+    stickyHeader: "sticky top-0 z-20 bg-vuno-surface",
+    stickyIntersection: "z-30",
     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.
-     */
+    tableRoot: "relative isolate overflow-auto rounded-sm border border-vuno-border",
     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"
+    tr: "group/row border-b border-vuno-border transition-colors last:border-b-0 hover:bg-vuno-surface-1 data-[selected=true]:bg-vuno-primary/10"
   },
   variants: {
+    density: {
+      compact: { td: "px-3 py-2 text-xs", th: "px-3 py-2 text-xs" },
+      default: {}
+    },
     radius: radiusByStep("tableRoot")
   }
 });

package/dist/runtime/app/components/Table/Table.types.d.ts

@@ -0,0 +1,9 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoTableDefinition, VunoTableRow } from '#vuno/types/table';
+export type VunoTableProps<TRow extends VunoTableRow> = {
+    data: TRow[];
+    definition: VunoTableDefinition<TRow>;
+    radius?: VunoRadius;
+    ui?: VunoUi<'table'>;
+};