tablevu 0.3.0-beta.2 → 0.3.0-beta.4

package/dist/tablevu.cjs

@@ -0,0 +1,765 @@
+'use strict';
+
+var vue = require('vue');
+
+const getPath = (row, path) => path.split('.').reduce((value, key) => value?.[key], row);
+const adaptArray = async (props, data) => {
+    const d = Array.isArray(data) ? [...data] : [];
+    return new Promise((resolve, reject) => {
+        try {
+            // Filter & Search //
+            if (props.filter || props.search) {
+                const searchableCols = props.cols
+                    ?.map((m, i) => ({ index: i, searchable: m.searchable !== false }))
+                    .filter(q => q.searchable)
+                    .map(m => m.index) || [];
+                let filtered = d;
+                if (props.filter) {
+                    filtered = filtered.filter(row => {
+                        return Object.entries(props.filter).every(([key, value]) => {
+                            return getPath(row, key) === value;
+                        });
+                    });
+                }
+                if (props.search && searchableCols.length > 0) {
+                    const searchLower = props.search.toLowerCase();
+                    filtered = filtered.filter(row => {
+                        return searchableCols.some(colIndex => {
+                            const col = props.cols?.[colIndex];
+                            if (!col)
+                                return false;
+                            const val = getPath(row, col.name);
+                            return val != null && String(val).toLowerCase().includes(searchLower);
+                        });
+                    });
+                }
+                d.length = 0;
+                d.push(...filtered);
+            }
+            // Sort //
+            if (props.sort && props.sort.length > 0) {
+                for (let i = props.sort.length - 1; i >= 0; i--) {
+                    const s = props.sort[i];
+                    let field;
+                    if (s.index !== undefined && s.index >= 0 && props.cols?.[s.index]) {
+                        field = props.cols[s.index].name;
+                    }
+                    else {
+                        field = s.name || '';
+                    }
+                    if (!field)
+                        continue;
+                    const dir = s.dir === 'desc' ? -1 : 1;
+                    d.sort((a, b) => {
+                        const av = a[field];
+                        const bv = b[field];
+                        if (av === bv)
+                            return 0;
+                        if (av === null || av === undefined)
+                            return 1;
+                        if (bv === null || bv === undefined)
+                            return -1;
+                        return (av > bv ? 1 : -1) * dir;
+                    });
+                }
+            }
+            // Paging //
+            let result = d;
+            if (props.pageSize && props.pageSize > 0) {
+                const currentPage = Math.max(1, props.currPage ?? 1);
+                const start = (currentPage - 1) * props.pageSize;
+                const end = currentPage * props.pageSize;
+                result = d.slice(start, end);
+            }
+            resolve({ rows: result, count: d.length });
+        }
+        catch (err) {
+            reject(err);
+        }
+    });
+};
+
+const TablevuStatus = {
+    Error: -1,
+    Ready: 0,
+    Loading: 1
+};
+
+const tablevu = vue.defineComponent({
+    name: 'TableVu',
+    props: {
+        settings: { type: Object, default: null },
+        data: { type: [Array, Function] },
+        group: { type: [String, Object] },
+        search: { type: String },
+        filter: { type: [Array, Object] },
+        command: { type: Array, default: () => [] },
+        rowid: { type: String },
+        onRowClick: { type: Function },
+        onRowDblClick: { type: Function },
+        class: { type: String, default: 'table' },
+        style: { type: [String, Object], default: null }
+    },
+    emits: ['row-click', 'row-dbl-click'],
+    setup(props, { emit, expose }) {
+        let rows = [];
+        let rowGroups = [];
+        let groups = [];
+        let adapter = null;
+        let searchTimer = null;
+        const state = vue.reactive({
+            caption: null,
+            group: {
+                value: props.settings?.group?.value ?? (typeof props.group === 'string' ? props.group : undefined),
+                content: props.settings?.group?.content ?? (typeof props.group === 'object' ? props.group?.content : undefined),
+                expandAll: props.settings?.group?.expandAll ?? (typeof props.group === 'object' ? props.group?.expandAll : undefined) ?? true,
+                class: props.settings?.group?.class ?? (typeof props.group === 'object' ? props.group?.class : undefined) ?? 'table-light'
+            },
+            page: {
+                count: 0,
+                size: props.settings?.page?.size ?? 0,
+                current: 0,
+                type: null
+            },
+            sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
+            columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
+            footer: {
+                button: {
+                    class: (props.settings && props.settings.footer && props.settings.footer.button && props.settings.footer.button.class) || 'btn'
+                }
+            },
+            status: TablevuStatus.Ready,
+            time: null,
+            search: null,
+            filter: null,
+            onData: props.settings?.onData,
+            settings: props.settings ?? undefined
+        });
+        if (props.data) {
+            if (Array.isArray(props.data)) {
+                adapter = adaptArray;
+            }
+            else {
+                adapter = props.data;
+            }
+        }
+        if (props.search)
+            state.search = props.search;
+        vue.watch(() => props.search, (newVal, oldVal) => {
+            const minChar = parseInt(String(props.settings?.searchMinChar)) || 3;
+            if (searchTimer) {
+                clearTimeout(searchTimer);
+                searchTimer = null;
+            }
+            if (newVal && newVal.length > minChar) {
+                state.search = newVal;
+                searchTimer = setTimeout(() => { refresh(); searchTimer = null; }, 444);
+            }
+            else if (oldVal && oldVal.length > minChar && (newVal == undefined || newVal == null || newVal.length <= minChar)) {
+                state.search = null;
+                searchTimer = setTimeout(() => { refresh(); searchTimer = null; }, 444);
+            }
+        });
+        vue.onBeforeUnmount(() => {
+            if (searchTimer)
+                clearTimeout(searchTimer);
+        });
+        if (props.filter)
+            state.filter = props.filter;
+        vue.watch(() => props.filter, () => {
+            state.filter = props.filter || null;
+            refresh();
+        }, { deep: true });
+        vue.watch(() => props.command?.slice(), (newVal) => {
+            if (newVal && newVal.length > 0) {
+                const command = newVal[newVal.length - 1];
+                if (command && command.name) {
+                    switch (command.name.toLowerCase()) {
+                        case 'refresh':
+                            refresh();
+                            break;
+                        case 'first':
+                            first();
+                            break;
+                        case 'prior':
+                            prior();
+                            break;
+                        case 'next':
+                            next();
+                            break;
+                        case 'last':
+                            last();
+                            break;
+                        case 'go':
+                            if (typeof command.page === 'number')
+                                go(command.page);
+                            break;
+                    }
+                }
+            }
+        }, { deep: true });
+        function prepareGroup(groupDef, dataRows) {
+            groups = [];
+            rowGroups = [];
+            for (let i = 0; i < dataRows.length; i++) {
+                let groupValue = null;
+                let groupContent = null;
+                const row = dataRows[i];
+                if (groupDef.value) {
+                    if (typeof groupDef.value == 'function')
+                        groupValue = groupDef.value(row);
+                    else
+                        groupValue = row[groupDef.value];
+                }
+                else if (typeof groupDef == 'function') {
+                    groupValue = groupDef(row);
+                }
+                else {
+                    if (typeof groupDef == 'bigint' || typeof groupDef == 'number') {
+                        const index = parseFloat(String(groupDef));
+                        if (index)
+                            groupValue = row[index];
+                    }
+                    else if (typeof groupDef == 'string')
+                        groupValue = row[groupDef];
+                }
+                if (groupDef.content) {
+                    if (typeof groupDef.content == 'function')
+                        groupContent = groupDef.content(row);
+                    else
+                        groupContent = row[groupDef.content];
+                }
+                let groupIndex = groups.findIndex(g => g.group === groupValue);
+                if (groupIndex === -1) {
+                    groupIndex = groups.push({ group: groupValue, content: groupContent, expand: state.group.expandAll }) - 1;
+                }
+                rowGroups.push(groupIndex);
+            }
+        }
+        function first() { return loadPage(1); }
+        function prior() {
+            return go(Math.max(1, state.page.current - 1));
+        }
+        function next() { return go(state.page.current + 1); }
+        function last() { return state.page.count > 0 ? go(state.page.count) : undefined; }
+        function go(pageNumber) {
+            if (!Number.isInteger(pageNumber) || pageNumber < 1)
+                return;
+            const target = state.page.count > 0 ? Math.min(pageNumber, state.page.count) : pageNumber;
+            if (target !== state.page.current)
+                return loadPage(target);
+        }
+        function choosePage() {
+            const input = prompt('Page number:', String(state.page.current));
+            if (input === null || input.trim() === '')
+                return;
+            const pageNumber = Number(input);
+            if (Number.isInteger(pageNumber) && pageNumber > 0)
+                go(pageNumber);
+        }
+        function refresh() { return loadPage(Math.max(1, state.page.current)); }
+        function sortBy(columnIndex, direction) {
+            if (state.sort && state.sort.length > 0) {
+                let sortIndex = state.sort.findIndex(s => s.index === columnIndex);
+                if (sortIndex < 0) {
+                    const columnName = state.columns[columnIndex]?.name;
+                    sortIndex = state.sort.findIndex(s => s.name === columnName);
+                }
+                if (sortIndex === 0) {
+                    state.sort[sortIndex].dir = direction ? direction : (state.sort[0].dir ? null : 'desc');
+                }
+                else if (sortIndex > 0) {
+                    state.sort.splice(sortIndex, 1);
+                }
+                if (sortIndex !== 0) {
+                    state.sort.unshift({ index: columnIndex, dir: direction ? direction : null });
+                }
+                if (state.sort.length > 2) {
+                    state.sort.pop();
+                }
+            }
+            else {
+                state.sort.push({ index: columnIndex, dir: direction ? direction : null });
+            }
+            return loadPage(Math.max(1, state.page.current));
+        }
+        let requestId = 0;
+        async function loadPage(pageNumber) {
+            let dataArray = null;
+            if (props.data) {
+                if (Array.isArray(props.data))
+                    dataArray = props.data;
+            }
+            else
+                return;
+            const currentRequest = ++requestId;
+            state.status = TablevuStatus.Loading;
+            if (adapter) {
+                try {
+                    const result = await adapter({
+                        pageSize: state.page.size,
+                        currPage: pageNumber,
+                        sort: state.sort,
+                        cols: state.columns,
+                        filter: state.filter,
+                        search: state.search
+                    }, dataArray);
+                    if (currentRequest !== requestId)
+                        return;
+                    if (state.onData)
+                        rows = state.onData(result.rows);
+                    else
+                        rows = result.rows;
+                    const groupValue = state.group.value;
+                    if (groupValue && (typeof groupValue === 'string' || typeof groupValue === 'number' || typeof groupValue === 'bigint' || (typeof groupValue === 'object' && groupValue.value)))
+                        prepareGroup(state.group, rows);
+                    state.page.count = (result.count > 0 && state.page.size > 0) ? Math.ceil(result.count / state.page.size) : 0;
+                    state.page.current = pageNumber;
+                    state.status = TablevuStatus.Ready;
+                    state.time = Date.now();
+                }
+                catch (error) {
+                    if (currentRequest !== requestId)
+                        return;
+                    console.error(error);
+                    state.status = TablevuStatus.Error;
+                }
+            }
+        }
+        function renderValue(column, value) {
+            if (value !== null && value !== undefined) {
+                let formatted;
+                if (column.type === 'datetime' || column.type === 'date' || column.type === 'time') {
+                    const date = new Date(value);
+                    if (column.type === 'date')
+                        formatted = date.toLocaleDateString();
+                    else if (column.type === 'time')
+                        formatted = date.toLocaleTimeString();
+                    else
+                        formatted = date.toLocaleString();
+                }
+                else {
+                    if (column.type === 'numeric') {
+                        formatted = parseFloat(value);
+                    }
+                    else {
+                        if (column.type === 'integer') {
+                            formatted = parseInt(value, 10);
+                        }
+                        else
+                            formatted = value;
+                    }
+                }
+                return formatted;
+            }
+            else
+                return '';
+        }
+        function renderCell(column, value) {
+            const options = { style: {} };
+            if (column.colspan && column.colspan > 1)
+                options.colspan = column.colspan;
+            if (column.style)
+                options.style = { ...options.style, ...column.style };
+            if (column.align)
+                options.style['text-align'] = column.align;
+            if (column.width)
+                options.style['width'] = column.width;
+            const formatted = renderValue(column, value);
+            return vue.h('td', options, formatted);
+        }
+        function renderCustomCell(column, row) {
+            const options = { style: {} };
+            if (column.colspan && column.colspan > 1)
+                options.colspan = column.colspan;
+            if (column.style)
+                options.style = { ...options.style, ...column.style };
+            if (column.align)
+                options.style['text-align'] = column.align;
+            if (column.width)
+                options.style['width'] = column.width;
+            const content = column.render?.(row);
+            return vue.h('td', options, content);
+        }
+        function renderGroup(group) {
+            const expandButton = vue.h('button', {
+                title: String(group.expand),
+                onClick: (event) => {
+                    group.expand = !group.expand;
+                    event.currentTarget.value = group.expand ? '▼' : '►';
+                    state.time = Date.now();
+                    event.preventDefault();
+                },
+                style: { padding: 0, margin: '0 6px 0 0', width: '12px', height: '100%', border: 'none', outline: '0', backgroundColor: 'transparent' }
+            }, group.expand ? '▼' : '►');
+            const content = group.content || group.group;
+            return vue.h('tr', {}, vue.h('td', { colspan: state.columns.length, class: state.group.class }, [expandButton, content]));
+        }
+        function renderRow(rowIndex, row) {
+            const trProps = { key: rowIndex, index: rowIndex };
+            if (props.rowid)
+                trProps.rowid = row[props.rowid];
+            const cells = [];
+            for (let i = 0; i < state.columns.length; i++) {
+                const column = state.columns[i];
+                if (column.render) {
+                    cells.push(renderCustomCell(column, row));
+                }
+                else {
+                    let value;
+                    if (column.depth) {
+                        value = row;
+                        for (let j = 0; j < column.depth.length; j++) {
+                            if (value)
+                                value = value[column.depth[j]];
+                        }
+                    }
+                    else {
+                        value = row[column.name];
+                    }
+                    cells.push(renderCell(column, value));
+                }
+            }
+            trProps.ondblclick = (event) => {
+                const target = event.currentTarget;
+                const index = target.getAttribute('index');
+                if (index !== null) {
+                    const rowData = rows[parseInt(index, 10)];
+                    props.onRowDblClick?.(event, rowData);
+                    emit('row-dbl-click', event, rowData);
+                }
+            };
+            if (props.onRowClick) {
+                trProps.onClick = (event) => {
+                    const target = event.currentTarget;
+                    const index = target.getAttribute('index');
+                    if (index !== null) {
+                        const rowData = rows[parseInt(index, 10)];
+                        props.onRowClick?.(event, rowData);
+                        emit('row-click', event, rowData);
+                    }
+                };
+            }
+            return vue.h('tr', trProps, cells);
+        }
+        function renderHeader() {
+            const headers = [];
+            for (let i = 0; i < state.columns.length; i++) {
+                const labelContent = [];
+                if (state.columns[i].label)
+                    labelContent.push(vue.h('span', state.columns[i].label));
+                else
+                    labelContent.push(vue.h('span', state.columns[i].name));
+                if (state.sort && state.sort.length > 0 && state.sort[0].index === i) {
+                    if (state.sort[0].dir === 'desc')
+                        labelContent.push(vue.h('span', { style: { float: 'right' } }, '▼'));
+                    else
+                        labelContent.push(vue.h('span', { style: { float: 'right' } }, '▲'));
+                }
+                const headerStyle = { position: 'relative' };
+                if (state.columns[i].width) {
+                    headerStyle.width = state.columns[i].width;
+                    headerStyle.minWidth = state.columns[i].width;
+                    headerStyle.maxWidth = state.columns[i].width;
+                }
+                let headerLink;
+                let popupContent;
+                if (state.columns[i].popup) {
+                    const popupRef = vue.ref(null);
+                    const popupItems = [
+                        vue.h('a', { href: '#', onClick: (event) => { sortBy(i); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Ascending'),
+                        vue.h('a', { href: '#', onClick: (event) => { sortBy(i, 'desc'); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Descending'),
+                    ];
+                    headerLink = vue.h('a', {
+                        href: '#',
+                        onClick: (event) => {
+                            if (popupRef.value && popupRef.value.style && popupRef.value.style.display && popupRef.value.style.display === 'block')
+                                popupRef.value.style.display = 'none';
+                            else if (popupRef.value && popupRef.value.style)
+                                popupRef.value.style.display = 'block';
+                            event.preventDefault();
+                        },
+                        style: { display: 'block', 'font-weight': 500, textDecoration: 'none', textAlign: 'center' }
+                    }, labelContent);
+                    popupContent = vue.h('div', {
+                        ref: popupRef,
+                        style: { position: 'absolute', display: 'none', width: state.columns[i].width || '12rem', height: 'fit-content', border: '1px solid lightgray', backgroundColor: 'whitesmoke', zIndex: 1, left: 0, top: '2rem', bottom: 0, right: 0, padding: '.25rem' }
+                    }, popupItems);
+                }
+                else
+                    headerLink = vue.h('a', { href: '#', onClick: (event) => { sortBy(i); event.preventDefault(); }, style: { display: 'block', 'font-weight': 500, textDecoration: 'none', textAlign: 'center' } }, labelContent);
+                if (state.columns[i].filter) ;
+                headers.push(vue.h('th', { colspan: null, style: headerStyle }, [headerLink, popupContent]));
+            }
+            return [vue.h('tr', {}, headers)];
+        }
+        function renderBody() {
+            const rowsHtml = [];
+            if (rows && rows.length > 0) {
+                if (groups && groups.length > 0) {
+                    const groupRows = [];
+                    for (let g = 0; g < groups.length; g++)
+                        groupRows.push({ index: g, childs: [] });
+                    for (let i = 0; i < rows.length; i++) {
+                        const groupIdx = rowGroups[i];
+                        groupRows[groupIdx].childs.push(renderRow(i, rows[i]));
+                    }
+                    for (let g = 0; g < groups.length; g++) {
+                        rowsHtml.push(renderGroup(groups[g]));
+                        if (groups[g].expand)
+                            rowsHtml.push(groupRows[g].childs);
+                    }
+                }
+                else {
+                    for (let i = 0; i < rows.length; i++) {
+                        rowsHtml.push(renderRow(i, rows[i]));
+                    }
+                }
+            }
+            else if (state.settings?.emptyMessage) {
+                rowsHtml.push(vue.h('tr', {}, vue.h('td', { colspan: state.columns.length, style: { textAlign: 'center', padding: '2rem', color: '#666' } }, state.settings.emptyMessage)));
+            }
+            return rowsHtml;
+        }
+        function renderFooter() {
+            const icons = {
+                first: `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" style="transform:scale(1.15)"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/></svg>`,
+                prior: `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" style="transform:scale(1.15)"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>`,
+                next: `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" style="transform:scale(1.15)"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
+                last: `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" style="transform:scale(1.15)"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>`
+            };
+            const buttonProps = { class: state.footer.button?.class, style: 'font: initial; margin-right: .5rem' };
+            const firstBtn = vue.h('button', { ...buttonProps, type: 'button', onClick: (e) => { e.preventDefault(); first(); }, disabled: state.page.current === 1, innerHTML: icons.first });
+            const lastBtn = vue.h('button', { ...buttonProps, type: 'button', onClick: (e) => { e.preventDefault(); last(); }, disabled: state.page.count === 0 || state.page.current === state.page.count, innerHTML: icons.last });
+            const pageBtn = vue.h('button', { ...buttonProps, type: 'button', onClick: (e) => { e.preventDefault(); choosePage(); } }, state.page.current + (state.page.count > 0 ? (' / ' + state.page.count) : ''));
+            const priorBtn = vue.h('button', { ...buttonProps, type: 'button', onClick: (e) => { e.preventDefault(); prior(); }, disabled: state.page.current === 1, innerHTML: icons.prior });
+            const nextBtn = vue.h('button', { ...buttonProps, type: 'button', onClick: (e) => { e.preventDefault(); next(); }, disabled: state.page.count > 0 && state.page.current === state.page.count, innerHTML: icons.next });
+            const td = vue.h('td', { colspan: state.columns.length, align: 'center' }, [firstBtn, priorBtn, pageBtn, nextBtn, lastBtn]);
+            const tr = vue.h('tr', {}, [td]);
+            return [tr];
+        }
+        function renderCaption() {
+            return '';
+        }
+        if (state.columns.length === 0) {
+            console.error('Columns not defined !');
+        }
+        for (let i = 0; i < state.columns.length; i++)
+            if (state.columns[i].name && state.columns[i].name.includes('.')) {
+                state.columns[i].depth = state.columns[i].name.split('.');
+            }
+        loadPage(1);
+        const methods = {
+            first,
+            prior,
+            next,
+            last,
+            go,
+            page: loadPage,
+            refresh,
+            sortBy,
+            getRows: () => rows,
+            setRows: (newRows) => { rows = [...newRows]; state.time = Date.now(); }
+        };
+        expose(methods);
+        return {
+            state,
+            ...methods,
+            renderHeader,
+            renderBody,
+            renderFooter,
+            renderCaption
+        };
+    },
+    render(props) {
+        const tableProps = {
+            class: 'tablevu',
+            style: [{ tableLayout: 'fixed', width: '100%' }, props.style]
+        };
+        if (props.class)
+            tableProps.class = 'tablevu ' + props.class;
+        const content = [];
+        content.push(vue.h('thead', {}, this.renderHeader()));
+        if (this.state.status === TablevuStatus.Ready)
+            content.push(vue.h('tbody', { 'data-time': this.state.time }, this.renderBody()));
+        if (this.state.caption)
+            content.push(vue.h('caption', {}, this.renderCaption()));
+        if (this.state.status === TablevuStatus.Ready)
+            if (this.state.page.size > 0)
+                content.push(vue.h('tfoot', {}, this.renderFooter()));
+        return vue.h('table', tableProps, content);
+    }
+});
+
+const fieldPath = (filter, lambdaVariable) => {
+    const field = filter.field ?? filter.column;
+    if (!field)
+        throw new TypeError(`OData operator "${filter.operator}" requires a field.`);
+    const path = field.replace(/\./g, '/');
+    return lambdaVariable && path !== lambdaVariable && !path.startsWith(`${lambdaVariable}/`)
+        ? `${lambdaVariable}/${path}` : path;
+};
+function formatValue(value) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return `'${value.replace(/'/g, "''")}'`;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value))
+            throw new TypeError('OData numeric values must be finite.');
+        return String(value);
+    }
+    if (typeof value === 'boolean')
+        return String(value);
+    if (value instanceof Date) {
+        if (Number.isNaN(value.getTime()))
+            throw new TypeError('Invalid Date cannot be used in an OData filter.');
+        return value.toISOString();
+    }
+    throw new TypeError(`Unsupported OData filter value: ${Object.prototype.toString.call(value)}.`);
+}
+function requireString(value, operator) {
+    if (typeof value !== 'string')
+        throw new TypeError(`OData operator "${operator}" requires a string value.`);
+    return value.replace(/'/g, "''");
+}
+function buildExpression(expression, lambdaVariable) {
+    const { operator } = expression;
+    if (operator === 'and' || operator === 'or' || operator === 'not') {
+        const children = expression.filters ?? (expression.filter ? [expression.filter] : []);
+        if (operator === 'not') {
+            if (children.length !== 1)
+                throw new TypeError('OData "not" requires exactly one child filter.');
+            return `not (${buildExpression(children[0], lambdaVariable)})`;
+        }
+        if (children.length < 2)
+            throw new TypeError(`OData "${operator}" requires at least two child filters.`);
+        return `(${children.map(child => buildExpression(child, lambdaVariable)).join(` ${operator} `)})`;
+    }
+    if (operator === 'any' || operator === 'all') {
+        const collection = fieldPath(expression, lambdaVariable);
+        const child = expression.filter;
+        if (!child)
+            throw new TypeError(`OData "${operator}" requires a filter expression.`);
+        const variable = expression.variable ?? 'item';
+        if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(variable))
+            throw new TypeError('Invalid OData lambda variable.');
+        return `${collection}/${operator}(${variable}: ${buildExpression(child, variable)})`;
+    }
+    if (operator.startsWith('count')) {
+        const op = { countGt: 'gt', countGe: 'ge', countLt: 'lt', countLe: 'le' }[operator];
+        if (typeof expression.value !== 'number' || !Number.isInteger(expression.value) || expression.value < 0)
+            throw new TypeError(`OData operator "${operator}" requires a non-negative integer value.`);
+        return `${fieldPath(expression, lambdaVariable)}/$count ${op} ${expression.value}`;
+    }
+    const field = fieldPath(expression, lambdaVariable);
+    const value = expression.value;
+    switch (operator) {
+        case 'eq':
+        case 'ne':
+        case 'gt':
+        case 'ge':
+        case 'lt':
+        case 'le':
+            return `${field} ${operator} ${formatValue(value)}`;
+        case 'contains':
+        case 'startsWith':
+        case 'endsWith': {
+            const functionName = operator === 'startsWith' ? 'startswith' : operator === 'endsWith' ? 'endswith' : 'contains';
+            return `${functionName}(${field},'${requireString(value, operator)}')`;
+        }
+        case 'in': {
+            if (!Array.isArray(value) || value.length === 0)
+                throw new TypeError('OData "in" requires a non-empty array value.');
+            return `${field} in (${value.map(formatValue).join(',')})`;
+        }
+        case 'between': {
+            if (!Array.isArray(value) || value.length !== 2)
+                throw new TypeError('OData "between" requires exactly two values.');
+            return `(${field} ge ${formatValue(value[0])} and ${field} le ${formatValue(value[1])})`;
+        }
+        case 'isNull': return `${field} eq null`;
+        case 'isNotNull': return `${field} ne null`;
+        default: throw new TypeError(`Unsupported OData filter operator: ${operator}.`);
+    }
+}
+/** Converts the typed filter tree into an OData `$filter` expression. */
+function buildFilter(filter) {
+    if (filter == null || filter === '')
+        return '';
+    if (typeof filter === 'string')
+        return filter;
+    return buildExpression(filter);
+}
+function createODataAdapter(options) {
+    return async (params = {}) => {
+        const url = new URL(options.url);
+        if (params.pageSize && params.pageSize > 0) {
+            const page = Math.max(1, params.currPage ?? 1);
+            url.searchParams.set('$skip', String(params.pageSize * (page - 1)));
+            url.searchParams.set('$top', String(params.pageSize));
+        }
+        if (options.count)
+            url.searchParams.set('$count', 'true');
+        if (options.select?.length)
+            url.searchParams.set('$select', options.select.join(','));
+        if (options.expand?.length) {
+            url.searchParams.set('$expand', options.expand.map(expand => {
+                const options = [];
+                if (expand.select?.length)
+                    options.push(`$select=${expand.select.join(',')}`);
+                if (expand.filter)
+                    options.push(`$filter=${buildFilter(expand.filter)}`);
+                if (expand.orderby)
+                    options.push(`$orderby=${expand.orderby}`);
+                return options.length ? `${expand.name}(${options.join(';')})` : expand.name;
+            }).join(','));
+        }
+        const filters = [];
+        const staticFilter = buildFilter(options.filter);
+        const dynamicFilter = buildFilter(params.filter);
+        if (staticFilter)
+            filters.push(`(${staticFilter})`);
+        if (dynamicFilter)
+            filters.push(`(${dynamicFilter})`);
+        if (params.search?.trim()) {
+            const term = params.search.replace(/'/g, "''");
+            const searchable = (params.cols ?? []).filter(column => column.searchable !== false);
+            const searchFilter = searchable.map(column => `contains(${column.name.replace(/\./g, '/')},'${term}')`).join(' or ');
+            if (searchFilter)
+                filters.push(`(${searchFilter})`);
+        }
+        if (filters.length)
+            url.searchParams.set('$filter', filters.join(' and '));
+        if (params.sort?.length) {
+            const order = params.sort.map(sort => {
+                const name = sort.index !== undefined && sort.index >= 0
+                    ? params.cols?.[sort.index]?.name
+                    : sort.name;
+                if (!name)
+                    return '';
+                const direction = sort.dir?.toLowerCase();
+                if (direction && direction !== 'asc' && direction !== 'desc')
+                    throw new TypeError(`Invalid sort direction: ${sort.dir}.`);
+                return `${name.replace(/\./g, '/')}${direction ? ` ${direction}` : ''}`;
+            }).filter(Boolean);
+            if (order.length)
+                url.searchParams.set('$orderby', order.join(','));
+        }
+        let request = new Request(url, { headers: options.headers, credentials: options.credentials });
+        if (options.onfetch)
+            request = await options.onfetch(request);
+        const response = await (options.fetch ?? fetch)(request);
+        if (!response.ok)
+            throw new Error(`OData request failed: ${response.status} ${response.statusText}`);
+        const payload = await response.json();
+        const rows = Array.isArray(payload.value) ? payload.value : [];
+        return { rows, count: typeof payload['@odata.count'] === 'number' ? payload['@odata.count'] : rows.length };
+    };
+}
+
+exports.TableVu = tablevu;
+exports.TablevuStatus = TablevuStatus;
+exports.adaptArray = adaptArray;
+exports.buildFilter = buildFilter;
+exports.odata = createODataAdapter;