@r2digisolutions/ui 0.22.2 → 0.22.4

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

@@ -1,12 +1,11 @@
-<script module lang="ts">
-	import * as DataTableTypes from './core/types.js';
-	export type { DataTableTypes };
-</script>
-
 <script lang="ts" generics="T extends { id?: any }">
 	import type { Snippet } from 'svelte';
 	import { tick } from 'svelte';
-	import type { CellContext, ColumnDef, TableOptions } from './core/types.js';
+	import type {
+		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';
@@ -19,9 +18,9 @@
 
 	interface Props<T> {
 		filters?: Snippet;
-		options: TableOptions<T>;
+		options: TDataTableTableOptions<T>;
 		rowId?: (row: T) => any;
-		actions?: (rows: T[], ctx?: CellContext<T> | null) => Entry[];
+		actions?: (rows: T[], ctx?: TDataTableCellContext<T> | null) => Entry[];
 		rowActions?: (row: T) => any;
 		onRowClick?: (row: T) => void;
 		density?: 'compact' | 'normal' | 'comfortable';
@@ -52,9 +51,9 @@
 	const manager = new DataTableManager<T>(options);
 
 	let filterValues = $state<Record<string, any>>({});
-	let container: renderDivElement | null = $state(null);
+	let container: HTMLDivElement | null = $state(null);
 	let rightMenu = $state<{ open: boolean; x: number; y: number }>({ open: false, x: 0, y: 0 });
-	let rightClickContext = $state<CellContext<T> | null>(null);
+	let rightClickContext = $state<TDataTableCellContext<T> | null>(null);
 	let measuring = $state(true);
 
 	const sizeRow = $derived.by(() =>
@@ -90,11 +89,11 @@
 		if (!container) return;
 		const widths: Record<string, number> = {};
 		for (const c of manager.columns) {
-			const head = container.querySelector(`[data-dt-head="${c.id}"]`) as renderElement | null;
+			const head = container.querySelector(`[data-dt-head="${c.id}"]`) as HTMLElement | null;
 			let maxW = head ? head.offsetWidth : 0;
 			const cells = Array.from(
 				container.querySelectorAll(`[data-dt-cell="1"][data-col-id="${c.id}"]`)
-			).slice(0, SAMPLE_ROWS) as renderElement[];
+			).slice(0, SAMPLE_ROWS) as HTMLElement[];
 			for (const el of cells) maxW = Math.max(maxW, el.offsetWidth);
 			if (c.minWidth != null) maxW = Math.max(maxW, c.minWidth);
 			if (c.width != null) maxW = Math.max(maxW, c.width);
@@ -112,7 +111,7 @@
 		measureColumns();
 	});
 
-	function headerClick(c: ColumnDef<T>) {
+	function headerClick(c: TDataTableColumnDef<T>) {
 		if (!c.sortable) return;
 		manager.setSort(c.id);
 	}
@@ -133,7 +132,7 @@
 			columnIndex,
 			event: e,
 			column: columnId ? manager.getColumn(columnId) : null
-		} as CellContext<T>;
+		} as TDataTableCellContext<T>;
 	}
 
 	function selectedRows(): T[] {
@@ -197,7 +196,7 @@
 					checked={manager.state.items.length > 0 &&
 						manager.state.items.every((r) => manager.state.selected.has(rowId(r)))}
 					onclick={(e) =>
-						(e.currentTarget as renderInputElement).checked
+						(e.currentTarget as HTMLInputElement).checked
 							? manager.selectAllCurrentPage(rowId)
 							: manager.clearSelection()}
 				/>

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

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

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

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T">
-	import type { ColumnDef } from '../core/types';
+	import type { TDataTableColumnDef } from '../core/types.js';
 	import { Check, X, ExternalLink } from 'lucide-svelte';
 
 	interface Props<T> {
-		column: ColumnDef<T>;
+		column: TDataTableColumnDef<T>;
 		row: T;
 		measuring?: boolean;
 	}

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

@@ -1,6 +1,6 @@
-import type { ColumnDef } from '../core/types';
+import type { TDataTableColumnDef } from '../core/types.js';
 interface Props<T> {
-    column: ColumnDef<T>;
+    column: TDataTableColumnDef<T>;
     row: T;
     measuring?: boolean;
 }

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ColumnDef } from '../core/types';
+	import type { TDataTableColumnDef } from '../core/types.js';
 
 	interface Props {
-		columns?: ColumnDef<any>[];
+		columns?: TDataTableColumnDef<any>[];
 		visible?: string[];
 		onToggle: (id: string, show: boolean) => void;
 		buttonText?: string;

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

@@ -1,6 +1,6 @@
-import type { ColumnDef } from '../core/types';
+import type { TDataTableColumnDef } from '../core/types.js';
 interface Props {
-    columns?: ColumnDef<any>[];
+    columns?: TDataTableColumnDef<any>[];
     visible?: string[];
     onToggle: (id: string, show: boolean) => void;
     buttonText?: string;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Input from '@UI/Input/Input.svelte';
-	import type { FilterField } from '../core/filters/types';
-	import { buildFilterDefs } from '../core/filters/utils';
-	import Checkbox from '@UI/Checkbox/Checkbox.svelte';
-	import Button from '@UI/buttons/Button.svelte';
 	import { Check, X } from 'lucide-svelte';
+	import type { FilterField } from '../core/filters/types.js';
+	import { buildFilterDefs } from '../core/filters/utils.js';
+	import Input from '../../../ui/Input/Input.svelte';
+	import Checkbox from '../../../ui/Checkbox/Checkbox.svelte';
+	import Button from '../../../ui/Button/Button.svelte';
 
 	interface Props {
 		fields: FilterField<any>[];
@@ -90,16 +90,16 @@
 			<div class="space-y-3">
 				{#each fields as f}
 					{#if f.type === 'text'}
+						<label class="mb-1 block text-xs opacity-70">{f.label}</label>
 						<Input
-							label={f.label}
 							type="text"
 							placeholder={f.placeholder}
 							value={values[f.id]}
 							onchange={(e) => (values[f.id] = e)}
 						/>
 					{:else if f.type === 'number'}
+						<label class="mb-1 block text-xs opacity-70">{f.label}</label>
 						<Input
-							label={f.label}
 							type="number"
 							min={f.min}
 							max={f.max}
@@ -108,12 +108,8 @@
 							onchange={(e) => (values[f.id] = e)}
 						/>
 					{:else if f.type === 'date'}
-						<Input
-							label={f.label}
-							type="date"
-							value={values[f.id]}
-							onchange={(e) => (values[f.id] = e)}
-						/>
+						<label class="mb-1 block text-xs opacity-70">{f.label}</label>
+						<Input type="date" value={values[f.id]} onchange={(e) => (values[f.id] = e)} />
 					{:else if f.type === 'checkbox'}
 						<Checkbox checked={values[f.id]} label={f.label} onchange={(e) => (values[f.id] = e)} />
 					{:else if f.type === 'select'}

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

@@ -1,4 +1,4 @@
-import type { FilterField } from '../core/filters/types';
+import type { FilterField } from '../core/filters/types.js';
 interface Props {
     fields: FilterField<any>[];
     values?: Record<string, any>;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { FilterDef } from '../core/types';
+	import type { TDataTableFilterDef } from '../core/types.js';
 
 	interface Props {
-		filters: FilterDef<any>[];
-		onapply: (filters: FilterDef<any>[]) => void;
+		filters: TDataTableFilterDef<any>[];
+		onapply: (filters: TDataTableFilterDef<any>[]) => void;
 	}
 
 	const { filters, onapply }: Props = $props();
@@ -12,7 +12,7 @@
 
 	function submit() {
 		const base = filters.filter((f) => f.meta?.kind !== 'quick');
-		const q: FilterDef<any> = {
+		const q: TDataTableFilterDef<any> = {
 			id: 'q',
 			label: 'Búsqueda',
 			op: 'contains',

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

@@ -1,7 +1,7 @@
-import type { FilterDef } from '../core/types';
+import type { TDataTableFilterDef } from '../core/types.js';
 interface Props {
-    filters: FilterDef<any>[];
-    onapply: (filters: FilterDef<any>[]) => void;
+    filters: TDataTableFilterDef<any>[];
+    onapply: (filters: TDataTableFilterDef<any>[]) => void;
 }
 declare const QuickFilters: import("svelte").Component<Props, {}, "">;
 type QuickFilters = ReturnType<typeof QuickFilters>;

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

@@ -1,28 +1,28 @@
 import { SvelteSet } from 'svelte/reactivity';
-import type { TableOptions, TableState, VisibilityPlan } from './types.js';
+import type { TDataTableTableOptions, TDataTableTableState, TDataTableVisibilityPlan } from './types.js';
 export declare class DataTableManager<T extends {
     id?: any;
 } = any> {
-    options: TableOptions<T>;
-    state: TableState<T>;
+    options: TDataTableTableOptions<T>;
+    state: TDataTableTableState<T>;
     measured: Record<string, number>;
     reservedWidth: number;
     forcedVisible: SvelteSet<string>;
     forcedHidden: SvelteSet<string>;
     expanded: SvelteSet<any>;
     lastWidth: number | null;
-    constructor(opts: TableOptions<T>);
+    constructor(opts: TDataTableTableOptions<T>);
     setMeasuredWidths(map: Record<string, number>): void;
-    get columns(): import("./types.js").ColumnDef<T>[];
-    getColumn(id: string): import("./types.js").ColumnDef<T>;
+    get columns(): import("./types.js").TDataTableColumnDef<T>[];
+    getColumn(id: string): import("./types.js").TDataTableColumnDef<T>;
     isExpanded(id: any): boolean;
     toggleExpand(id: any): void;
     setColumnVisibility(id: string, show: boolean): void;
     setReservedWidth(n: number): void;
     clearColumnOverrides(): void;
-    visibilityPlan(containerWidth: number): VisibilityPlan;
+    visibilityPlan(containerWidth: number): TDataTableVisibilityPlan;
     private mergeWithOverrides;
-    applyVisibility(plan: VisibilityPlan): void;
+    applyVisibility(plan: TDataTableVisibilityPlan): void;
     reflowForWidth(width: number): void;
     reflow(): void;
     setPerPage(n: number): Promise<void>;

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

@@ -1,4 +1,4 @@
-import type { FilterOp } from "../types.js";
+import type { TDataTableFilterOp } from "../types.js";
 export type FilterInputType = 'text' | 'select' | 'number' | 'range' | 'checkbox' | 'multiselect' | 'date' | 'rating';
 export type SelectOption = {
     label: string;
@@ -10,7 +10,7 @@ export type FilterField<T> = {
     type: FilterInputType;
     columnId?: string;
     options?: SelectOption[];
-    op?: FilterOp;
+    op?: TDataTableFilterOp;
     placeholder?: string;
     min?: number;
     max?: number;

package/dist/components/container/DataTable/core/filters/utils.d.ts

@@ -1,3 +1,3 @@
-import type { FilterDef } from "../types.js";
+import type { TDataTableFilterDef } from "../types.js";
 import type { FilterField } from "./types.js";
-export declare function buildFilterDefs<T>(fields: FilterField<T>[], values: Record<string, any>): FilterDef<T>[];
+export declare function buildFilterDefs<T>(fields: FilterField<T>[], values: Record<string, any>): TDataTableFilterDef<T>[];

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

@@ -1,9 +1,9 @@
-export type RowId = string | number;
-export type SortDir = 'asc' | 'desc' | null;
-export type ColumnKey<T> = Extract<keyof T, string>;
+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 ColumnType = 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'badge' | 'link' | 'code';
-type BaseColumn<T> = {
+export type TDataTableColumnType = 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'badge' | 'link' | 'code';
+type TDataTableBaseColumn<T> = {
     header: string;
     width?: number;
     minWidth?: number;
@@ -13,64 +13,64 @@ type BaseColumn<T> = {
     hideOnMobile?: boolean;
     responsiveLabel?: string;
     class?: string;
-    type?: ColumnType;
+    type?: TDataTableColumnType;
     format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
     trueLabel?: string;
     falseLabel?: string;
 };
 /** Columna ligada a una key existente de T (autocomplete de keys) */
-export type KeyColumn<T, K extends ColumnKey<T> = ColumnKey<T>> = BaseColumn<T> & {
+export type TDataTableKeyColumn<T, K extends TDataTableColumnKey<T> = TDataTableColumnKey<T>> = TDataTableBaseColumn<T> & {
     id: K;
     accessor?: (row: T) => T[K];
     renderCell?: (row: T) => any;
     renderCollapsed?: (row: T) => any;
 };
 /** Columna virtual (id libre), requiere accessor explícito */
-export type VirtualColumn<T> = BaseColumn<T> & {
+export type TDataTableVirtualColumn<T> = TDataTableBaseColumn<T> & {
     id: string;
     accessor: Accessor<T>;
     renderCell?: (row: T) => any;
     renderCollapsed?: (row: T) => any;
 };
-export type ColumnDef<T> = KeyColumn<T>;
-export type FilterOp = 'equals' | 'not_equals' | 'contains' | 'starts_with' | 'ends_with' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'not_in' | 'is_empty' | 'is_not_empty';
-export type FilterDef<T> = {
+export type TDataTableColumnDef<T> = TDataTableKeyColumn<T>;
+export type TDataTableFilterOp = 'equals' | 'not_equals' | 'contains' | 'starts_with' | 'ends_with' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'not_in' | 'is_empty' | 'is_not_empty';
+export type TDataTableFilterDef<T> = {
     id: string;
     label: string;
     columnId?: string;
-    op: FilterOp;
+    op: TDataTableFilterOp;
     value?: any;
     meta?: Record<string, any>;
 };
-export type FetchResult<T> = {
+export type TDataTableFetchResult<T> = {
     items: T[];
     total: number;
     nextCursor?: string;
 };
-export type FetchParams = {
+export type TDataTableFetchParams = {
     page: number;
     perPage: number;
     cursor?: string;
     sortBy?: string | null;
-    sortDir?: SortDir;
-    filters: FilterDef<any>[];
+    sortDir?: TDataTableSortDir;
+    filters: TDataTableFilterDef<any>[];
 };
-export type LoadMode = 'local' | 'remote' | 'cursor';
-export type TableOptions<T> = {
+export type TDataTableLoadMode = 'local' | 'remote' | 'cursor';
+export type TDataTableTableOptions<T> = {
     id?: string;
-    columns: ColumnDef<T>[];
-    loadMode: LoadMode;
+    columns: TDataTableColumnDef<T>[];
+    loadMode: TDataTableLoadMode;
     data?: T[];
-    fetcher?: (params: FetchParams) => Promise<FetchResult<T>>;
+    fetcher?: (params: TDataTableFetchParams) => Promise<TDataTableFetchResult<T>>;
     perPage?: number;
     perPageOptions?: number[];
     multiSelect?: boolean;
     keepSelectionOnPageChange?: boolean;
     initialSortBy?: string | null;
-    initialSortDir?: SortDir;
-    initialFilters?: FilterDef<T>[];
+    initialSortDir?: TDataTableSortDir;
+    initialFilters?: TDataTableFilterDef<T>[];
 };
-export type TableState<T> = {
+export type TDataTableTableState<T> = {
     ready: boolean;
     items: T[];
     page: number;
@@ -78,23 +78,23 @@ export type TableState<T> = {
     total: number;
     cursor?: string;
     sortBy: string | null;
-    sortDir: SortDir;
-    filters: FilterDef<T>[];
+    sortDir: TDataTableSortDir;
+    filters: TDataTableFilterDef<T>[];
     visibleColumns: string[];
     hiddenColumns: string[];
-    selected: Set<RowId>;
+    selected: Set<TDataTableRowId>;
     loading: boolean;
     error?: string;
 };
-export type VisibilityPlan = {
+export type TDataTableVisibilityPlan = {
     visible: string[];
     hidden: string[];
 };
-export type CellContext<T> = {
+export type TDataTableCellContext<T> = {
     row: T | null;
     rowIndex: number | null;
     columnId: string | null;
-    column: ColumnDef<T> | null;
+    column: TDataTableColumnDef<T> | null;
     columnIndex: number | null;
     event: MouseEvent;
 };

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

@@ -1,5 +1,5 @@
-import type { ColumnDef, FilterOp } from './types.js';
-export declare function normalize<T>(columns: ColumnDef<T>[]): ColumnDef<T>[];
+import type { TDataTableColumnDef, TDataTableFilterOp } from './types.js';
+export declare function normalize<T>(columns: TDataTableColumnDef<T>[]): TDataTableColumnDef<T>[];
 export declare function defaultAccessor<T>(row: any, id: string): any;
 export declare function compareValues(a: any, b: any): number;
-export declare function applyFilterOp(value: any, op: FilterOp, target: any): boolean;
+export declare function applyFilterOp(value: any, op: TDataTableFilterOp, target: any): boolean;

package/dist/components/container/index.d.ts

@@ -1,2 +1,3 @@
 import DataTable from './DataTable/DataTable.svelte';
+export * from './DataTable/core/types.js';
 export { DataTable };

package/dist/components/container/index.js

@@ -1,2 +1,3 @@
 import DataTable from './DataTable/DataTable.svelte';
+export * from './DataTable/core/types.js';
 export { DataTable };

package/package.json

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