@r2digisolutions/ui 0.27.3 → 0.28.0

package/dist/components/container/DataTableShell/components/AdvancedFiltersBuilder.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+	import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-svelte';
+	import type { DataTableController } from '../core/DataTableController.svelte';
+	import type {
+		Filter,
+		FilterOperator,
+		LogicOperator,
+		QueryGroup,
+		QueryStructure,
+		TQueryFilter
+	} from '../core/types.js';
+
+	interface Props {
+		controller: DataTableController<any>;
+	}
+
+	const { controller }: Props = $props();
+
+	type LocalRule = {
+		id: string;
+		kind: 'rule';
+		field: string;
+		operator: FilterOperator;
+		value: string;
+	};
+
+	type LocalGroup = {
+		id: string;
+		kind: 'group';
+		join: LogicOperator;
+		children: Array<LocalRule | LocalGroup>;
+		expanded: boolean;
+	};
+
+	let enabled = $state(false);
+
+	let root: LocalGroup = $state({
+		id: 'root',
+		kind: 'group',
+		join: 'AND',
+		children: [],
+		expanded: true
+	});
+
+	let counter = 1;
+
+	const columns = $derived(controller.allColumns);
+
+	function createRule(): LocalRule {
+		return {
+			id: `r-${counter++}`,
+			kind: 'rule',
+			field: columns[0]?.id ?? '',
+			operator: 'contains',
+			value: ''
+		};
+	}
+
+	function createGroup(): LocalGroup {
+		return {
+			id: `g-${counter++}`,
+			kind: 'group',
+			join: 'AND',
+			children: [],
+			expanded: true
+		};
+	}
+
+	function addRule(group: LocalGroup) {
+		group.children = [...group.children, createRule()];
+	}
+
+	function addGroup(group: LocalGroup) {
+		group.children = [...group.children, createGroup()];
+	}
+
+	function removeChild(parent: LocalGroup, id: string) {
+		parent.children = parent.children.filter((c) => c.id !== id);
+	}
+
+	function toggleExpanded(group: LocalGroup) {
+		group.expanded = !group.expanded;
+	}
+
+	function buildFilters(group: LocalGroup): TQueryFilter {
+		const out: TQueryFilter = [];
+
+		for (const child of group.children) {
+			if (child.kind === 'rule') {
+				if (!child.field) continue;
+				const op = child.operator;
+				const needsValue = op !== 'is_empty' && op !== 'is_not_empty';
+				if (needsValue && !child.value) continue;
+
+				out.push([child.field, child.operator, child.value] as Filter);
+			} else {
+				const nested = buildFilters(child);
+				if (!nested.length) continue;
+
+				const g: QueryGroup = {
+					type: 'group',
+					joinOperation: child.join,
+					filters: nested
+				};
+
+				out.push(g);
+			}
+		}
+
+		return out;
+	}
+
+	function apply() {
+		const filters = buildFilters(root);
+
+		const query: QueryStructure = {
+			useQuery: enabled && filters.length > 0,
+			joinOperation: root.join,
+			filters
+		};
+
+		controller.setQuery(query);
+	}
+
+	function clear() {
+		root = {
+			id: 'root',
+			kind: 'group',
+			join: 'AND',
+			children: [],
+			expanded: true
+		};
+		enabled = false;
+
+		const query: QueryStructure = {
+			useQuery: false,
+			joinOperation: 'AND',
+			filters: []
+		};
+
+		controller.setQuery(query);
+	}
+</script>
+
+{#snippet Group({ group, parent }: { group: LocalGroup; parent: LocalGroup | null })}
+	<div
+		class={`rounded-2xl border border-neutral-200/80 bg-white/80 px-3 py-2 text-[11px] text-neutral-800 shadow-sm backdrop-blur-md dark:border-neutral-800/80 dark:bg-neutral-900/85 dark:text-neutral-100 ${
+			group.id === 'root' ? '' : 'mt-2 ml-3'
+		}`}
+	>
+		<div class="mb-2 flex items-center justify-between gap-2">
+			<div class="flex items-center gap-2">
+				<button
+					type="button"
+					onclick={() => toggleExpanded(group)}
+					class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-100/90 text-neutral-500 hover:bg-neutral-200/90 dark:bg-neutral-800/90 dark:text-neutral-300 dark:hover:bg-neutral-700/90"
+				>
+					{#if group.expanded}
+						<ChevronDown class="h-3 w-3" />
+					{:else}
+						<ChevronRight class="h-3 w-3" />
+					{/if}
+				</button>
+				<div
+					class="flex items-center gap-1 rounded-full bg-neutral-900/95 px-2 py-0.5 text-[10px] font-medium text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900"
+				>
+					<span>Grupo</span>
+					<select
+						bind:value={group.join}
+						class="ml-1 rounded-full border border-neutral-700/60 bg-neutral-900/95 px-1.5 py-0.5 text-[10px] text-neutral-50 focus:outline-none dark:border-neutral-300/80 dark:bg-neutral-50/95 dark:text-neutral-900"
+					>
+						<option value="AND">AND</option>
+						<option value="OR">OR</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="flex items-center gap-1">
+				<button
+					type="button"
+					onclick={() => addRule(group)}
+					class="inline-flex items-center gap-1 rounded-full bg-neutral-100/95 px-2 py-0.5 text-[10px] text-neutral-700 hover:bg-neutral-200/95 dark:bg-neutral-800/95 dark:text-neutral-100 dark:hover:bg-neutral-700/95"
+				>
+					<Plus class="h-3 w-3" />
+					Condición
+				</button>
+				<button
+					type="button"
+					onclick={() => addGroup(group)}
+					class="inline-flex items-center gap-1 rounded-full bg-neutral-100/95 px-2 py-0.5 text-[10px] text-neutral-700 hover:bg-neutral-200/95 dark:bg-neutral-800/95 dark:text-neutral-100 dark:hover:bg-neutral-700/95"
+				>
+					<Plus class="h-3 w-3" />
+					Grupo
+				</button>
+				{#if parent}
+					<button
+						type="button"
+						onclick={() => parent && removeChild(parent, group.id)}
+						class="inline-flex h-6 w-6 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-500 dark:hover:bg-neutral-700/80 dark:hover:text-neutral-100"
+					>
+						<Trash2 class="h-3 w-3" />
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		{#if group.expanded}
+			{#if group.children.length}
+				<div class="space-y-1">
+					{#each group.children as child (child.id)}
+						{#if child.kind === 'rule'}
+							<div
+								class="grid grid-cols-[minmax(0,1.3fr)_minmax(0,1.2fr)_minmax(0,1.5fr)_auto] items-center gap-1 rounded-2xl bg-neutral-50/95 px-2 py-1.5 dark:bg-neutral-950/80"
+							>
+								<select
+									bind:value={child.field}
+									class="w-full rounded-xl border border-neutral-200/80 bg-white/95 px-2 py-0.5 text-[10px] text-neutral-800 focus:outline-none dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50"
+								>
+									{#each columns as col}
+										<option value={col.id}>{col.label}</option>
+									{/each}
+								</select>
+								<select
+									bind:value={child.operator}
+									class="w-full rounded-xl border border-neutral-200/80 bg-white/95 px-2 py-0.5 text-[10px] text-neutral-800 focus:outline-none dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50"
+								>
+									<option value="contains">contiene</option>
+									<option value="equals">igual a</option>
+									<option value="not_equals">distinto de</option>
+									<option value="greater_than">mayor que</option>
+									<option value="less_than">menor que</option>
+									<option value="startsWith">empieza por</option>
+									<option value="endsWith">termina en</option>
+									<option value="is_empty">vacío</option>
+									<option value="is_not_empty">no vacío</option>
+									<option value="in">en lista</option>
+									<option value="not_in">fuera de lista</option>
+									<option value="not_contains">no contiene</option>
+								</select>
+								<input
+									type="text"
+									bind:value={child.value}
+									placeholder="Valor"
+									class="w-full rounded-xl border border-neutral-200/80 bg-white/95 px-2 py-0.5 text-[10px] text-neutral-800 placeholder:text-neutral-400 focus:outline-none dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50 dark:placeholder:text-neutral-500"
+									disabled={child.operator === 'is_empty' || child.operator === 'is_not_empty'}
+								/>
+								<button
+									type="button"
+									onclick={() => removeChild(group, child.id)}
+									class="ml-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-500 dark:hover:bg-neutral-700/80 dark:hover:text-neutral-100"
+								>
+									<Trash2 class="h-3 w-3" />
+								</button>
+							</div>
+						{:else}
+							{@render Group({ group: child as LocalGroup, parent: group })}
+						{/if}
+					{/each}
+				</div>
+			{:else}
+				<div class="text-[11px] text-neutral-400 dark:text-neutral-500">
+					Este grupo aún no tiene condiciones.
+				</div>
+			{/if}
+		{/if}
+	</div>
+{/snippet}
+
+<div
+	class="mt-2 rounded-2xl border border-dashed border-neutral-200/80 bg-gradient-to-br from-neutral-50/95 via-white/95 to-purple-50/80 px-3 py-3 text-[11px] text-neutral-700 shadow-[0_14px_40px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:border-neutral-800/80 dark:bg-gradient-to-br dark:from-neutral-950/95 dark:via-neutral-950/90 dark:to-purple-950/40 dark:text-neutral-200"
+>
+	<div class="mb-2 flex items-center justify-between gap-2">
+		<div>
+			<p class="text-[11px] font-semibold text-neutral-800 dark:text-neutral-100">
+				Filtro avanzado
+			</p>
+			<p class="text-[10px] text-neutral-500 dark:text-neutral-400">
+				Combina condiciones con grupos AND/OR. Los filtros simples siguen funcionando aparte.
+			</p>
+		</div>
+		<div class="flex items-center gap-2">
+			<label
+				class="flex cursor-pointer items-center gap-1 rounded-full bg-neutral-100/90 px-2 py-0.5 text-[10px] text-neutral-700 dark:bg-neutral-800/90 dark:text-neutral-100"
+			>
+				<input
+					type="checkbox"
+					bind:checked={enabled}
+					class="h-3 w-3 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
+				/>
+				<span>Activar</span>
+			</label>
+			<button
+				type="button"
+				onclick={clear}
+				class="inline-flex items-center gap-1 rounded-full bg-neutral-100 px-2.5 py-1 text-[10px] text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+			>
+				<Trash2 class="h-3 w-3" />
+				Limpiar
+			</button>
+			<button
+				type="button"
+				onclick={apply}
+				class="inline-flex items-center gap-1 rounded-full bg-purple-600 px-3 py-1 text-[10px] font-semibold text-white shadow-sm hover:bg-purple-500 dark:bg-purple-500 dark:hover:bg-purple-400"
+			>
+				Aplicar
+			</button>
+		</div>
+	</div>
+
+	{@render Group({ group: root, parent: null })}
+</div>

package/dist/components/container/DataTableShell/components/AdvancedFiltersBuilder.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableController } from '../core/DataTableController.svelte';
+interface Props {
+    controller: DataTableController<any>;
+}
+declare const AdvancedFiltersBuilder: import("svelte").Component<Props, {}, "">;
+type AdvancedFiltersBuilder = ReturnType<typeof AdvancedFiltersBuilder>;
+export default AdvancedFiltersBuilder;

package/dist/components/container/DataTableShell/components/ColumnVisibilityMenu.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { DataTableController } from '../core/DataTableController.svelte';
+	import { Eye, EyeOff, RotateCcw } from 'lucide-svelte';
+
+	interface Props {
+		controller: DataTableController<any>;
+		onClose?: () => void;
+	}
+
+	const { controller, onClose }: Props = $props();
+
+	const allColumns = $derived(controller.allColumns);
+	const visibleColumns = $derived(controller.visibleColumns);
+
+	function isVisible(id: string) {
+		return visibleColumns.some((c) => c.id === id);
+	}
+
+	function toggleColumn(id: string, visible: boolean) {
+		controller.setColumnVisibility(id, visible);
+	}
+
+	function showAll() {
+		controller.showAllColumns();
+	}
+
+	function hideAll() {
+		controller.hideAllColumns();
+	}
+
+	function resetLayout() {
+		controller.resetLayout();
+	}
+</script>
+
+<div class="space-y-2 text-xs">
+	<div class="flex items-center justify-between gap-2 pb-1">
+		<p class="text-[11px] font-semibold text-neutral-800 dark:text-neutral-100">
+			Columnas visibles
+		</p>
+		<div class="flex items-center gap-1.5">
+			<button
+				type="button"
+				onclick={showAll}
+				class="inline-flex items-center gap-1 rounded-full bg-neutral-100/90 px-2 py-0.5 text-[10px] text-neutral-700 hover:bg-neutral-200/90 dark:bg-neutral-800/90 dark:text-neutral-100 dark:hover:bg-neutral-700/90"
+			>
+				<Eye class="h-3 w-3" />
+				Todas
+			</button>
+			<button
+				type="button"
+				onclick={hideAll}
+				class="inline-flex items-center gap-1 rounded-full bg-neutral-100/90 px-2 py-0.5 text-[10px] text-neutral-700 hover:bg-neutral-200/90 dark:bg-neutral-800/90 dark:text-neutral-100 dark:hover:bg-neutral-700/90"
+			>
+				<EyeOff class="h-3 w-3" />
+				Ninguna
+			</button>
+			<button
+				type="button"
+				onclick={resetLayout}
+				class="inline-flex items-center gap-1 rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] text-neutral-50 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200"
+			>
+				<RotateCcw class="h-3 w-3" />
+				Reset
+			</button>
+		</div>
+	</div>
+
+	<div class="max-h-64 space-y-1 overflow-y-auto pr-1">
+		{#each allColumns as col}
+			<label
+				class="flex cursor-pointer items-center justify-between gap-2 rounded-2xl px-2 py-1.5 hover:bg-neutral-100/90 dark:hover:bg-neutral-800/80"
+			>
+				<div class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						checked={isVisible(col.id)}
+						onchange={(e) => toggleColumn(col.id, (e.currentTarget as HTMLInputElement).checked)}
+						class="h-3.5 w-3.5 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
+					/>
+					<div class="flex flex-col">
+						<span class="text-[11px] text-neutral-800 dark:text-neutral-100">
+							{col.label}
+						</span>
+						<span class="text-[10px] text-neutral-400 dark:text-neutral-500">
+							{col.id}
+						</span>
+					</div>
+				</div>
+				{#if col.sticky === 'left'}
+					<span
+						class="rounded-full bg-purple-100/80 px-2 py-0.5 text-[9px] font-semibold text-purple-700 dark:bg-purple-900/50 dark:text-purple-200"
+					>
+						Sticky
+					</span>
+				{/if}
+			</label>
+		{/each}
+	</div>
+
+	{#if onClose}
+		<div class="pt-1">
+			<button
+				type="button"
+				onclick={onClose}
+				class="w-full rounded-2xl bg-neutral-900 px-2 py-1.5 text-[11px] font-medium text-neutral-50 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200"
+			>
+				Cerrar
+			</button>
+		</div>
+	{/if}
+</div>

package/dist/components/container/DataTableShell/components/ColumnVisibilityMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DataTableController } from '../core/DataTableController.svelte';
+interface Props {
+    controller: DataTableController<any>;
+    onClose?: () => void;
+}
+declare const ColumnVisibilityMenu: import("svelte").Component<Props, {}, "">;
+type ColumnVisibilityMenu = ReturnType<typeof ColumnVisibilityMenu>;
+export default ColumnVisibilityMenu;

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

@@ -0,0 +1,70 @@
+<script lang="ts" generics="T">
+	import type { AnyAction, RowAction } from '../core/types.js';
+	import Submenu from './Submenu.svelte';
+
+	interface Props<T> {
+		actions: RowAction<T>[];
+		row: T;
+		onClose: () => void;
+	}
+
+	const { actions, row, onClose }: Props<T> = $props();
+
+	function isHidden(action: AnyAction<T>, r: T) {
+		return typeof action.hidden === 'function' ? action.hidden(r) : false;
+	}
+
+	function hasChildren(action: AnyAction<T>) {
+		return Array.isArray(action.children) && action.children.length > 0;
+	}
+
+	function handleClick(action: AnyAction<T>) {
+		if (action.onClick) {
+			action.onClick(row);
+		}
+		onClose();
+	}
+</script>
+
+<div
+	class="max-h-[320px] min-w-[200px] overflow-auto rounded-2xl bg-gradient-to-br from-neutral-50/98 via-white/98 to-neutral-100/98 p-1 text-xs text-neutral-900 shadow-[0_18px_55px_rgba(15,23,42,0.65)] backdrop-blur-2xl dark:from-neutral-900/98 dark:via-neutral-950/98 dark:to-neutral-950/98 dark:text-neutral-50"
+>
+	{#each actions as actionRaw, i}
+		{@const action = actionRaw as AnyAction}
+		{#if !isHidden(action, row)}
+			{@const label = typeof action.label === 'function' ? action.label(row) : action.label}
+
+			<div class="relative" data-context-host="true">
+				<button
+					type="button"
+					onclick={() => !hasChildren(action) && handleClick(action)}
+					class={`group flex w-full items-center justify-between gap-2 rounded-2xl px-2.5 py-1.5 text-[11px] transition-colors ${
+						action.danger
+							? 'text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/40'
+							: 'text-neutral-800 hover:bg-neutral-100/90 dark:text-neutral-100 dark:hover:bg-neutral-800/80'
+					}`}
+				>
+					<div class="flex items-center gap-2">
+						{#if action.icon}
+							{@const Icon = typeof action.icon === 'function' ? action.icon(row) : action.icon}
+							<Icon
+								class="h-3.5 w-3.5 text-neutral-400 group-hover:text-neutral-700 dark:text-neutral-500 dark:group-hover:text-neutral-100"
+							></Icon>
+						{/if}
+						<span class="line-clamp-1 text-left">
+							{label}
+						</span>
+					</div>
+
+					{#if hasChildren(action)}
+						<Submenu {action} {row} {onClose} />
+					{/if}
+				</button>
+			</div>
+		{/if}
+
+		{#if i < actions.length - 1}
+			<div class="mx-1 my-0.5 h-px bg-neutral-200/70 dark:bg-neutral-800/70"></div>
+		{/if}
+	{/each}
+</div>

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

@@ -0,0 +1,30 @@
+import type { RowAction } from '../core/types.js';
+interface Props<T> {
+    actions: RowAction<T>[];
+    row: T;
+    onClose: () => void;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ContextMenu: $$IsomorphicComponent;
+type ContextMenu<T> = InstanceType<typeof ContextMenu<T>>;
+export default ContextMenu;

package/dist/components/container/DataTableShell/components/DataTableFiltersSidebar.svelte.d.ts

@@ -0,0 +1,26 @@
+export default DataTableFiltersSidebar;
+type DataTableFiltersSidebar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const DataTableFiltersSidebar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/container/DataTableShell/components/DataTableFooter.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { useTable } from '../core/context.js';
+	import Pagination from './Pagination.svelte';
+
+	const controller = useTable<any>();
+
+	function rangeLabel() {
+		if (!controller.totalRows) return '';
+		const start = (controller.page - 1) * controller.pageSize + 1;
+		const end = Math.min(controller.page * controller.pageSize, controller.totalRows);
+		return `${start}–${end} de ${controller.totalRows}`;
+	}
+</script>
+
+<div
+	class="flex flex-col gap-2 border-t border-neutral-200/80 bg-neutral-50/70 px-3 py-2 text-[11px] text-neutral-600 backdrop-blur-xl dark:border-neutral-800/80 dark:bg-neutral-950/60 dark:text-neutral-300"
+>
+	<div class="flex items-center justify-between gap-2">
+		<div class="flex flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-3">
+			<span>{rangeLabel()}</span>
+			{#if controller.selectedCount}
+				<span
+					class="rounded-full bg-purple-100/80 px-2 py-0.5 text-[10px] font-medium text-purple-700 dark:bg-purple-900/50 dark:text-purple-200"
+				>
+					{controller.selectedCount} seleccionadas
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-center gap-3">
+			{#if controller.options.mode === 'pagination'}
+				<Pagination {controller} />
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/container/DataTableShell/components/DataTableFooter.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataTableFooter: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataTableFooter = InstanceType<typeof DataTableFooter>;
+export default DataTableFooter;