@r2digisolutions/ui 0.22.4 → 0.22.6

package/dist/components/container/DataTable/DataTable.svelte

@@ -2,11 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import { tick } from 'svelte';
 	import type {
+		TContextMenuEntry,
 		TDataTableCellContext,
 		TDataTableColumnDef,
 		TDataTableTableOptions
 	} from './core/types.js';
-	import type { Entry } from './components/ContextMenu.svelte';
 	import type { FilterField } from './core/filters/types.js';
 	import { DataTableManager } from './core/DataTableManager.svelte';
 	import FilterPanel from './components/FilterPanel.svelte';
@@ -20,7 +20,7 @@
 		filters?: Snippet;
 		options: TDataTableTableOptions<T>;
 		rowId?: (row: T) => any;
-		actions?: (rows: T[], ctx?: TDataTableCellContext<T> | null) => Entry[];
+		actions?: (rows: T[], ctx?: TDataTableCellContext<T> | null) => TContextMenuEntry[];
 		rowActions?: (row: T) => any;
 		onRowClick?: (row: T) => void;
 		density?: 'compact' | 'normal' | 'comfortable';
@@ -259,7 +259,7 @@
 								{#if manager.state.hiddenColumns.length > 0}
 									{#if expandIconPosition === 'start'}
 										<button
-											class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+											class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
 											title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
 											onclick={() => manager.toggleExpand(rowId(row))}
 										>
@@ -300,7 +300,7 @@
 								<div class="inline-flex items-center gap-2">
 									{#if expandIconPosition === 'end' && manager.state.hiddenColumns.length > 0}
 										<button
-											class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+											class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
 											title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
 											onclick={() => manager.toggleExpand(rowId(row))}
 										>
@@ -328,7 +328,6 @@
 							</div>
 						{/if}
 
-						<!-- COLLAPSE: fila nueva de ancho completo (evita solapes) -->
 						{#if manager.isExpanded(rowId(row))}
 							<div class="col-span-full px-3 pt-1 pb-3">
 								<div class="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
@@ -336,7 +335,7 @@
 										{#key hid}
 											{@const col = manager.columns.find((cc) => cc.id === hid)}
 											{#if col}
-												<div class="rounded-xl border p-3 dark:border-gray-800">
+												<div class="rounded-xl border border-gray-200 p-3 dark:border-gray-800">
 													<div class="mb-1 text-[11px] tracking-wide uppercase opacity-60">
 														{col.responsiveLabel ?? col.header}
 													</div>

package/dist/components/container/DataTable/DataTable.svelte.d.ts

@@ -1,12 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { TDataTableCellContext, TDataTableTableOptions } from './core/types.js';
-import type { Entry } from './components/ContextMenu.svelte';
+import type { TContextMenuEntry, TDataTableCellContext, TDataTableTableOptions } from './core/types.js';
 import type { FilterField } from './core/filters/types.js';
 interface Props<T> {
     filters?: Snippet;
     options: TDataTableTableOptions<T>;
     rowId?: (row: T) => any;
-    actions?: (rows: T[], ctx?: TDataTableCellContext<T> | null) => Entry[];
+    actions?: (rows: T[], ctx?: TDataTableCellContext<T> | null) => TContextMenuEntry[];
     rowActions?: (row: T) => any;
     onRowClick?: (row: T) => void;
     density?: 'compact' | 'normal' | 'comfortable';

package/dist/components/container/DataTable/components/ContextMenu.svelte

@@ -1,18 +1,8 @@
-<script module lang="ts">
-	export type Entry = {
-		id: string;
-		label?: string;
-		shortcut?: string;
-		onClick?: () => void;
-		disabled?: boolean;
-		children?: Entry[];
-		kind?: 'item' | 'divider' | 'label';
-	};
-</script>
-
 <script lang="ts">
+	import type { TContextMenuEntry } from '../core/types.js';
+
 	type Props = {
-		items?: Entry[];
+		items?: TContextMenuEntry[];
 		x?: number;
 		y?: number;
 		open?: boolean;
@@ -30,7 +20,7 @@
 		context = null
 	}: Props = $props();
 
-	let stack = $state<{ label: string; items: Entry[] }[]>([]);
+	let stack = $state<{ label: string; items: TContextMenuEntry[] }[]>([]);
 	let q = $state('');
 
 	const current = $derived(stack.length ? stack[stack.length - 1] : { label: title, items });
@@ -41,11 +31,11 @@
 		q = '';
 	}
 
-	function hasChildren(it: Entry) {
+	function hasChildren(it: TContextMenuEntry) {
 		return !!(it.children && it.children.length);
 	}
 
-	function clickItem(it: Entry) {
+	function clickItem(it: TContextMenuEntry) {
 		if (it.disabled) return;
 		if (hasChildren(it)) {
 			stack.push({ label: it.label ?? '', items: it.children! });
@@ -58,7 +48,7 @@
 		}
 	}
 
-	function matches(it: Entry, query: string): boolean {
+	function matches(it: TContextMenuEntry, query: string): boolean {
 		if (it.kind === 'divider') return true;
 		const lbl = (it.label ?? '').toLowerCase();
 		if (lbl.includes(query)) return true;
@@ -72,7 +62,7 @@
 		let arr = query ? list.filter((it) => matches(it, query)) : list.slice();
 
 		// limpiar divisores (sin duplicados, ni al principio/fin)
-		const out: Entry[] = [];
+		const out: TContextMenuEntry[] = [];
 		let prevDiv = false;
 		for (const it of arr) {
 			if (it.kind === 'divider') {

package/dist/components/container/DataTable/components/ContextMenu.svelte.d.ts

@@ -1,14 +1,6 @@
-export type Entry = {
-    id: string;
-    label?: string;
-    shortcut?: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    children?: Entry[];
-    kind?: 'item' | 'divider' | 'label';
-};
+import type { TContextMenuEntry } from '../core/types.js';
 type Props = {
-    items?: Entry[];
+    items?: TContextMenuEntry[];
     x?: number;
     y?: number;
     open?: boolean;

package/dist/components/container/DataTable/core/types.d.ts

@@ -1,7 +1,7 @@
 export type TDataTableRowId = string | number;
 export type TDataTableSortDir = 'asc' | 'desc' | null;
 export type TDataTableColumnKey<T> = Extract<keyof T, string>;
-export type Accessor<T, R = any> = (row: T) => R;
+export type TDataTableAccessor<T, R = any> = (row: T) => R;
 export type TDataTableColumnType = 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'badge' | 'link' | 'code';
 type TDataTableBaseColumn<T> = {
     header: string;
@@ -28,7 +28,7 @@ export type TDataTableKeyColumn<T, K extends TDataTableColumnKey<T> = TDataTable
 /** Columna virtual (id libre), requiere accessor explícito */
 export type TDataTableVirtualColumn<T> = TDataTableBaseColumn<T> & {
     id: string;
-    accessor: Accessor<T>;
+    accessor: TDataTableAccessor<T>;
     renderCell?: (row: T) => any;
     renderCollapsed?: (row: T) => any;
 };
@@ -98,4 +98,13 @@ export type TDataTableCellContext<T> = {
     columnIndex: number | null;
     event: MouseEvent;
 };
+export type TContextMenuEntry = {
+    id: string;
+    label?: string;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    children?: TContextMenuEntry[];
+    kind?: 'item' | 'divider' | 'label';
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.22.4",
+	"version": "0.22.6",
 	"private": false,
 	"packageManager": "bun@1.2.22",
 	"publishConfig": {