@r2digisolutions/ui 0.27.3 → 0.28.0

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

@@ -0,0 +1,30 @@
+interface Props {
+    density: 'comfortable' | 'compact';
+    viewMode: 'list' | 'grid';
+    onDensityChange?: (d: 'comfortable' | 'compact') => void;
+    onViewModeChange?: (m: 'list' | 'grid') => void;
+}
+declare function $$render<T>(): {
+    props: Props;
+    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 DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<T> = InstanceType<typeof DataTableToolbar<T>>;
+export default DataTableToolbar;

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

@@ -0,0 +1,117 @@
+<script lang="ts" generics="T">
+	import { ChevronLeft } from 'lucide-svelte';
+	import type { DataTableController } from '../core/DataTableController.svelte';
+
+	interface Props<T> {
+		controller: DataTableController<T>;
+	}
+
+	const { controller }: Props<T> = $props();
+
+	const pageWindow = 5;
+
+	const pages = $derived.by(() => {
+		const total = controller.totalPages;
+		const current = controller.page;
+		if (total <= 1) return [1];
+		const half = Math.floor(pageWindow / 2);
+		let start = Math.max(1, current - half);
+		let end = Math.min(total, start + pageWindow - 1);
+		if (end - start + 1 < pageWindow) {
+			start = Math.max(1, end - pageWindow + 1);
+		}
+		const arr: number[] = [];
+		for (let i = start; i <= end; i++) arr.push(i);
+		return arr;
+	});
+</script>
+
+<div
+	class="flex items-center justify-between gap-3 text-[11px] text-neutral-400 md:text-neutral-600"
+>
+	<div class="flex items-center gap-2">
+		<span>
+			Mostrando
+			<span class="font-semibold text-neutral-100 md:text-neutral-900 dark:md:text-neutral-50">
+				{controller.currentRows.length}
+			</span>
+			de
+			<span class="font-semibold text-neutral-100 md:text-neutral-900 dark:md:text-neutral-50">
+				{controller.totalFilteredRows}
+			</span>
+			resultados
+		</span>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<button
+			type="button"
+			class="inline-flex h-7 items-center rounded-full border border-neutral-600/70 bg-neutral-950/80 px-2 text-[11px] text-neutral-300 disabled:opacity-40 md:bg-white/90 md:text-neutral-700 dark:md:bg-neutral-900 dark:md:text-neutral-100"
+			onclick={() => controller.setPage(controller.page - 1)}
+			disabled={controller.page <= 1}
+		>
+			<ChevronLeft class="h-3 w-3" />
+		</button>
+
+		<div class="flex items-center gap-1">
+			{#if pages[0] > 1}
+				<button
+					type="button"
+					class="h-7 min-w-[1.75rem] rounded-full border border-neutral-600/70 bg-neutral-950/80 px-2 text-[11px] text-neutral-300 hover:border-purple-500/70 hover:text-purple-300 md:bg-white/90 md:text-neutral-700 md:hover:text-purple-600 dark:md:bg-neutral-900 dark:md:text-neutral-100"
+					onclick={() => controller.setPage(1)}
+				>
+					1
+				</button>
+				<span class="px-1 text-[10px] text-neutral-500">…</span>
+			{/if}
+
+			{#each pages as page}
+				<button
+					type="button"
+					class={`h-7 min-w-[1.75rem] rounded-full px-2 text-[11px] ${
+						page === controller.page
+							? 'bg-purple-500 text-white shadow-sm'
+							: 'border border-neutral-600/70 bg-neutral-950/80 text-neutral-300 hover:border-purple-500/70 hover:text-purple-300 md:bg-white/90 md:text-neutral-700 md:hover:text-purple-600 dark:md:bg-neutral-900 dark:md:text-neutral-100'
+					}`}
+					onclick={() => controller.setPage(page)}
+				>
+					{page}
+				</button>
+			{/each}
+
+			{#if pages[pages.length - 1] < controller.totalPages}
+				<span class="px-1 text-[10px] text-neutral-500">…</span>
+				<button
+					type="button"
+					class="h-7 min-w-[1.75rem] rounded-full border border-neutral-600/70 bg-neutral-950/80 px-2 text-[11px] text-neutral-300 hover:border-purple-500/70 hover:text-purple-300 md:bg-white/90 md:text-neutral-700 md:hover:text-purple-600 dark:md:bg-neutral-900 dark:md:text-neutral-100"
+					onclick={() => controller.setPage(controller.totalPages)}
+				>
+					{controller.totalPages}
+				</button>
+			{/if}
+		</div>
+
+		<button
+			type="button"
+			class="inline-flex h-7 items-center rounded-full border border-neutral-600/70 bg-neutral-950/80 px-2 text-[11px] text-neutral-300 disabled:opacity-40 md:bg-white/90 md:text-neutral-700 dark:md:bg-neutral-900 dark:md:text-neutral-100"
+			onclick={() => controller.setPage(controller.page + 1)}
+			disabled={controller.page >= controller.totalPages}
+		>
+			›
+		</button>
+
+		<select
+			class="rounded-2xl border border-neutral-200/80 bg-white/70 px-2 py-1 text-[11px] text-neutral-700 shadow-sm dark:border-neutral-700/80 dark:bg-neutral-900/80 dark:text-neutral-100"
+			onchange={(e) => {
+				const value = Number((e.currentTarget as HTMLSelectElement).value);
+				controller.setPageSize(value);
+			}}
+		>
+			{#each [10, 20, 50, 100] as size}
+				<option value={size} selected={size === controller.pageSize}>
+					{size} / página
+				</option>
+			{/each}
+		</select>
+	</div>
+</div>

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

@@ -0,0 +1,28 @@
+import type { DataTableController } from '../core/DataTableController.svelte';
+interface Props<T> {
+    controller: DataTableController<T>;
+}
+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 Pagination: $$IsomorphicComponent;
+type Pagination<T> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

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

@@ -0,0 +1,109 @@
+<script lang="ts" generics="T">
+	import { ChevronRight } from 'lucide-svelte';
+	import type { AnyAction } from '../core/types.js';
+
+	let active = $state(false);
+	let popoverEl: HTMLDivElement | null = null;
+	let anchorEl: HTMLButtonElement | null = null;
+
+	interface SubmenuProps<T> {
+		action: AnyAction<T>;
+		row: T;
+		onClose: () => void;
+	}
+
+	const { action, row, onClose }: SubmenuProps<T> = $props();
+
+	function openSubmenu(event: MouseEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!popoverEl || !anchorEl) return;
+
+		popoverEl.style.position = 'fixed';
+		popoverEl.showPopover();
+		active = true;
+
+		const aRect = anchorEl.getBoundingClientRect();
+		const pRect = popoverEl.getBoundingClientRect();
+		const margin = 8;
+
+		let left = aRect.right + 4;
+		let top = aRect.top;
+
+		if (left + pRect.width + margin > window.innerWidth) {
+			left = aRect.left - pRect.width - 4;
+		}
+		if (top + pRect.height + margin > window.innerHeight) {
+			top = Math.max(margin, window.innerHeight - pRect.height - margin);
+		}
+
+		popoverEl.style.left = `${left}px`;
+		popoverEl.style.top = `${top}px`;
+	}
+
+	function closeSubmenu() {
+		active = false;
+		popoverEl?.hidePopover();
+	}
+
+	function handleChildClick(child: AnyAction<T>) {
+		if (child.onClick) {
+			child.onClick(row);
+		}
+		onClose();
+	}
+
+	function isHidden(action: AnyAction<T>, r: any) {
+		return typeof action.hidden === 'function' ? action.hidden(r) : false;
+	}
+</script>
+
+<button
+	bind:this={anchorEl}
+	type="button"
+	onclick={openSubmenu}
+	class="ml-1 flex h-5 w-5 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"
+>
+	<ChevronRight class="h-3 w-3" />
+</button>
+
+<div
+	bind:this={popoverEl}
+	popover="manual"
+	data-context-host="true"
+	class="z-[1400] max-w-xs min-w-[180px] rounded-2xl border border-neutral-200/80 bg-neutral-50/98 p-1 text-[11px] text-neutral-900 shadow-[0_18px_55px_rgba(15,23,42,0.70)] backdrop-blur-2xl dark:border-neutral-700/80 dark:bg-neutral-900/98 dark:text-neutral-50"
+	onbeforetoggle={(e) => {
+		if ((e as any).newState === 'closed') active = false;
+	}}
+>
+	{#each action.children ?? [] as childRaw, j}
+		{@const child = childRaw as AnyAction}
+		{#if !isHidden(child, row)}
+			{@const label = typeof child.label === 'function' ? child.label(row) : child.label}
+			<button
+				type="button"
+				onclick={() => handleChildClick(child)}
+				class={`flex w-full items-center justify-between gap-2 rounded-2xl px-2.5 py-1.5 text-[11px] ${
+					child.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 child.icon}
+						{@const Icon = typeof child.icon === 'function' ? child.icon(row) : child.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"
+						/>
+					{/if}
+					<span class="line-clamp-1 text-left">
+						{label}
+					</span>
+				</div>
+			</button>
+		{/if}
+		{#if j < (action.children?.length ?? 0) - 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/Submenu.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { AnyAction } from '../core/types.js';
+interface SubmenuProps<T> {
+    action: AnyAction<T>;
+    row: T;
+    onClose: () => void;
+}
+declare function $$render<T>(): {
+    props: SubmenuProps<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 Submenu: $$IsomorphicComponent;
+type Submenu<T> = InstanceType<typeof Submenu<T>>;
+export default Submenu;

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

@@ -0,0 +1,26 @@
+export default Toolbar;
+type Toolbar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toolbar: $$__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/core/DataTableController.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { DataTableOptions, SortDirection } from './DataTableEngine.svelte';
+import type { QueryStructure } from './filters-types.js';
+export declare class DataTableController<T> {
+    #private;
+    constructor(options: DataTableOptions<T>);
+    get options(): DataTableOptions<T>;
+    get rows(): T[];
+    get processedRows(): T[];
+    get currentRows(): T[];
+    get allColumns(): import("./types.js").ColumnDef<T>[];
+    get visibleColumns(): import("./types.js").ColumnDef<T>[];
+    get mainColumns(): import("./types.js").ColumnDef<T>[];
+    get overflowColumns(): import("./types.js").ColumnDef<T>[];
+    get loading(): boolean;
+    get page(): number;
+    get pageSize(): number;
+    get totalPages(): number;
+    get totalRows(): number;
+    get totalFilteredRows(): number;
+    get sortColumn(): keyof T | null;
+    get sortDirection(): SortDirection | null;
+    get sort(): {
+        columnId: keyof T;
+        direction: SortDirection;
+    } | null;
+    get search(): string;
+    get selectedIds(): Set<string>;
+    get selectedCount(): number;
+    get multiSelect(): boolean;
+    get allVisibleSelected(): boolean;
+    get someVisibleSelected(): boolean;
+    get isAllPageSelected(): boolean;
+    get query(): QueryStructure | null;
+    getRowId(row: T, index: number): string;
+    setRows(rows: T[]): this;
+    setLoading(v: boolean): void;
+    setSearch(term: string): void;
+    setQuery(q: QueryStructure | null): void;
+    setSort(columnId: keyof T | null, direction?: SortDirection): void;
+    toggleSort(columnId: keyof T): void;
+    setPage(page: number): void;
+    setPageSize(size: number): void;
+    clearSelection(): void;
+    toggleRowSelection(id: string): void;
+    selectAllVisible(): void;
+    unselectAllVisible(): void;
+    selectAllCurrentPage(): void;
+    unselectAllCurrentPage(): void;
+    isRowSelected(id: string): boolean;
+    setColumnHidden(id: keyof T, hidden: boolean): void;
+    resizeColumn(id: keyof T, width: number): void;
+    getColumnWidth(id: keyof T): number;
+    resetLayout(): void;
+}

package/dist/components/container/DataTableShell/core/DataTableController.svelte.js

@@ -0,0 +1,148 @@
+import { DataTableEngine as Engine } from './DataTableEngine.svelte';
+export class DataTableController {
+    #engine;
+    #query = null;
+    constructor(options) {
+        this.#engine = new Engine(options);
+    }
+    get options() {
+        return this.#engine.options;
+    }
+    get rows() {
+        return this.#engine.rows;
+    }
+    get processedRows() {
+        return this.#engine.processedRows;
+    }
+    get currentRows() {
+        return this.#engine.currentPageRows;
+    }
+    get allColumns() {
+        return this.#engine.allColumns;
+    }
+    get visibleColumns() {
+        return this.#engine.visibleColumns;
+    }
+    get mainColumns() {
+        return this.#engine.mainColumns;
+    }
+    get overflowColumns() {
+        return this.#engine.overflowColumns;
+    }
+    get loading() {
+        return this.#engine.loading;
+    }
+    get page() {
+        return this.#engine.page;
+    }
+    get pageSize() {
+        return this.#engine.pageSize;
+    }
+    get totalPages() {
+        return this.#engine.totalPages;
+    }
+    get totalRows() {
+        return this.#engine.totalRows;
+    }
+    get totalFilteredRows() {
+        return this.#engine.totalFilteredRows;
+    }
+    get sortColumn() {
+        return this.#engine.sortColumn;
+    }
+    get sortDirection() {
+        return this.#engine.sortColumn ? this.#engine.sortDirection : null;
+    }
+    get sort() {
+        return this.#engine.sortColumn
+            ? { columnId: this.#engine.sortColumn, direction: this.#engine.sortDirection }
+            : null;
+    }
+    get search() {
+        return this.#engine.search;
+    }
+    get selectedIds() {
+        return this.#engine.selectedIds;
+    }
+    get selectedCount() {
+        return this.#engine.selectedCount;
+    }
+    get multiSelect() {
+        return !!this.#engine.options.multiSelect;
+    }
+    get allVisibleSelected() {
+        return this.#engine.allVisibleSelected;
+    }
+    get someVisibleSelected() {
+        return this.#engine.someVisibleSelected;
+    }
+    get isAllPageSelected() {
+        return this.#engine.isAllPageSelected;
+    }
+    get query() {
+        return this.#query;
+    }
+    getRowId(row, index) {
+        return this.#engine.getRowId(row, index);
+    }
+    setRows(rows) {
+        this.#engine.setRows(rows);
+        return this;
+    }
+    setLoading(v) {
+        this.#engine.setLoading(v);
+    }
+    setSearch(term) {
+        this.#engine.setSearch(term);
+    }
+    setQuery(q) {
+        this.#query = q;
+        this.#engine.setQuery(q);
+    }
+    setSort(columnId, direction = 'asc') {
+        this.#engine.setSort(columnId, direction);
+    }
+    toggleSort(columnId) {
+        this.#engine.toggleSort(columnId);
+    }
+    setPage(page) {
+        this.#engine.setPage(page);
+    }
+    setPageSize(size) {
+        this.#engine.setPageSize(size);
+    }
+    clearSelection() {
+        this.#engine.clearSelection();
+    }
+    toggleRowSelection(id) {
+        this.#engine.toggleRowSelection(id);
+    }
+    selectAllVisible() {
+        this.#engine.selectAllVisible();
+    }
+    unselectAllVisible() {
+        this.#engine.unselectAllVisible();
+    }
+    selectAllCurrentPage() {
+        this.#engine.selectAllCurrentPage();
+    }
+    unselectAllCurrentPage() {
+        this.#engine.unselectAllCurrentPage();
+    }
+    isRowSelected(id) {
+        return this.#engine.selectedIds.has(id);
+    }
+    setColumnHidden(id, hidden) {
+        this.#engine.setColumnHidden(id, hidden);
+    }
+    resizeColumn(id, width) {
+        this.#engine.resizeColumn(id, width);
+    }
+    getColumnWidth(id) {
+        return this.#engine.getColumnWidth(id);
+    }
+    resetLayout() {
+        this.#engine.resetLayout();
+        this.#query = null;
+    }
+}

package/dist/components/container/DataTableShell/core/DataTableEngine.svelte.d.ts

@@ -0,0 +1,68 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { QueryStructure } from './filters-types.js';
+import type { ColumnDef } from './types.js';
+export type SortDirection = 'asc' | 'desc';
+export type DataTableMode = 'pagination' | 'infinite';
+type ColumnState<T> = {
+    id: keyof T;
+    visible: boolean;
+    hidden?: boolean;
+    width?: number;
+    minWidth?: number;
+    defaultWidth?: number;
+};
+export interface DataTableOptions<T> {
+    mode: DataTableMode;
+    columns: ColumnDef<T>[];
+    pageSize?: number;
+    maxVisibleColumns?: number;
+    multiSelect?: boolean;
+    getRowId?: (row: T, index: number) => string;
+}
+export declare class DataTableEngine<T> {
+    options: DataTableOptions<T>;
+    rows: T[];
+    loading: boolean;
+    search: string;
+    query: QueryStructure | null;
+    sortColumn: keyof T | null;
+    sortDirection: SortDirection;
+    page: number;
+    pageSize: number;
+    columnState: ColumnState<T>[];
+    selectedIds: SvelteSet<string>;
+    allColumns: ColumnDef<T>[];
+    visibleColumns: ColumnDef<T>[];
+    mainColumns: ColumnDef<T>[];
+    overflowColumns: ColumnDef<T>[];
+    processedRows: T[];
+    totalRows: number;
+    totalFilteredRows: number;
+    totalPages: number;
+    currentPageRows: T[];
+    selectedCount: number;
+    allVisibleSelected: boolean;
+    someVisibleSelected: boolean;
+    isAllPageSelected: boolean;
+    constructor(options: DataTableOptions<T>);
+    getRowId(row: T, index: number): string;
+    setRows(rows: T[]): void;
+    setLoading(v: boolean): void;
+    setSearch(term: string): void;
+    setQuery(q: QueryStructure | null): void;
+    setSort(columnId: keyof T | null, direction?: SortDirection): void;
+    toggleSort(columnId: keyof T): void;
+    setPage(page: number): void;
+    setPageSize(size: number): void;
+    clearSelection(): void;
+    toggleRowSelection(id: string): void;
+    selectAllVisible(): void;
+    unselectAllVisible(): void;
+    selectAllCurrentPage(): void;
+    unselectAllCurrentPage(): void;
+    setColumnHidden(id: keyof T, hidden: boolean): void;
+    resizeColumn(id: keyof T, width: number): void;
+    resetLayout(): void;
+    getColumnWidth(id: keyof T): number;
+}
+export {};