@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/Table/internal/useVunoTable.js

@@ -0,0 +1,153 @@
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { clampPage } from "#vuno/utils/pagination";
+import { getPath } from "#vuno/utils/path";
+import { hasActiveQuery, hasFilterValue } from "#vuno/components/Table/internal/query";
+export function useVunoTable(options) {
+  const { query, selection } = options;
+  const definition = computed(() => options.definition());
+  const total = computed(() => options.total());
+  const rowKey = computed(() => definition.value.rowKey ?? "id");
+  const pageSizes = computed(() => definition.value.pageSizes ?? [25, 50, 100]);
+  const searchable = computed(() => definition.value.searchable ?? true);
+  const paginated = computed(() => definition.value.paginated ?? true);
+  const getRowId = (row) => String(getPath(row, rowKey.value) ?? "");
+  const search = ref(query.value.search);
+  let searchTimer;
+  watch(search, (value) => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      if (value === query.value.search) return;
+      query.value = { ...query.value, page: 1, search: value };
+    }, 300);
+  });
+  watch(
+    () => query.value.search,
+    (value) => {
+      if (value !== search.value) search.value = value;
+    }
+  );
+  onBeforeUnmount(() => clearTimeout(searchTimer));
+  function clearSearch() {
+    clearTimeout(searchTimer);
+    search.value = "";
+    query.value = { ...query.value, page: 1, search: "" };
+  }
+  function sortDirectionFor(key) {
+    return query.value.sort?.column === key ? query.value.sort.direction : null;
+  }
+  function toggleSort(key) {
+    const current = sortDirectionFor(key);
+    const sort = current === null ? { column: key, direction: "asc" } : current === "asc" ? { column: key, direction: "desc" } : null;
+    query.value = { ...query.value, page: 1, sort };
+  }
+  const filtersOpen = ref(false);
+  const filterState = ref({ ...query.value.filters });
+  watch(
+    () => query.value.filters,
+    (value) => {
+      filterState.value = { ...value };
+    },
+    { deep: true }
+  );
+  const filtersDefinition = computed(() => ({
+    sections: [{ id: "filters", fields: definition.value.filters ?? [] }]
+  }));
+  const activeFilters = computed(
+    () => (definition.value.filters ?? []).filter((field) => hasFilterValue(query.value.filters[field.name])).map((field) => {
+      const value = query.value.filters[field.name];
+      const option = "items" in field ? field.items?.find((item) => String(item.value) === String(value)) : void 0;
+      return {
+        name: field.name,
+        label: field.label ?? field.name,
+        value: option?.label ?? String(value)
+      };
+    })
+  );
+  function applyFilters() {
+    query.value = { ...query.value, filters: { ...filterState.value }, page: 1 };
+    filtersOpen.value = false;
+  }
+  function clearFilters() {
+    filterState.value = {};
+    query.value = { ...query.value, filters: {}, page: 1 };
+    filtersOpen.value = false;
+  }
+  function removeFilter(name) {
+    const filters = { ...query.value.filters };
+    delete filters[name];
+    query.value = { ...query.value, filters, page: 1 };
+  }
+  const isFiltered = computed(() => hasActiveQuery(query.value));
+  function clearQuery() {
+    clearTimeout(searchTimer);
+    search.value = "";
+    filterState.value = {};
+    filtersOpen.value = false;
+    query.value = { ...query.value, filters: {}, page: 1, search: "" };
+  }
+  const clearSelection = () => {
+    selection.value = [];
+  };
+  const alignClass = (align) => align === "end" ? "text-end" : align === "center" ? "text-center" : "";
+  const columns = computed(
+    () => definition.value.columns.map((column) => ({
+      cellClass: [alignClass(column.align), column.class].filter(Boolean).join(" "),
+      column,
+      headerClass: [alignClass(column.align), column.width].filter(Boolean).join(" "),
+      key: column.key,
+      // La columna de acciones no lleva rótulo salvo que se pida uno.
+      label: column.type === "actions" ? column.label ?? "" : column.label ?? column.key,
+      sortable: column.sortable ?? false
+    }))
+  );
+  const lastPage = computed(() => Math.max(1, Math.ceil(total.value / query.value.pageSize)));
+  watch(
+    [total, lastPage],
+    () => {
+      const page = clampPage(query.value.page, total.value, query.value.pageSize);
+      if (page === query.value.page) return;
+      query.value = { ...query.value, page };
+    },
+    // `immediate` es imprescindible: con el listado resuelto en servidor,
+    // `total` ya viene puesto en el primer render y nunca cambia, así que
+    // un `watch` normal no llegaría a ejecutarse en el caso que corrige.
+    { immediate: true }
+  );
+  const shownPage = computed(() => Math.min(query.value.page, lastPage.value));
+  const rangeStart = computed(() => total.value === 0 ? 0 : (shownPage.value - 1) * query.value.pageSize + 1);
+  const rangeEnd = computed(() => Math.min(shownPage.value * query.value.pageSize, total.value));
+  function goToPage(page) {
+    query.value = { ...query.value, page };
+  }
+  function setPageSize(size) {
+    query.value = { ...query.value, page: 1, pageSize: size };
+  }
+  return {
+    activeFilters,
+    applyFilters,
+    clearFilters,
+    clearQuery,
+    clearSearch,
+    clearSelection,
+    columns,
+    filtersDefinition,
+    filtersOpen,
+    filterState,
+    getRowId,
+    goToPage,
+    isFiltered,
+    lastPage,
+    pageSizes,
+    paginated,
+    rangeEnd,
+    rangeStart,
+    removeFilter,
+    search,
+    searchable,
+    setPageSize,
+    shownPage,
+    sortDirectionFor,
+    toggleSort,
+    total
+  };
+}

package/dist/runtime/app/components/Table/internal/useVunoTableSelection.d.ts

@@ -0,0 +1,21 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { VunoTableDefinition, VunoTableRow } from '#vuno/types/table';
+import type { VunoTableRenderColumn } from './useVunoTable.js';
+type VunoTableSelectionOptions<TRow extends VunoTableRow> = {
+    columns: ComputedRef<VunoTableRenderColumn<TRow>[]>;
+    selection: Ref<(number | string)[]>;
+    definition: () => VunoTableDefinition<TRow>;
+    getRowId: (row: TRow) => string;
+    rowName: () => string;
+    rows: () => TRow[];
+};
+/** Selección de la página actual y nombres accesibles de sus filas. */
+export declare function useVunoTableSelection<TRow extends VunoTableRow>(options: VunoTableSelectionOptions<TRow>): {
+    allSelected: ComputedRef<boolean>;
+    isSelected: (row: TRow) => boolean;
+    rowLabel: (row: TRow, index: number) => string;
+    someSelected: ComputedRef<boolean>;
+    toggleAll: (checked: boolean) => void;
+    toggleRow: (row: TRow, checked: boolean) => void;
+};
+export {};

package/dist/runtime/app/components/Table/internal/useVunoTableSelection.js

@@ -0,0 +1,29 @@
+import { computed } from "vue";
+import { getPath } from "#vuno/utils/path";
+import { resolveColumnValue } from "./column.js";
+import { addKeys, hasKey, removeKeys } from "./selection.js";
+export function useVunoTableSelection(options) {
+  const isSelected = (row) => hasKey(options.selection.value, options.getRowId(row));
+  const labelColumn = computed(() => options.columns.value.find((item) => item.column.type === "text"));
+  function rowLabel(row, index) {
+    const declared = options.definition().rowLabel;
+    let value;
+    if (declared === void 0) value = labelColumn.value && resolveColumnValue(labelColumn.value.column, row);
+    else value = typeof declared === "function" ? declared(row) : getPath(row, declared);
+    return asText(value) || `${options.rowName()} ${index + 1}`;
+  }
+  function toggleRow(row, checked) {
+    const keys = [options.getRowId(row)];
+    options.selection.value = checked ? addKeys(options.selection.value, keys) : removeKeys(options.selection.value, keys);
+  }
+  function toggleAll(checked) {
+    const keys = options.rows().map((row) => options.getRowId(row));
+    options.selection.value = checked ? addKeys(options.selection.value, keys) : removeKeys(options.selection.value, keys);
+  }
+  const allSelected = computed(() => options.rows().length > 0 && options.rows().every((row) => isSelected(row)));
+  const someSelected = computed(() => !allSelected.value && options.rows().some((row) => isSelected(row)));
+  return { allSelected, isSelected, rowLabel, someSelected, toggleAll, toggleRow };
+}
+function asText(value) {
+  return typeof value === "string" || typeof value === "number" ? String(value).trim() : "";
+}

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

@@ -0,0 +1,49 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoTabItem } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * Las pestañas, escritas a mano sobre el patrón de ARIA.
+ *
+ * No hacía falta una librería: aquí no hay nada que colocar, solo marcado y
+ * teclado. Lo que sí hay que hacer bien —y lo que la versión anterior no
+ * hacía— es el **tabindex móvil**: una sola pestaña está en el recorrido del
+ * tabulador, la activa, y dentro de la lista se anda con las flechas. Es lo
+ * que distingue una lista de pestañas de una fila de botones, donde el
+ * tabulador para en cada una.
+ *
+ * La activación es **manual**: las flechas mueven el foco y la selección
+ * espera a `Enter` o al espacio. Es una decisión explícita del contrato:
+ * cambiarla alteraría cómo se cargan los paneles costosos.
+ */
+type Props = {
+    items: VunoTabItem[];
+    size?: VunoSize;
+    ui?: VunoUi<'tabs'>;
+};
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** El contenido de cada pestaña; recibe su item. */
+    content?: (props: {
+        item: VunoTabItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    size: VunoSize;
+    ui: VunoUi<"tabs">;
+}, {}, {}, {}, 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/Tabs/Tabs.theme.d.ts

@@ -0,0 +1,32 @@
+export declare const tabsTheme: Record<"tabs", {
+    /**
+     * Pestañas con subrayado en la activa. El `-mb-px` hace que ese subrayado
+     * se coma la línea de la lista en vez de quedar encima de ella.
+     */
+    readonly slots: {
+        readonly content: "w-full";
+        readonly icon: "size-4 shrink-0";
+        readonly list: "flex items-center gap-1 border-b border-vuno-border";
+        readonly root: "flex w-full flex-col";
+        readonly trigger: "-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 border-transparent px-3 py-2 font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) data-[state=active]:border-vuno-primary data-[state=active]:text-vuno-primary";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly trigger: "text-xs";
+            };
+            readonly sm: {
+                readonly trigger: "text-sm";
+            };
+            readonly md: {
+                readonly trigger: "text-sm";
+            };
+            readonly lg: {
+                readonly trigger: "text-base";
+            };
+            readonly xl: {
+                readonly trigger: "text-base";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,23 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tabsTheme = defineTheme("tabs", {
+  /**
+   * Pestañas con subrayado en la activa. El `-mb-px` hace que ese subrayado
+   * se coma la línea de la lista en vez de quedar encima de ella.
+   */
+  slots: {
+    content: "w-full",
+    icon: "size-4 shrink-0",
+    list: "flex items-center gap-1 border-b border-vuno-border",
+    root: "flex w-full flex-col",
+    trigger: "-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 border-transparent px-3 py-2 font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) data-[state=active]:border-vuno-primary data-[state=active]:text-vuno-primary"
+  },
+  variants: {
+    size: {
+      xs: { trigger: "text-xs" },
+      sm: { trigger: "text-sm" },
+      md: { trigger: "text-sm" },
+      lg: { trigger: "text-base" },
+      xl: { trigger: "text-base" }
+    }
+  }
+});

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

@@ -0,0 +1,119 @@
+<script setup>
+import { computed, inject, useId, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { vunoDirectionInjectionKey } from "#vuno/internal/keys";
+import Badge from "#vuno/components/Badge/Badge.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoTabs" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  items: { type: Array, required: true },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme(
+  "tabs",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const uid = useId().replaceAll(/[^\w-]/g, "");
+const list = useTemplateRef("list");
+const active = computed(() => {
+  const current = props.items.find((item) => item.value === model.value);
+  return current?.value ?? props.items[0]?.value;
+});
+const safe = (value) => value.replaceAll(/[^\w-]/g, "");
+const tabId = (value) => `${uid}-tab-${safe(value)}`;
+const panelId = (value) => `${uid}-panel-${safe(value)}`;
+function focusTab(index) {
+  const total = props.items.length;
+  if (total === 0) return;
+  const item = props.items[(index + total) % total];
+  if (item) list.value?.querySelector(`#${tabId(item.value)}`)?.focus();
+}
+const direction = inject(vunoDirectionInjectionKey, () => "ltr");
+function onKeydown(event, index) {
+  const forward = direction() === "rtl" ? -1 : 1;
+  const keys = {
+    ArrowLeft: () => focusTab(index - forward),
+    ArrowRight: () => focusTab(index + forward),
+    End: () => focusTab(props.items.length - 1),
+    Home: () => focusTab(0)
+  };
+  const handler = keys[event.key];
+  if (!handler) return;
+  event.preventDefault();
+  handler();
+}
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div
+            ref="list"
+            aria-orientation="horizontal"
+            :class="ui.list"
+            role="tablist"
+        >
+            <button
+                v-for="(item, index) in props.items"
+                :id="tabId(item.value)"
+                :key="item.value"
+                :aria-controls="panelId(item.value)"
+                :aria-selected="item.value === active"
+                :class="ui.trigger"
+                :data-state="item.value === active ? 'active' : 'inactive'"
+                role="tab"
+                :tabindex="item.value === active ? 0 : -1"
+                type="button"
+                @click="model = item.value"
+                @keydown="onKeydown($event, index)"
+            >
+                <Icon
+                    v-if="item.icon"
+                    :class="ui.icon"
+                    :name="item.icon"
+                />
+
+                <span class="truncate">{{ item.label }}</span>
+
+                <!--
+                    El contador de errores va aquí y no al lado del formulario:
+                    un fallo en una pestaña que no estás mirando deja el envío
+                    parado sin explicación visible.
+                -->
+                <Badge
+                    v-if="item.badge"
+                    :color="item.badge.color ?? 'error'"
+                    :label="item.badge.label"
+                    size="xs"
+                />
+            </button>
+        </div>
+
+        <!--
+            Los paneles que no se ven siguen montados y solo se ocultan, y no es
+            un detalle: las pestañas de un formulario llevan campos dentro, y
+            desmontar los de la que no se mira tira su valor y sus errores. Con
+            `hidden` lo que no se ve tampoco se anuncia ni se tabula, que es
+            justo lo que hace falta.
+        -->
+        <div
+            v-for="item in props.items"
+            :id="panelId(item.value)"
+            :key="item.value"
+            :aria-labelledby="tabId(item.value)"
+            :class="ui.content"
+            :data-state="item.value === active ? 'active' : 'inactive'"
+            :hidden="item.value !== active"
+            role="tabpanel"
+            tabindex="0"
+        >
+            <slot
+                :item="item"
+                name="content"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,49 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoTabItem } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * Las pestañas, escritas a mano sobre el patrón de ARIA.
+ *
+ * No hacía falta una librería: aquí no hay nada que colocar, solo marcado y
+ * teclado. Lo que sí hay que hacer bien —y lo que la versión anterior no
+ * hacía— es el **tabindex móvil**: una sola pestaña está en el recorrido del
+ * tabulador, la activa, y dentro de la lista se anda con las flechas. Es lo
+ * que distingue una lista de pestañas de una fila de botones, donde el
+ * tabulador para en cada una.
+ *
+ * La activación es **manual**: las flechas mueven el foco y la selección
+ * espera a `Enter` o al espacio. Es una decisión explícita del contrato:
+ * cambiarla alteraría cómo se cargan los paneles costosos.
+ */
+type Props = {
+    items: VunoTabItem[];
+    size?: VunoSize;
+    ui?: VunoUi<'tabs'>;
+};
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** El contenido de cada pestaña; recibe su item. */
+    content?: (props: {
+        item: VunoTabItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    size: VunoSize;
+    ui: VunoUi<"tabs">;
+}, {}, {}, {}, 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/Tooltip/Tooltip.d.vue.ts

@@ -0,0 +1,40 @@
+import type { VunoPortalTarget } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * El aviso que aparece al posar el ratón o al llegar con el teclado.
+ *
+ * Las cuatro cosas fáciles de dejarse y difíciles de notar que faltan son
+ * el retardo al abrir, cerrarlo con Escape, **abrirlo también al enfocar**
+ * —si solo abre al posar el ratón, para quien navega con el teclado no
+ * existe— y describir el disparador con `aria-describedby`, que es lo que
+ * hace que un lector de pantalla lo lea en vez de dejarlo suelto en la
+ * página. Las cuatro están abajo, cada una con su prueba.
+ */
+type Props = {
+    /** Milisegundos antes de abrirse al posar el ratón. */
+    delay?: number;
+    disabled?: boolean;
+    /** Dónde montar el aviso. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+    side?: 'bottom' | 'left' | 'right' | 'top';
+    text?: string;
+    ui?: VunoUi<'tooltip'>;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    ui: VunoUi<"tooltip">;
+    delay: number;
+    portal: VunoPortalTarget;
+    side: "bottom" | "left" | "right" | "top";
+}, {}, {}, {}, 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/Tooltip/Tooltip.theme.d.ts

@@ -0,0 +1,12 @@
+export declare const tooltipTheme: Record<"tooltip", {
+    /**
+     * El área de texto. Comparte caja con el input, así que aquí solo queda el
+     * `<textarea>`: transparente, sin contorno propio y con su relleno vertical
+     * —el de la caja es horizontal, porque un control de una línea se centra y
+     * este no—.
+     */
+    readonly slots: {
+        readonly arrow: "size-2 rotate-45 bg-vuno-surface-inverse";
+        readonly content: "z-50 max-w-xs rounded-sm bg-vuno-surface-inverse px-2 py-1 text-xs font-medium text-vuno-inverse shadow-sm select-none";
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tooltipTheme = defineTheme("tooltip", {
+  /**
+   * El área de texto. Comparte caja con el input, así que aquí solo queda el
+   * `<textarea>`: transparente, sin contorno propio y con su relleno vertical
+   * —el de la caja es horizontal, porque un control de una línea se centra y
+   * este no—.
+   */
+  slots: {
+    arrow: "size-2 rotate-45 bg-vuno-surface-inverse",
+    content: "z-50 max-w-xs rounded-sm bg-vuno-surface-inverse px-2 py-1 text-xs font-medium text-vuno-inverse shadow-sm select-none"
+  }
+});