@0djek/sveltix 0.0.6

package/dist/datagrid/core-modules/custom/models/CustomComponentPosition.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Where to place custom component.
+ */
+export declare enum CustomComponentPosition {
+    /**
+     * Place it above the table itself.
+     */
+    Action = "Action",
+    /**
+     * Place it to the left of the table.
+     */
+    Left = "Left",
+    /**
+     * Place it at the footer of the table.
+     */
+    Footer = "Footer",
+    /**
+     * Place it to the rigt of the table
+     */
+    Right = "Right"
+}

package/dist/datagrid/core-modules/custom/models/CustomComponentPosition.js

@@ -0,0 +1,22 @@
+/**
+ * Where to place custom component.
+ */
+export var CustomComponentPosition;
+(function (CustomComponentPosition) {
+    /**
+     * Place it above the table itself.
+     */
+    CustomComponentPosition["Action"] = "Action";
+    /**
+     * Place it to the left of the table.
+     */
+    CustomComponentPosition["Left"] = "Left";
+    /**
+     * Place it at the footer of the table.
+     */
+    CustomComponentPosition["Footer"] = "Footer";
+    /**
+     * Place it to the rigt of the table
+     */
+    CustomComponentPosition["Right"] = "Right";
+})(CustomComponentPosition || (CustomComponentPosition = {}));

package/dist/datagrid/core-modules/index.d.ts

@@ -0,0 +1,4 @@
+export * from './columns';
+export * from './pipelines';
+export * from './rows';
+export * from './custom';

package/dist/datagrid/core-modules/index.js

@@ -0,0 +1,4 @@
+export * from './columns';
+export * from './pipelines';
+export * from './rows';
+export * from './custom';

package/dist/datagrid/core-modules/pipelines/PipelinesModule.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Module, type ISveltixGrid } from '../../interfaces';
+import type { CallbackSignature } from './models/CallbackSignature';
+export declare class PipelinesModule<T> extends Module<T> {
+    private _entries;
+    constructor(api: ISveltixGrid<T>);
+    addCallback(callback: CallbackSignature<T>, id: string, order?: number): void;
+    execute(from?: string): void;
+    private getIndex;
+    private getData;
+    init(): void;
+    uninit(): void;
+}

package/dist/datagrid/core-modules/pipelines/PipelinesModule.svelte.js

@@ -0,0 +1,58 @@
+import { Module } from '../../interfaces';
+export class PipelinesModule extends Module {
+    _entries = [];
+    constructor(api) {
+        super(api);
+    }
+    addCallback(callback, id, order) {
+        order ??= 100;
+        this._entries.push({
+            id,
+            order,
+            callback,
+            previousRunResponse: {
+                columns: [],
+                rows: [],
+            },
+        });
+        this._entries.sort((first, second) => first.order - second.order);
+    }
+    execute(from) {
+        const indexToStartFrom = this.getIndex(from);
+        for (let index = indexToStartFrom; index < this._entries.length; index++) {
+            const entry = this._entries[index];
+            const dataToUse = this.getData(index);
+            const response = entry.callback(dataToUse.rows, dataToUse.columns);
+            this._entries[index].previousRunResponse = response;
+        }
+        const lastEntry = this._entries[this._entries.length - 1];
+        this._api.emit(this._api.events.pipeline.executed, {
+            rows: lastEntry.previousRunResponse.rows,
+            columns: lastEntry.previousRunResponse.columns,
+        });
+    }
+    getIndex(from) {
+        if (from == null) {
+            return 0;
+        }
+        const foundIndex = this._entries.findIndex((entry) => entry.id === from);
+        if (foundIndex === -1) {
+            return 0;
+        }
+        return foundIndex;
+    }
+    getData(index) {
+        if (index === 0) {
+            return {
+                rows: [],
+                columns: [],
+            };
+        }
+        return {
+            rows: this._entries[index - 1].previousRunResponse.rows,
+            columns: this._entries[index - 1].previousRunResponse.columns,
+        };
+    }
+    init() { }
+    uninit() { }
+}

package/dist/datagrid/core-modules/pipelines/index.d.ts

@@ -0,0 +1,4 @@
+import type { ModuleRegistrationEntry } from '../../models';
+export * from './PipelinesModule.svelte';
+export declare const PIPELINES_MODULE: unique symbol;
+export declare function pipelinesModule<T>(): ModuleRegistrationEntry<T, void>;

package/dist/datagrid/core-modules/pipelines/index.js

@@ -0,0 +1,11 @@
+import { PipelinesModule } from './PipelinesModule.svelte';
+export * from './PipelinesModule.svelte';
+export const PIPELINES_MODULE = Symbol.for('PIPELINES_MODULE');
+export function pipelinesModule() {
+    return {
+        key: PIPELINES_MODULE,
+        module: (PipelinesModule),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        options: undefined,
+    };
+}

package/dist/datagrid/core-modules/pipelines/models/CallbackSignature.d.ts

@@ -0,0 +1,9 @@
+import type { Column } from '../../columns/Column.svelte';
+import type { Row } from '../../rows';
+export interface PipelineResponse<T> {
+    rows: Row<T>[];
+    columns: Column<T>[];
+}
+export interface CallbackSignature<T> {
+    (rows: Row<T>[], columns: Column<T>[]): PipelineResponse<T>;
+}

package/dist/datagrid/core-modules/pipelines/models/CallbackSignature.js

@@ -0,0 +1 @@
+export {};

package/dist/datagrid/core-modules/rows/Cell.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { ISveltixGrid } from '../..';
+import { type Column, type Formatted } from '../columns/Column.svelte';
+import type { Row } from './Row.svelte';
+export declare class Cell<T> {
+    get id(): string;
+    get value(): unknown;
+    get format(): Formatted<T>;
+    get column(): Column<T>;
+    get row(): Row<T>;
+    get class(): string;
+    private _api;
+    private _row;
+    private _column;
+    private _id;
+    private _value;
+    private _classes;
+    private _format;
+    constructor(api: ISveltixGrid<T>, row: Row<T>, column: Column<T>);
+    getDom(): HTMLDivElement | undefined;
+    getWidth(): number | undefined;
+    setClasses(classes: string[]): void;
+    removeClasses(classes: string[]): void;
+    updated(row: Row<T>): boolean;
+    setValue(value: unknown): void;
+    setFormat(format: Formatted<T>): void;
+    private formatChanged;
+}

package/dist/datagrid/core-modules/rows/Cell.svelte.js

@@ -0,0 +1,103 @@
+import { FormatterValue } from '../columns/Column.svelte';
+export class Cell {
+    get id() {
+        return this._id;
+    }
+    get value() {
+        return this._value;
+    }
+    get format() {
+        return this._format;
+    }
+    get column() {
+        return this._column;
+    }
+    get row() {
+        return this._row;
+    }
+    get class() {
+        return this._classes.join(' ');
+    }
+    _api;
+    _row = undefined;
+    _column;
+    _id;
+    _value = $state();
+    _classes = $state([]);
+    _format = $state();
+    constructor(api, row, column) {
+        this._api = api;
+        this._column = column;
+        this._id = `${row.id}x${this._column.id}`;
+        this.updated(row);
+    }
+    getDom() {
+        const selector = `[data-bodycellid="${this._id}"]`;
+        const dom = this._api.dom.querySelector(selector);
+        if (dom == null) {
+            // console.log(`Couldn't find DOM for '${selector}'`);
+            return undefined;
+        }
+        return dom;
+    }
+    getWidth() {
+        const dom = this.getDom();
+        if (dom == null) {
+            return undefined;
+        }
+        const rect = dom.getBoundingClientRect();
+        return rect.width;
+    }
+    setClasses(classes) {
+        const allClasses = new Set(...this._classes, ...classes);
+        this._classes = Array.from(allClasses);
+    }
+    removeClasses(classes) {
+        const allClasses = new Set(...this._classes);
+        for (const cssClass of classes) {
+            allClasses.delete(cssClass);
+        }
+        this._classes = Array.from(allClasses);
+    }
+    updated(row) {
+        this._row = row;
+        const value = this._column.getValue(this._row);
+        if (value !== this._value) {
+            this._value = value;
+        }
+        const oldFormatter = this._format;
+        this._format = this._column.format(this._value, this._row);
+        this._row.setCell(this._column.id, this);
+        const formatChanged = this.formatChanged(oldFormatter, this._format);
+        return formatChanged;
+    }
+    setValue(value) {
+        this._value = value;
+        this._column.clearCache(this._row);
+        this._format = this._column.format(this._value, this._row);
+    }
+    setFormat(format) {
+        this._format = format;
+        this._column.clearCache(this._row);
+    }
+    formatChanged(oldFormat, newFormat) {
+        if (oldFormat == null && newFormat == null) {
+            return false;
+        }
+        if (oldFormat == null && newFormat != null) {
+            return true;
+        }
+        if (oldFormat != null && newFormat == null) {
+            return true;
+        }
+        const oldF = oldFormat;
+        const newF = newFormat;
+        if (oldF.mode !== newF.mode) {
+            return true;
+        }
+        if (oldF.mode === FormatterValue.Static && newF.mode === FormatterValue.Static) {
+            return oldF.format !== newF.format;
+        }
+        return true;
+    }
+}

package/dist/datagrid/core-modules/rows/Row.svelte.d.ts

@@ -0,0 +1,24 @@
+import { Cell } from './Cell.svelte';
+import type { CreateRowOptions } from './internal/CreateRowOptions';
+export declare class Row<T> {
+    get data(): T | undefined;
+    get id(): string;
+    get index(): number;
+    get cells(): Cell<T>[];
+    get removed(): boolean;
+    private _data;
+    private _id;
+    private _index;
+    private _cells;
+    private _api;
+    private _updateData;
+    private _removed;
+    constructor(options: CreateRowOptions<T>);
+    update(data: T | undefined): void;
+    private generateCells;
+    getCell(columnId: string): Cell<T> | undefined;
+    setCell(columnId: string, cell: Cell<T>): void;
+    setValue(columnId: string, value: never): void;
+    private updateCells;
+    remove(): Row<T> | undefined;
+}

package/dist/datagrid/core-modules/rows/Row.svelte.js

@@ -0,0 +1,117 @@
+import { ValueMode } from '../..';
+import { deepEqual } from '../../../deep-equal';
+import { OrderedMap } from '../../../ordered-map';
+import { Cell } from './Cell.svelte';
+export class Row {
+    get data() {
+        return this._data;
+    }
+    get id() {
+        return this._id;
+    }
+    get index() {
+        return this._index;
+    }
+    get cells() {
+        return this._cells.entries;
+    }
+    get removed() {
+        return this._removed;
+    }
+    _data = $state();
+    _id = $state('');
+    _index = $state(0);
+    _cells = $state(OrderedMap.create());
+    _api;
+    _updateData = false;
+    _removed = $state(false);
+    constructor(options) {
+        this._data = options.data;
+        this._id = options.id;
+        this._api = options.api;
+        this.generateCells(options.cells ?? []);
+        this.updateCells(options.cells ?? []);
+    }
+    update(data) {
+        this._updateData = true;
+        this._data = data;
+        this.updateCells([]);
+    }
+    generateCells(cells) {
+        for (const column of this._api.core.columns.columns) {
+            const cellCustom = cells.find((cell) => cell.columnId === column.id);
+            const cell = new Cell(this._api, this, column);
+            if (cellCustom?.value !== null) {
+                cell.setValue(cellCustom?.value);
+            }
+            if (cellCustom?.format != null) {
+                cell.setFormat(cellCustom.format);
+            }
+            this._cells.addBatched(cell.column.id, cell);
+        }
+        this._cells.batchedFinish();
+    }
+    getCell(columnId) {
+        return this._cells.getByKey(columnId);
+    }
+    setCell(columnId, cell) {
+        this._cells.setByKey(columnId, cell);
+    }
+    setValue(columnId, value) {
+        const column = this._api.core.columns.get(columnId);
+        if (column == null) {
+            return;
+        }
+        let rowData = this._data;
+        if (rowData == null) {
+            return;
+        }
+        switch (column.valueGetter?.mode) {
+            case ValueMode.Key: {
+                const canAssign = typeof rowData[column.valueGetter.key] === typeof value;
+                if (!canAssign) {
+                    throw new Error("Given value must be the same as column's value");
+                }
+                rowData[column.valueGetter.key] = value;
+                break;
+            }
+            case ValueMode.Callback:
+                if (column.valueGetter.set == null) {
+                    throw new Error('Value setter must be set');
+                }
+                rowData = column.valueGetter.set(value, rowData);
+                break;
+            case ValueMode.Static:
+                throw new Error("Can't modify static data");
+        }
+        this.update(rowData);
+    }
+    updateCells(cells) {
+        const updateEntries = [];
+        for (const cell of this.cells) {
+            const cellCreate = cells.find((cellCreate) => cellCreate.columnId === cell.column.id);
+            const value = cellCreate?.value ?? cell.column.getValue(this, undefined, true);
+            const valuesEqual = deepEqual(value, cell.value);
+            if (valuesEqual) {
+                continue;
+            }
+            cell.column.clearCache(this);
+            const cellFormatUpdated = cell.updated(this);
+            if (this._updateData && cellFormatUpdated) {
+                updateEntries.push({
+                    row: this,
+                    cell: cell,
+                });
+            }
+        }
+        if (this._updateData && updateEntries.length > 0) {
+            this._api.emit(this._api.events.row.updated, updateEntries);
+        }
+        this._updateData = false;
+    }
+    remove() {
+        this._removed = true;
+        console.log('set removed to true');
+        return this._api.core.rows.remove(this._id);
+    }
+}

package/dist/datagrid/core-modules/rows/RowsModule.svelte.d.ts

@@ -0,0 +1,33 @@
+import { Module, type ISveltixGrid } from '../../interfaces';
+import type { RowsOptions } from './models/RowsOptions';
+import { Row } from './Row.svelte';
+export declare class RowsModule<T> extends Module<T> {
+    get visible(): Row<T>[];
+    get body(): Row<T>[];
+    private _options?;
+    private _id;
+    private _visible;
+    private _body;
+    constructor(api: ISveltixGrid<T>, options: RowsOptions<T> | undefined);
+    private onPipelinesExecuted;
+    add(row: T, rerun?: boolean): void;
+    /**
+     * Create new rows in the datagrid.
+     * @param rows Rows to create.
+     */
+    create(rows: T[], rerun?: boolean): void;
+    private rowsCreate;
+    private generateRow;
+    getId(row: T): string;
+    /**
+     * Moves row from one one place to another.
+     * @param from ID of the row to move.
+     * @param to ID of the row to move to.
+     */
+    move(from: string, to: string, after?: boolean): void;
+    get(key: string): Row<T> | undefined;
+    getByIndex(index: number): Row<T> | undefined;
+    remove(id: string): Row<T> | undefined;
+    init(): void;
+    uninit(): void;
+}

package/dist/datagrid/core-modules/rows/RowsModule.svelte.js

@@ -0,0 +1,115 @@
+import { Module } from '../../interfaces';
+import { OrderedMap } from '../../../ordered-map';
+import { Row } from './Row.svelte';
+export class RowsModule extends Module {
+    get visible() {
+        return this._visible.entries;
+    }
+    get body() {
+        return this._body.entries;
+    }
+    _options;
+    _id = 0;
+    _visible = $state(OrderedMap.create());
+    _body = $state(OrderedMap.create());
+    constructor(api, options) {
+        super(api);
+        this._options = options;
+    }
+    onPipelinesExecuted(rows) {
+        this._visible.clear();
+        rows.forEach((row) => this._visible.add(row.id, row));
+    }
+    add(row, rerun) {
+        rerun ??= false;
+        const rowObject = this.generateRow(row);
+        if (!rerun) {
+            this._visible.add(rowObject.id, rowObject);
+        }
+        this._body.add(rowObject.id, rowObject);
+        if (rerun) {
+            this._api.core.pipelines.execute();
+        }
+    }
+    /**
+     * Create new rows in the datagrid.
+     * @param rows Rows to create.
+     */
+    create(rows, rerun) {
+        this._visible.clear();
+        this._body.clear();
+        rerun ??= false;
+        console.time('Create rows');
+        this.rowsCreate(rows, rerun);
+        this._body.batchedFinish();
+        console.timeEnd('Create rows');
+        if (rerun) {
+            this._api.core.pipelines.execute();
+        }
+        else {
+            this._visible.batchedFinish();
+        }
+    }
+    rowsCreate(rows, rerun) {
+        for (const row of rows) {
+            const rowObject = this.generateRow(row);
+            this._body.addBatched(rowObject.id, rowObject);
+            if (!rerun) {
+                this._visible.addBatched(rowObject.id, rowObject);
+            }
+        }
+    }
+    generateRow(row) {
+        const id = this.getId(row);
+        const rowObject = new Row({
+            id: id,
+            data: row,
+            api: this._api,
+            isGroup: true,
+        });
+        return rowObject;
+    }
+    getId(row) {
+        if (this._options?.getRowId == null) {
+            const id = this._id;
+            this._id += 1;
+            return id.toString();
+        }
+        return this._options.getRowId(row);
+    }
+    /**
+     * Moves row from one one place to another.
+     * @param from ID of the row to move.
+     * @param to ID of the row to move to.
+     */
+    move(from, to, after) {
+        if (after == null) {
+            after = true;
+        }
+        this._visible.move(from, to, after);
+    }
+    get(key) {
+        return this._body.getByKey(key);
+    }
+    getByIndex(index) {
+        return this._body.getByIndex(index);
+    }
+    remove(id) {
+        const removedRow = this._body.remove(id);
+        if (removedRow == null) {
+            return undefined;
+        }
+        this._visible.remove(id);
+        this._api.emit(this._api.events.row.removed, removedRow);
+        return removedRow;
+    }
+    init() {
+        this._api.core.pipelines.addCallback((_rows, columns) => ({
+            columns: columns,
+            rows: this._body.entries,
+        }), 'rows', 0);
+        const onExecutedSub = this._api.on(this._api.events.pipeline.executed, (data) => this.onPipelinesExecuted(data.rows));
+        this.addUnsub(onExecutedSub);
+    }
+    uninit() { }
+}

package/dist/datagrid/core-modules/rows/components/body/BodyCell.svelte

@@ -0,0 +1,31 @@
+<script
+	lang="ts"
+	generics="T">
+	import type { ISveltixGrid } from '../../../..';
+	import { FormatterValue } from '../../../columns/Column.svelte';
+	import type { Cell } from '../../Cell.svelte';
+
+	interface BodyCellProps<T> {
+		cell: Cell<T>;
+		api: ISveltixGrid<T>;
+	}
+
+	const { api, cell }: BodyCellProps<T> = $props();
+</script>
+
+<div
+	data-bodycellid={cell.id}
+	class="px-4 h-12 flex items-center border-b group-last:border-b-0 whitespace-nowrap overflow-hidden {cell.class}"
+	style="max-width: {cell.column.width}px; min-width: {cell.column.width}px">
+	{#if cell.format.mode === FormatterValue.Static}
+		<span class="text-nowrap overflow-hidden text-ellipsis">
+			{cell.format.format}
+		</span>
+	{:else if cell.format.mode === FormatterValue.Snippet}
+		{@render cell.format.snippet(cell.value)}
+	{:else if cell.format.mode === FormatterValue.Component}
+		<cell.format.component
+			{api}
+			{cell} />
+	{/if}
+</div>

package/dist/datagrid/core-modules/rows/components/body/BodyCell.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ISveltixGrid } from '../../../..';
+import type { Cell } from '../../Cell.svelte';
+interface BodyCellProps<T> {
+    cell: Cell<T>;
+    api: ISveltixGrid<T>;
+}
+declare function $$render<T>(): {
+    props: BodyCellProps<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 BodyCell: $$IsomorphicComponent;
+type BodyCell<T> = InstanceType<typeof BodyCell<T>>;
+export default BodyCell;

package/dist/datagrid/core-modules/rows/components/body/GroupCell.svelte

@@ -0,0 +1,26 @@
+<script
+	lang="ts"
+	generics="T">
+	import type { FormatterComponentProps } from '../../../../models';
+
+	const { cell }: FormatterComponentProps<T> = $props();
+</script>
+
+{#if cell.row.children.length > 0 && cell.column.id === 'group'}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span
+		class="flex gap-2 w-full h-full items-center line-clamp-1"
+		style="padding-left: {cell.row.childLevel * 4}px;"
+		onclick={() => cell.row.toggleGroupOpen()}>
+		<span class="w-2">
+			{#if !cell.row.groupOpen}
+				/\
+			{:else}
+				>
+			{/if}
+		</span>
+		{cell.value}
+		({cell.row.children.length})
+	</span>
+{/if}