@0djek/sveltix 0.0.6

package/dist/datagrid/core-modules/columns/Column.svelte.js

@@ -0,0 +1,322 @@
+import { MappedCache } from '../../../cache';
+import { FormatterMode, ValueMode, } from '../../models';
+import { tick } from 'svelte';
+import { OrderedMap } from '../../../ordered-map';
+const DEFAULT_KEY = 'default';
+var InternalMode;
+(function (InternalMode) {
+    InternalMode["Row"] = "Row";
+    InternalMode["NoRow"] = "NoRow";
+})(InternalMode || (InternalMode = {}));
+export var FormatterValue;
+(function (FormatterValue) {
+    FormatterValue["Static"] = "Static";
+    FormatterValue["Snippet"] = "Snippet";
+    FormatterValue["Component"] = "Component";
+})(FormatterValue || (FormatterValue = {}));
+export var HelperPosition;
+(function (HelperPosition) {
+    HelperPosition["Before"] = "Before";
+    HelperPosition["After"] = "After";
+})(HelperPosition || (HelperPosition = {}));
+export class Column {
+    get id() {
+        return this._id;
+    }
+    get publicColumn() {
+        return this._publicColumn;
+    }
+    get width() {
+        return this._width;
+    }
+    get valueGetter() {
+        return this._valueGetter;
+    }
+    get helperBefore() {
+        return this._helperBefore.entries;
+    }
+    get helperAfter() {
+        return this._helperAfter.entries;
+    }
+    get minimumWidth() {
+        return this._minimumWidth;
+    }
+    _api;
+    _id;
+    _valueGetters = new Map();
+    _formatters = new Map();
+    _valuesCache = new MappedCache();
+    _formatsCache = new MappedCache();
+    _publicColumn = $state();
+    _width = $state(-1);
+    _valueGetter;
+    _helperBefore = $state(OrderedMap.create());
+    _helperAfter = $state(OrderedMap.create());
+    _minimumWidth;
+    constructor(api, id, column) {
+        this._api = api;
+        this._id = id;
+        this._publicColumn = column;
+        this._valueGetter = column.value;
+        // TODO: Ability to limit column's min/max width.
+        this._minimumWidth = this._api.core.columns.minimumWidth;
+        if (column.value != null) {
+            this.addValueGetter(DEFAULT_KEY, column.value);
+        }
+        if (column.format != null) {
+            this.addFormatter(DEFAULT_KEY, column.format);
+        }
+        else {
+            this.addFormatter(DEFAULT_KEY, {
+                mode: FormatterMode.Callback,
+                format: (value) => {
+                    if (value == null) {
+                        return '';
+                    }
+                    return String(value);
+                },
+            });
+        }
+    }
+    getFormatterFunction(formatter) {
+        switch (formatter.mode) {
+            case FormatterMode.Callback:
+                return {
+                    value: FormatterValue.Static,
+                    internal: {
+                        mode: InternalMode.Row,
+                        format: formatter.format,
+                    },
+                };
+            case FormatterMode.Static:
+                return {
+                    value: FormatterValue.Static,
+                    internal: {
+                        mode: InternalMode.NoRow,
+                        format: (value) => formatter.format[String(value)],
+                    },
+                };
+            case FormatterMode.Snippet:
+                return {
+                    value: FormatterValue.Snippet,
+                    snippet: formatter.snippet,
+                };
+            case FormatterMode.Component:
+                return {
+                    value: FormatterValue.Component,
+                    component: formatter.component,
+                };
+        }
+    }
+    getValueGetterFunction(valueGetter) {
+        switch (valueGetter.mode) {
+            case ValueMode.Key:
+                return {
+                    mode: InternalMode.Row,
+                    get: (row) => row.data?.[valueGetter.key],
+                };
+            case ValueMode.Callback:
+                return {
+                    mode: InternalMode.Row,
+                    get: (row) => valueGetter.get(row),
+                };
+            case ValueMode.Static:
+                return {
+                    mode: InternalMode.NoRow,
+                    get: () => valueGetter.values,
+                };
+        }
+    }
+    addValueGetter(key, getter) {
+        const valueGetterFunction = this.getValueGetterFunction(getter);
+        this._valueGetters.set(key, valueGetterFunction);
+    }
+    clearCache(row, key) {
+        key = this.getKey(key);
+        this._valuesCache.delete(row.id, key);
+        this._formatsCache.delete(row.id, key);
+    }
+    getValue(row, key, ignoreCache) {
+        key = this.getKey(key);
+        if (ignoreCache == null || !ignoreCache) {
+            const cachedValue = this._valuesCache.get(row.id, key);
+            if (cachedValue.exists) {
+                return cachedValue.value;
+            }
+        }
+        const valueGetter = this._valueGetters.get(key);
+        if (valueGetter == null) {
+            return undefined;
+        }
+        let value = undefined;
+        switch (valueGetter?.mode) {
+            case InternalMode.Row: {
+                value = valueGetter.get(row);
+                break;
+            }
+            case InternalMode.NoRow:
+                value = valueGetter.get();
+                break;
+        }
+        this._valuesCache.set(row.id, key, value);
+        return value;
+    }
+    addFormatter(key, formatter) {
+        const formatterFunction = this.getFormatterFunction(formatter);
+        this._formatters.set(key, formatterFunction);
+    }
+    format(value, row, key) {
+        key = this.getKey(key);
+        const cachedFormat = this._formatsCache.get(row.id, key);
+        if (cachedFormat.exists) {
+            return cachedFormat.value;
+        }
+        const formatter = this._formatters.get(key);
+        if (formatter == null) {
+            return {
+                mode: FormatterValue.Static,
+                format: '',
+            };
+        }
+        let formattedData;
+        switch (formatter.value) {
+            case FormatterValue.Static:
+                formattedData = {
+                    mode: FormatterValue.Static,
+                    format: this.formatStatic(formatter.internal, value, row),
+                };
+                break;
+            case FormatterValue.Snippet:
+                formattedData = {
+                    mode: FormatterValue.Snippet,
+                    snippet: formatter.snippet,
+                };
+                break;
+            case FormatterValue.Component:
+                formattedData = {
+                    mode: FormatterValue.Component,
+                    component: formatter.component,
+                };
+                break;
+        }
+        this._formatsCache.set(row.id, key, formattedData);
+        return formattedData;
+    }
+    formatStatic(formatter, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value, row) {
+        switch (formatter.mode) {
+            case InternalMode.Row: {
+                return formatter.format(value, row);
+            }
+            case InternalMode.NoRow:
+                return formatter.format(value);
+        }
+    }
+    getKey(key) {
+        return key ?? DEFAULT_KEY;
+    }
+    addHelperStart(id, helper, position, option) {
+        const map = this.getMap(id, position);
+        map?.addStart(id, {
+            id,
+            helper,
+            option,
+        });
+    }
+    addHelperEnd(id, helper, position, option) {
+        const map = this.getMap(id, position);
+        map?.addEnd(id, {
+            id,
+            helper,
+            option,
+        });
+    }
+    addHelper(id, helper, position, option) {
+        const map = this.getMap(id, position);
+        map?.add(id, {
+            id,
+            helper,
+            option,
+        });
+    }
+    getMap(id, position) {
+        const map = position === HelperPosition.After ? this._helperAfter : this._helperBefore;
+        if (map.getByKey(id) != null) {
+            return undefined;
+        }
+        return map;
+    }
+    async calculateWidth() {
+        const rows = this._api.core.rows.visible;
+        // Default width is header's width.
+        let maxWidth = this.getWidth() ?? 0;
+        let longestEntry = undefined;
+        for (const row of rows) {
+            const entry = this.processRowForWidth(row);
+            if (longestEntry == null || entry.length > longestEntry.length) {
+                longestEntry = entry;
+            }
+        }
+        if (longestEntry == null) {
+            this._width = maxWidth;
+            return;
+        }
+        this._width = -1;
+        this._api.core.columns.setCalculateWidthCell(longestEntry.cell);
+        await tick();
+        const dom = this._api.dom.querySelector('#width-calculate-cell');
+        this._api.core.columns.setCalculateWidthCell(undefined);
+        if (dom == null) {
+            return;
+        }
+        const rect = dom.getBoundingClientRect();
+        maxWidth = rect.width;
+        this._width = Math.ceil(maxWidth);
+        console.log(`Column's '${this._id}' max width: ${this._width}`);
+    }
+    processRowForWidth(row) {
+        let longestEntry = undefined;
+        const cell = row.getCell(this._id);
+        if (cell == null) {
+            throw new Error(`Row '${row.id}' doesn't have cell for column '${this._id}'`);
+        }
+        const length = this.getCellFormatWidth(cell);
+        longestEntry = {
+            cell,
+            length,
+        };
+        if (longestEntry == null) {
+            throw new Error(`Couldn't get longest child for '${this._id}' column`);
+        }
+        return longestEntry;
+    }
+    getCellFormatWidth(cell) {
+        if (cell.format.mode === FormatterValue.Static) {
+            return cell.format.format.length;
+        }
+        return String(cell.value).length;
+    }
+    getDom() {
+        const selector = `[data-headerCellId="${this._id}"]`;
+        const dom = this._api.dom.querySelector(selector);
+        if (dom == null) {
+            return undefined;
+        }
+        return dom;
+    }
+    getWidth() {
+        const dom = this.getDom();
+        if (dom == null) {
+            return undefined;
+        }
+        const rect = dom.getBoundingClientRect();
+        return rect.width;
+    }
+    setWidth(width) {
+        if (width < this._api.core.columns.minimumWidth) {
+            width = this._api.core.columns.minimumWidth;
+        }
+        this._width = width;
+    }
+}

package/dist/datagrid/core-modules/columns/ColumnsModule.svelte.d.ts

@@ -0,0 +1,26 @@
+import { Module, type ISveltixGrid } from '../../interfaces';
+import { type BaseColumn } from '../../models';
+import { Cell } from '../rows';
+import { Column } from './Column.svelte';
+import type { ColumnOptions } from './models/ColumnOptions';
+export declare class ColumnsModule<T> extends Module<T> {
+    get visible(): Column<T>[];
+    get columns(): Column<T>[];
+    get minimumWidth(): number;
+    get calculateWidthCell(): Cell<T> | undefined;
+    private _columnIdCounter;
+    private _columns;
+    private _calculateWidthCell;
+    private readonly _minimumWidth;
+    constructor(api: ISveltixGrid<T>, _options: ColumnOptions);
+    init(): void;
+    uninit(): void;
+    createStart(columns: BaseColumn<T>[]): void;
+    create(columns: BaseColumn<T>[]): void;
+    remove(id: string): void;
+    private generateColumn;
+    get(id: string): Column<T> | undefined;
+    private getColumnId;
+    calculateWidth(): Promise<void>;
+    setCalculateWidthCell(cell: Cell<T> | undefined): void;
+}

package/dist/datagrid/core-modules/columns/ColumnsModule.svelte.js

@@ -0,0 +1,77 @@
+import { Module } from '../../interfaces';
+import {} from '../../models';
+import { OrderedMap } from '../../../ordered-map';
+import { CustomComponentPosition } from '../custom/models/CustomComponentPosition';
+import { Cell } from '../rows';
+import { Column } from './Column.svelte';
+import CalculateCellWidth from './components/CalculateCellWidth.svelte';
+export class ColumnsModule extends Module {
+    get visible() {
+        return this._columns.entries;
+    }
+    get columns() {
+        return this._columns.entries;
+    }
+    get minimumWidth() {
+        return this._minimumWidth;
+    }
+    get calculateWidthCell() {
+        return this._calculateWidthCell;
+    }
+    _columnIdCounter = $state(0);
+    _columns = $state(OrderedMap.create());
+    _calculateWidthCell = $state();
+    _minimumWidth = 50;
+    constructor(api, _options) {
+        super(api);
+    }
+    init() {
+        this._api.core.pipelines.addCallback((rows, _columns) => ({
+            columns: this._columns.entries,
+            rows: rows,
+        }), 'columns', 10);
+        this._api.core.custom.add({ component: CalculateCellWidth, id: 'fake-cell', options: undefined }, CustomComponentPosition.Action);
+    }
+    uninit() { }
+    createStart(columns) {
+        for (const column of columns) {
+            const columnToCreate = this.generateColumn(column);
+            this._columns.addStart(columnToCreate.id, columnToCreate);
+        }
+        this._api.emit(this._api.events.column.created, this._columns.entries);
+    }
+    create(columns) {
+        for (const column of columns) {
+            const columnToCreate = this.generateColumn(column);
+            this._columns.add(columnToCreate.id, columnToCreate);
+        }
+        this._api.emit(this._api.events.column.created, this._columns.entries);
+    }
+    remove(id) {
+        this._columns.remove(id);
+    }
+    generateColumn(column) {
+        const id = this.getColumnId(column);
+        const internalColumn = new Column(this._api, id, column);
+        return internalColumn;
+    }
+    get(id) {
+        return this._columns.getByKey(id);
+    }
+    getColumnId(column) {
+        if (column.id != null) {
+            return column.id;
+        }
+        const newId = this._columnIdCounter.toString();
+        this._columnIdCounter += 1;
+        return newId;
+    }
+    async calculateWidth() {
+        for (const column of this.visible) {
+            await column.calculateWidth();
+        }
+    }
+    setCalculateWidthCell(cell) {
+        this._calculateWidthCell = cell;
+    }
+}

package/dist/datagrid/core-modules/columns/components/CalculateCellWidth.svelte

@@ -0,0 +1,18 @@
+<script
+	lang="ts"
+	generics="T">
+	import type { CustomComponentEntryProps } from '../../custom/CustomComponentsModule.svelte';
+	import BodyCell from '../../rows/components/body/BodyCell.svelte';
+
+	const { api }: CustomComponentEntryProps<T, never> = $props();
+</script>
+
+{#if api.core.columns.calculateWidthCell != null}
+	<div
+		class="invisible absolute -top-96 -left-96 overflow w-fit z-10"
+		id="width-calculate-cell">
+		<BodyCell
+			{api}
+			cell={api.core.columns.calculateWidthCell} />
+	</div>
+{/if}

package/dist/datagrid/core-modules/columns/components/CalculateCellWidth.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CustomComponentEntryProps } from '../../custom/CustomComponentsModule.svelte';
+declare function $$render<T>(): {
+    props: CustomComponentEntryProps<T, never>;
+    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 CalculateCellWidth: $$IsomorphicComponent;
+type CalculateCellWidth<T> = InstanceType<typeof CalculateCellWidth<T>>;
+export default CalculateCellWidth;

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

@@ -0,0 +1,5 @@
+import type { ModuleRegistrationEntry } from '../..';
+import type { ColumnOptions } from './models/ColumnOptions';
+export * from './ColumnsModule.svelte';
+export declare const COLUMNS_MODULE: unique symbol;
+export declare function columnsModule<T>(): ModuleRegistrationEntry<T, ColumnOptions>;

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

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

package/dist/datagrid/core-modules/columns/models/ColumnOptions.d.ts

@@ -0,0 +1,2 @@
+export interface ColumnOptions {
+}

package/dist/datagrid/core-modules/columns/models/ColumnOptions.js

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

package/dist/datagrid/core-modules/custom/CustomComponentsModule.svelte.d.ts

@@ -0,0 +1,27 @@
+import { Module, type ISveltixGrid } from '../../interfaces';
+import type { Component } from 'svelte';
+import { CustomComponentPosition } from './models/CustomComponentPosition';
+export interface CustomComponentEntryProps<T, TOption> {
+    api: ISveltixGrid<T>;
+    options: TOption;
+}
+export interface CustomComponentEntry<T, TOptions> {
+    id: string;
+    component: Component<CustomComponentEntryProps<T, TOptions>>;
+    options: TOptions;
+}
+export declare class CustomComponentsModule<T> extends Module<T> {
+    get actions(): any;
+    get footer(): any;
+    get left(): any;
+    get right(): any;
+    private _actions;
+    private _footer;
+    private _left;
+    private _right;
+    constructor(api: ISveltixGrid<T>);
+    add<TOption>(entry: CustomComponentEntry<T, TOption>, position: CustomComponentPosition): void;
+    remove(id: string, position: CustomComponentPosition): void;
+    init(): void;
+    uninit(): void;
+}

package/dist/datagrid/core-modules/custom/CustomComponentsModule.svelte.js

@@ -0,0 +1,58 @@
+import { Module } from '../../interfaces';
+import { OrderedMap } from '../../../ordered-map';
+import { CustomComponentPosition } from './models/CustomComponentPosition';
+export class CustomComponentsModule extends Module {
+    get actions() {
+        return this._actions.entries;
+    }
+    get footer() {
+        return this._footer.entries;
+    }
+    get left() {
+        return this._left.entries;
+    }
+    get right() {
+        return this._right.entries;
+    }
+    _actions = $state(OrderedMap.create());
+    _footer = $state(OrderedMap.create());
+    _left = $state(OrderedMap.create());
+    _right = $state(OrderedMap.create());
+    constructor(api) {
+        super(api);
+    }
+    add(entry, position) {
+        switch (position) {
+            case CustomComponentPosition.Action:
+                this._actions.add(entry.id, entry);
+                break;
+            case CustomComponentPosition.Left:
+                this._left.add(entry.id, entry);
+                break;
+            case CustomComponentPosition.Footer:
+                this._footer.add(entry.id, entry);
+                break;
+            case CustomComponentPosition.Right:
+                this._right.add(entry.id, entry);
+                break;
+        }
+    }
+    remove(id, position) {
+        switch (position) {
+            case CustomComponentPosition.Action:
+                this._actions.remove(id);
+                break;
+            case CustomComponentPosition.Left:
+                this._left.remove(id);
+                break;
+            case CustomComponentPosition.Footer:
+                this._footer.remove(id);
+                break;
+            case CustomComponentPosition.Right:
+                this._right.remove(id);
+                break;
+        }
+    }
+    init() { }
+    uninit() { }
+}

package/dist/datagrid/core-modules/custom/components/CustomComponents.svelte

@@ -0,0 +1,36 @@
+<script
+	lang="ts"
+	module>
+	import type { ISveltixGrid } from '../../../interfaces';
+	import type { CustomComponentEntry } from '../CustomComponentsModule.svelte';
+	import { CustomComponentPosition } from '../models/CustomComponentPosition';
+
+	export interface CustomComponentsProps<T> {
+		api: ISveltixGrid<T>;
+		position: CustomComponentPosition;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T">
+	const { api, position }: CustomComponentsProps<T> = $props();
+</script>
+
+{#snippet renderComponents(components: CustomComponentEntry<T, unknown>[])}
+	{#each components as component (component.id)}
+		<component.component
+			{api}
+			options={component.options} />
+	{/each}
+{/snippet}
+
+{#if position === CustomComponentPosition.Action}
+	{@render renderComponents(api.core.custom.actions)}
+{:else if position === CustomComponentPosition.Footer}
+	{@render renderComponents(api.core.custom.footer)}
+{:else if position === CustomComponentPosition.Left}
+	{@render renderComponents(api.core.custom.left)}
+{:else if position === CustomComponentPosition.Right}
+	{@render renderComponents(api.core.custom.right)}
+{/if}

package/dist/datagrid/core-modules/custom/components/CustomComponents.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ISveltixGrid } from '../../../interfaces';
+import { CustomComponentPosition } from '../models/CustomComponentPosition';
+export interface CustomComponentsProps<T> {
+    api: ISveltixGrid<T>;
+    position: CustomComponentPosition;
+}
+declare function $$render<T>(): {
+    props: CustomComponentsProps<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 CustomComponents: $$IsomorphicComponent;
+type CustomComponents<T> = InstanceType<typeof CustomComponents<T>>;
+export default CustomComponents;

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

@@ -0,0 +1,3 @@
+import type { ModuleRegistrationEntry } from '../..';
+export declare const CUSTOM_COMPONENTS_MODULE: unique symbol;
+export declare function customComponentsModule<T>(): ModuleRegistrationEntry<T, void>;

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

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