tablevu 0.2.22 → 0.3.0-beta.2

package/dist/tablevu-index.umd.cjs.js

@@ -0,0 +1,1086 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.tablevu = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
+
+    function adaptArray(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 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 = row[col.name];
+                                return val && String(val).toLowerCase().includes(searchLower);
+                            });
+                        });
+                    }
+                    // Update d with filtered results
+                    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 start = (props.currPage - 1) * props.pageSize;
+                    const end = props.currPage * 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 = {
+        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, default: null }
+        },
+        emits: ['onRowClick', 'onRowDblClick'],
+        setup(props, { attrs, slots, emit, expose }) {
+            let rows = [];
+            let rowg = [];
+            let grps = [];
+            let adapter = null;
+            let timer = null;
+            const spec = vue.reactive({
+                caption: null,
+                group: {
+                    value: (props.settings && props.settings.group) ? props.settings.group.value : props.group ? props.group : null,
+                    content: (props.settings && props.settings.group) ? props.settings.group.content : null,
+                    expandAll: true,
+                    class: 'table-light'
+                },
+                page: {
+                    count: 0,
+                    size: (props.settings && props.settings.page) ? 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 && props.settings.onData) ? props.settings.onData : undefined
+            });
+            if (props.data) {
+                if (Array.isArray(props.data)) {
+                    adapter = adaptArray;
+                }
+                else {
+                    adapter = props.data;
+                }
+            }
+            if (props.search)
+                spec.search = props.search;
+            vue.watch(() => props.search, (n, o) => {
+                const x = parseInt(String(props.settings?.searchMinChar)) || 3;
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = null;
+                }
+                if (n && n.length > x) {
+                    spec.search = n;
+                    timer = setTimeout(() => { refresh(); timer = null; }, 444);
+                }
+                else if (o && o.length > x && (n == undefined || n == null || n.length <= x)) {
+                    spec.search = null;
+                    timer = setTimeout(() => { refresh(); timer = null; }, 444);
+                }
+            });
+            if (props.filter)
+                spec.filter = props.filter;
+            vue.watch(() => props.filter, () => {
+                if (props.filter)
+                    spec.filter = props.filter;
+                else
+                    spec.filter = null;
+                refresh();
+            }, { deep: true });
+            vue.watch(() => props.command, (n, o) => {
+                if (n && n.length > 0) {
+                    const c = props.command[n.length - 1];
+                    if (c && c.name) {
+                        switch (c.name.toLowerCase()) {
+                            case 'refresh':
+                                refresh();
+                                break;
+                            case 'first':
+                                first();
+                                break;
+                            case 'prior':
+                                prior();
+                                break;
+                            case 'next':
+                                next();
+                                break;
+                            case 'last':
+                                last();
+                                break;
+                            default: console.log('Unknown command');
+                        }
+                    }
+                    props.command.length = 0;
+                }
+            }, { deep: true });
+            function prepareGroup(g, r) {
+                grps = [];
+                rowg = [];
+                for (let i = 0; i < r.length; i++) {
+                    let v = null;
+                    let c = null;
+                    const o = r[i];
+                    if (g.value) {
+                        if (typeof g.value == 'function')
+                            v = g.value(o);
+                        else
+                            v = o[g.value];
+                    }
+                    else if (typeof g == 'function') {
+                        v = g(o);
+                    }
+                    else {
+                        if (typeof g == 'bigint' || typeof g == 'number') {
+                            const l = parseFloat(String(g));
+                            if (l)
+                                v = o[l];
+                        }
+                        else if (typeof g == 'string')
+                            v = o[g];
+                    }
+                    if (g.content) {
+                        if (typeof g.content == 'function')
+                            c = g.content(o);
+                        else
+                            c = o[g.content];
+                    }
+                    let n = grps.findIndex(f => f.group == v);
+                    if (n == -1) {
+                        n = grps.push({ group: v, content: c, expand: spec.group.expandAll }) - 1;
+                    }
+                    rowg.push(n);
+                }
+            }
+            function first() { page(1); }
+            function prior() {
+                if (spec.page.current > 1) {
+                    page(spec.page.current - 1);
+                }
+                else {
+                    page(spec.page.current);
+                }
+            }
+            function next() { page(spec.page.current + 1); }
+            function last() { page(spec.page.count); }
+            function go() {
+                let p;
+                let g = spec.page.current;
+                do {
+                    p = prompt(undefined, String(spec.page.current));
+                    g = parseInt(p || '0');
+                } while (p && isNaN(g));
+                if (g && g > 0 && g != spec.page.current)
+                    page(g);
+            }
+            function refresh() { page(spec.page.current); }
+            function orderby(ind, dir) {
+                if (spec.sort && spec.sort.length > 0) {
+                    let l = spec.sort.findIndex(f => f.index == ind);
+                    if (l < 0) {
+                        let n = spec.columns[ind]?.name;
+                        l = spec.sort.findIndex(f => f.name == n);
+                    }
+                    if (l == 0) {
+                        spec.sort[l].dir = dir ? dir : (spec.sort[0].dir ? null : 'desc');
+                    }
+                    else if (l > 0) {
+                        spec.sort.splice(l, 1);
+                    }
+                    if (l != 0) {
+                        spec.sort.unshift({ index: ind, dir: dir ? dir : null });
+                    }
+                    if (spec.sort.length > 2) {
+                        spec.sort.pop();
+                    }
+                }
+                else {
+                    spec.sort.push({ index: ind, dir: dir ? dir : null });
+                }
+                page(spec.page.current);
+            }
+            function page(currentPage) {
+                let dat = null;
+                if (props.data) {
+                    if (Array.isArray(props.data))
+                        dat = props.data;
+                }
+                else
+                    return;
+                spec.status = TablevuStatus.Loading;
+                if (adapter) {
+                    adapter({
+                        pageSize: spec.page.size,
+                        currPage: currentPage,
+                        sort: spec.sort,
+                        cols: spec.columns,
+                        filter: spec.filter,
+                        search: spec.search
+                    }, dat).then(ada => {
+                        if (spec.onData)
+                            rows = spec.onData(ada.rows);
+                        else
+                            rows = ada.rows;
+                        const groupValue = spec.group.value;
+                        if (groupValue && (typeof groupValue == 'string' || typeof groupValue == 'number' || typeof groupValue == 'bigint' || (typeof groupValue == 'object' && groupValue.value)))
+                            prepareGroup(spec.group, rows);
+                        spec.page.count = (ada.count > 0 && spec.page.size > 0) ? Math.ceil(ada.count / spec.page.size) : 0;
+                        spec.page.current = currentPage;
+                        spec.status = TablevuStatus.Ready;
+                        spec.time = Date.now();
+                    }).catch(err => {
+                        console.error(err);
+                        spec.status = TablevuStatus.Error;
+                    });
+                }
+            }
+            function renderValue(col, val) {
+                if (val) {
+                    let v;
+                    if (col.type == 'datetime' || col.type == 'date' || col.type == 'time') {
+                        const t = new Date(val);
+                        if (col.type == 'date')
+                            v = t.toLocaleDateString();
+                        else if (col.type == 'time')
+                            v = t.toLocaleTimeString();
+                        else
+                            v = t.toLocaleString();
+                    }
+                    else {
+                        if (col.type == 'numeric') {
+                            v = parseFloat(val);
+                        }
+                        else {
+                            if (col.type == 'integer') {
+                                v = parseInt(val);
+                            }
+                            else
+                                v = val;
+                        }
+                    }
+                    return v;
+                }
+                else
+                    return '';
+            }
+            function renderCell(col, val) {
+                const o = { style: {} };
+                if (col.colspan && col.colspan > 1)
+                    o.colspan = col.colspan;
+                if (col.style)
+                    o.style = { ...o.style, ...col.style };
+                if (col.align)
+                    o.style['text-align'] = col.align;
+                if (col.width)
+                    o.style['max-width'] = col.width;
+                const v = renderValue(col, val);
+                return vue.h('td', o, v);
+            }
+            function renderCustomCell(col, row) {
+                const o = { style: {} };
+                if (col.colspan && col.colspan > 1)
+                    o.colspan = col.colspan;
+                if (col.style)
+                    o.style = { ...o.style, ...col.style };
+                if (col.align)
+                    o.style['text-align'] = col.align;
+                if (col.width)
+                    o.style['max-width'] = col.width;
+                const f = col.render(row);
+                return vue.h('td', o, f);
+            }
+            function renderGroup(grp) {
+                const b = vue.h('button', {
+                    title: String(grp.expand),
+                    onClick: (event) => {
+                        grp.expand = !grp.expand;
+                        event.currentTarget.value = grp.expand ? '▼' : '►';
+                        spec.time = Date.now();
+                        event.preventDefault();
+                    },
+                    style: { padding: 0, margin: '0 6px 0 0', width: '12px', height: '100%', border: 'none', outline: '0', backgroundColor: 'transparent' }
+                }, grp.expand ? '▼' : '►');
+                const v = grp.content || grp.group;
+                return vue.h('tr', {}, vue.h('td', { colspan: spec.columns.length, class: spec.group.class }, [b, v]));
+            }
+            function renderRow(index, row) {
+                const o = { key: index, index: index };
+                if (props.rowid)
+                    o.rowid = row[props.rowid];
+                const r = [];
+                for (let i = 0; i < spec.columns.length; i++) {
+                    const c = spec.columns[i];
+                    if (c.render) {
+                        r.push(renderCustomCell(c, row));
+                    }
+                    else {
+                        let v;
+                        if (c.depth) {
+                            v = row;
+                            for (let j = 0; j < c.depth.length; j++) {
+                                if (v)
+                                    v = v[c.depth[j]];
+                            }
+                        }
+                        else {
+                            v = row[c.name];
+                        }
+                        r.push(renderCell(c, v));
+                    }
+                }
+                o.ondblclick = (event) => {
+                    const target = event.currentTarget;
+                    const idx = target.getAttribute('index');
+                    if (idx !== null) {
+                        const rowData = rows[parseInt(idx)];
+                        emit('onRowDblClick', event, rowData);
+                    }
+                };
+                if (props.onRowClick) {
+                    o.onClick = (event) => {
+                        const target = event.currentTarget;
+                        const idx = target.getAttribute('index');
+                        if (idx !== null) {
+                            const rowData = rows[parseInt(idx)];
+                            props.onRowClick(event, rowData);
+                        }
+                    };
+                }
+                return vue.h('tr', o, r);
+            }
+            function renderHeader() {
+                const ar = [];
+                for (let i = 0; i < spec.columns.length; i++) {
+                    const cl = [];
+                    if (spec.columns[i].label)
+                        cl.push(vue.h('span', spec.columns[i].label));
+                    else
+                        cl.push(vue.h('span', spec.columns[i].name));
+                    if (spec.sort && spec.sort.length > 0 && spec.sort[0].index == i) {
+                        if (spec.sort[0].dir == 'desc')
+                            cl.push(vue.h('span', { style: { float: 'right' } }, '▼'));
+                        else
+                            cl.push(vue.h('span', { style: { float: 'right' } }, '▲'));
+                    }
+                    const ch = { position: 'relative' };
+                    if (spec.columns[i].width) {
+                        ch.width = spec.columns[i].width;
+                        ch.minWidth = spec.columns[i].width;
+                        ch.maxWidth = spec.columns[i].width;
+                    }
+                    const cy = { display: 'block', 'font-weight': 500, textDecoration: 'none', textAlign: 'center' };
+                    let a;
+                    let f;
+                    if (spec.columns[i].popup) {
+                        const r = vue.ref(null);
+                        const c = [
+                            vue.h('a', { href: '#', onClick: (event) => { orderby(i); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Ascending'),
+                            vue.h('a', { href: '#', onClick: (event) => { orderby(i, 'desc'); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Descending'),
+                        ];
+                        a = vue.h('a', {
+                            href: '#',
+                            onClick: (event) => {
+                                if (r.value && r.value.style && r.value.style.display && r.value.style.display == 'block')
+                                    r.value.style.display = 'none';
+                                else if (r.value && r.value.style)
+                                    r.value.style.display = 'block';
+                                event.preventDefault();
+                            },
+                            style: cy
+                        }, cl);
+                        f = vue.h('div', {
+                            ref: r,
+                            style: { position: 'absolute', display: 'none', width: spec.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' }
+                        }, c);
+                    }
+                    else
+                        a = vue.h('a', { href: '#', onClick: (event) => { orderby(i); event.preventDefault(); }, style: cy }, cl);
+                    if (spec.columns[i].filter) ;
+                    ar.push(vue.h('th', { colspan: null, style: ch }, [a, f]));
+                }
+                const tr = vue.h('tr', {}, ar);
+                return [tr];
+            }
+            function renderBody() {
+                const dr = [];
+                if (rows && rows.length > 0) {
+                    if (grps && grps.length > 0) {
+                        const r = [];
+                        for (let g = 0; g < grps.length; g++)
+                            r.push({ index: g, childs: [] });
+                        for (let i = 0; i < rows.length; i++) {
+                            const x = rowg[i];
+                            r[x].childs.push(renderRow(i, rows[i]));
+                        }
+                        for (let g = 0; g < grps.length; g++) {
+                            dr.push(renderGroup(grps[g]));
+                            if (grps[g].expand)
+                                dr.push(r[g].childs);
+                        }
+                    }
+                    else {
+                        for (let i = 0; i < rows.length; i++) {
+                            dr.push(renderRow(i, rows[i]));
+                        }
+                    }
+                }
+                return dr;
+            }
+            function renderFooter() {
+                const fr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: first, disabled: spec.page.current == 1 }, '◀◀');
+                const ls = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: last, disabled: spec.page.count == 0 || spec.page.current == spec.page.count }, '▶▶');
+                const pg = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: go }, spec.page.current + (spec.page.count > 0 ? (' / ' + spec.page.count) : ''));
+                const pr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: prior, disabled: spec.page.current == 1 }, '◀');
+                const nx = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: next, disabled: spec.page.count > 0 && spec.page.current == spec.page.count }, '▶');
+                const td = vue.h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
+                const tr = vue.h('tr', {}, [td]);
+                return [tr];
+            }
+            function renderCaption() {
+                return null;
+            }
+            if (spec.columns.length == 0) {
+                console.error('Columns not defined !');
+            }
+            for (let i = 0; i < spec.columns.length; i++)
+                if (spec.columns[i].name && spec.columns[i].name.indexOf('.') > -1) {
+                    spec.columns[i].depth = spec.columns[i].name.split('.');
+                }
+            page(1);
+            vue.onMounted(() => {
+                // mounted hook
+            });
+            return {
+                spec, renderHeader, renderBody, renderFooter, renderCaption
+            };
+        },
+        render(props) {
+            let prps = { class: 'tablevu' };
+            if (props.class)
+                prps.class = 'tablevu ' + props.class;
+            if (props.style)
+                prps.style = props.style;
+            const cntn = [];
+            cntn.push(vue.h('thead', {}, this.renderHeader()));
+            if (this.spec.status == TablevuStatus.Ready)
+                cntn.push(vue.h('tbody', { 'data-time': this.spec.time }, this.renderBody()));
+            if (this.spec.caption)
+                cntn.push(vue.h('caption', {}, this.renderCaption()));
+            if (this.spec.status == TablevuStatus.Ready)
+                if (this.spec.page.size > 0)
+                    cntn.push(vue.h('tfoot', {}, this.renderFooter()));
+            return vue.h('table', prps, cntn);
+        }
+    };
+
+    /* ==========================================================================
+     * OData DataTable Query Builder
+     * ========================================================================== */
+    /* ==========================================================================
+     * Value
+     * ========================================================================== */
+    function formatValue(value) {
+        if (value === null)
+            return 'null';
+        if (typeof value === 'string')
+            return `'${escapeODataString(value)}'`;
+        if (typeof value === 'number') {
+            if (!Number.isFinite(value))
+                throw new Error('Invalid numeric value.');
+            return String(value);
+        }
+        if (typeof value === 'boolean')
+            return value ? 'true' : 'false';
+        if (value instanceof Date)
+            return value.toISOString();
+        /*
+         * Backward compatibility with:
+         *
+         * {
+         *     func: 'now',
+         *     params: []
+         * }
+         */
+        if (typeof value === 'object' &&
+            value !== null &&
+            'func' in value &&
+            'params' in value) {
+            const funcValue = value;
+            return (funcValue.func +
+                '(' +
+                funcValue.params
+                    .map(m => formatValue(m))
+                    .join(',') +
+                ')');
+        }
+        throw new Error(`Unsupported OData value type: ${typeof value}`);
+    }
+    function escapeODataString(value) {
+        /*
+         * OData escapes a single quote by doubling it.
+         *
+         * O'Reilly
+         * ↓
+         * 'O''Reilly'
+         */
+        return value.replace(/'/g, "''");
+    }
+    /* ==========================================================================
+     * Filter
+     * ========================================================================== */
+    function toODataFilter(filter) {
+        return buildFilter(filter);
+    }
+    function buildFilter(filter) {
+        if (!filter)
+            throw new Error('Invalid filter.');
+        /*
+         * Backward compatibility:
+         *
+         * {
+         *     func: 'contains',
+         *     params: [...]
+         * }
+         */
+        if (filter.func) {
+            return buildFunctionObject(filter);
+        }
+        switch (filter.operator) {
+            /* ------------------------------------------------------------------ */
+            /* Logical                                                            */
+            /* ------------------------------------------------------------------ */
+            case 'and':
+                return buildLogical(filter, 'and');
+            case 'or':
+                return buildLogical(filter, 'or');
+            case 'not':
+                return buildNot(filter);
+            /* ------------------------------------------------------------------ */
+            /* Comparison                                                         */
+            /* ------------------------------------------------------------------ */
+            case 'eq':
+            case 'ne':
+            case 'gt':
+            case 'ge':
+            case 'lt':
+            case 'le':
+                return buildComparison(filter);
+            /* ------------------------------------------------------------------ */
+            /* String                                                             */
+            /* ------------------------------------------------------------------ */
+            case 'contains':
+                return buildFunction(filter, 'contains');
+            case 'startsWith':
+                return buildFunction(filter, 'startswith');
+            case 'endsWith':
+                return buildFunction(filter, 'endswith');
+            /* ------------------------------------------------------------------ */
+            /* Value                                                              */
+            /* ------------------------------------------------------------------ */
+            case 'in':
+                return buildIn(filter);
+            case 'between':
+                return buildBetween(filter);
+            case 'isNull':
+                return `${getColumn(filter)} eq null`;
+            case 'isNotNull':
+                return `${getColumn(filter)} ne null`;
+            /* ------------------------------------------------------------------ */
+            /* Collection                                                         */
+            /* ------------------------------------------------------------------ */
+            case 'any':
+                return buildAny(filter);
+            case 'all':
+                return buildAll(filter);
+            /* ------------------------------------------------------------------ */
+            /* Collection count                                                   */
+            /* ------------------------------------------------------------------ */
+            case 'countGt':
+            case 'countGe':
+            case 'countLt':
+            case 'countLe':
+                return buildCount(filter);
+            default:
+                throw new Error(`Unsupported OData operator: ${filter.operator}`);
+        }
+    }
+    /* ==========================================================================
+     * Logical
+     * ========================================================================== */
+    function buildLogical(filter, operator) {
+        const filters = filter.filters || [];
+        if (filters.length === 0)
+            return '';
+        return filters
+            .map(buildFilter)
+            .map(expression => `(${expression})`)
+            .join(` ${operator} `);
+    }
+    function buildNot(filter) {
+        const filters = filter.filters || [];
+        if (filters.length !== 1)
+            return '';
+        return `not (${buildFilter(filters[0])})`;
+    }
+    /* ==========================================================================
+     * Comparison
+     * ========================================================================== */
+    function buildComparison(filter) {
+        const column = getColumn(filter);
+        return (`${column} ` +
+            `${filter.operator} ` +
+            `${formatValue(filter.value)}`);
+    }
+    /* ==========================================================================
+     * String functions
+     * ========================================================================== */
+    function buildFunction(filter, functionName) {
+        const column = getColumn(filter);
+        return (`${functionName}(` +
+            `${column},` +
+            `${formatValue(filter.value)}` +
+            `)`);
+    }
+    /* ==========================================================================
+     * Function object
+     *
+     * Backward compatibility with the old:
+     *
+     * {
+     *     func: 'contains',
+     *     params: [...]
+     * }
+     * ========================================================================== */
+    function buildFunctionObject(filter) {
+        if (!filter.func)
+            throw new Error('Function is required.');
+        return (filter.func +
+            '(' +
+            (filter.params ?? [])
+                .map(m => formatValue(m))
+                .join(',') +
+            ')');
+    }
+    /* ==========================================================================
+     * IN
+     * ========================================================================== */
+    function buildIn(filter) {
+        const column = getColumn(filter);
+        if (!Array.isArray(filter.value))
+            throw new Error("Operator 'in' requires an array value.");
+        if (filter.value.length === 0)
+            throw new Error("Operator 'in' requires at least one value.");
+        return (`${column} in (` +
+            filter.value
+                .map(formatValue)
+                .join(',') +
+            `)`);
+    }
+    /* ==========================================================================
+     * BETWEEN
+     * ========================================================================== */
+    function buildBetween(filter) {
+        const column = getColumn(filter);
+        if (!Array.isArray(filter.value) ||
+            filter.value.length !== 2) {
+            throw new Error("Operator 'between' requires exactly two values.");
+        }
+        const [min, max] = filter.value;
+        return (`(${column} ge ${formatValue(min)} ` +
+            `and ${column} le ${formatValue(max)})`);
+    }
+    /* ==========================================================================
+     * ANY
+     * ========================================================================== */
+    function buildAny(filter) {
+        const column = getColumn(filter);
+        /*
+         * orders/any()
+         */
+        if (!filter.filters?.length)
+            return `${column}/any()`;
+        if (filter.filters.length !== 1)
+            throw new Error("Operator 'any' requires exactly one filter.");
+        return (`${column}/any(x: ` +
+            `${buildLambdaFilter(filter.filters[0], 'x')}` +
+            `)`);
+    }
+    /* ==========================================================================
+     * ALL
+     * ========================================================================== */
+    function buildAll(filter) {
+        const column = getColumn(filter);
+        const filters = filter.filters || [];
+        if (filters.length !== 1)
+            return '';
+        return (`${column}/all(x: ` +
+            `${buildLambdaFilter(filters[0], 'x')}` +
+            `)`);
+    }
+    /* ==========================================================================
+     * Lambda filter
+     * ========================================================================== */
+    function buildLambdaFilter(filter, variable) {
+        /*
+         * Logical
+         */
+        if (filter.operator === 'and')
+            return buildLambdaLogical(filter, variable, 'and');
+        if (filter.operator === 'or')
+            return buildLambdaLogical(filter, variable, 'or');
+        if (filter.operator === 'not') {
+            const filters = requireFilters(filter);
+            if (filters.length !== 1)
+                throw new Error("Operator 'not' requires exactly one filter.");
+            return (`not (` +
+                `${buildLambdaFilter(filters[0], variable)}` +
+                `)`);
+        }
+        /*
+         * Comparison
+         */
+        switch (filter.operator) {
+            case 'eq':
+            case 'ne':
+            case 'gt':
+            case 'ge':
+            case 'lt':
+            case 'le':
+                return (`${variable}/${getColumn(filter)} ` +
+                    `${filter.operator} ` +
+                    `${formatValue(filter.value)}`);
+            /*
+             * String
+             */
+            case 'contains':
+                return (`contains(` +
+                    `${getLambdaColumn(filter, variable)},` +
+                    `${formatValue(filter.value)}` +
+                    `)`);
+            case 'startsWith':
+                return (`startswith(` +
+                    `${getLambdaColumn(filter, variable)},` +
+                    `${formatValue(filter.value)}` +
+                    `)`);
+            case 'endsWith':
+                return (`endswith(` +
+                    `${getLambdaColumn(filter, variable)},` +
+                    `${formatValue(filter.value)}` +
+                    `)`);
+            /*
+             * Null
+             */
+            case 'isNull':
+                return (`${getLambdaColumn(filter, variable)} eq null`);
+            case 'isNotNull':
+                return (`${getLambdaColumn(filter, variable)} ne null`);
+            default:
+                throw new Error(`Operator '${filter.operator}' ` +
+                    `is not supported inside any/all.`);
+        }
+    }
+    function buildLambdaLogical(filter, variable, operator) {
+        const filters = requireFilters(filter);
+        if (filters.length === 0)
+            throw new Error(`Operator '${filter.operator}' requires at least one filter.`);
+        return filters
+            .map(item => buildLambdaFilter(item, variable))
+            .map(expression => `(${expression})`)
+            .join(` ${operator} `);
+    }
+    /* ==========================================================================
+     * Collection count
+     * ========================================================================== */
+    function buildCount(filter) {
+        const column = getColumn(filter);
+        const operators = {
+            countGt: 'gt',
+            countGe: 'ge',
+            countLt: 'lt',
+            countLe: 'le'
+        };
+        return (`${column}/$count ` +
+            `${operators[filter.operator]} ` +
+            `${formatValue(filter.value)}`);
+    }
+    /* ==========================================================================
+     * Helpers
+     * ========================================================================== */
+    function getColumn(filter) {
+        if (!filter.column ||
+            filter.column.trim().length === 0) {
+            throw new Error(`Operator '${filter.operator}' requires a column.`);
+        }
+        /*
+         * Allow:
+         *
+         * customer.name
+         * customer.address.city
+         *
+         * to become:
+         *
+         * customer/name
+         * customer/address/city
+         */
+        return filter.column.replace(/\./g, '/');
+    }
+    function getLambdaColumn(filter, variable) {
+        return (`${variable}/` +
+            `${getColumn(filter)}`);
+    }
+    function requireFilters(filter) {
+        return filter.filters || [];
+    }
+    /* ==========================================================================
+     * OData Request
+     * ========================================================================== */
+    function odata(options, props = {}) {
+        const url = new URL(options.url);
+        /* ---------------------------------------------------------------------- */
+        /* Paging                                                                 */
+        /* ---------------------------------------------------------------------- */
+        if (props.pageSize &&
+            props.pageSize > 0) {
+            const currPage = props.currPage && props.currPage > 0
+                ? props.currPage
+                : 1;
+            const skip = props.pageSize * (currPage - 1);
+            url.searchParams.set('$skip', String(skip));
+            url.searchParams.set('$top', String(props.pageSize));
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Count                                                                  */
+        /* ---------------------------------------------------------------------- */
+        if (options.count === true) {
+            url.searchParams.set('$count', 'true');
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Select                                                                 */
+        /* ---------------------------------------------------------------------- */
+        if (options.select &&
+            options.select.length > 0) {
+            url.searchParams.set('$select', options.select
+                .map(m => m.replace(/\./g, '/'))
+                .join(','));
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Expand                                                                 */
+        /* ---------------------------------------------------------------------- */
+        if (options.expand &&
+            options.expand.length > 0) {
+            const expand = options.expand
+                .map(expand => {
+                const name = expand.name.replace(/\./g, '/');
+                if (expand.select &&
+                    expand.select.length > 0) {
+                    return (`${name}` +
+                        `($select=` +
+                        `${expand.select
+                        .map(m => m.replace(/\./g, '/'))
+                        .join(',')}` +
+                        `)`);
+                }
+                return name;
+            })
+                .join(',');
+            url.searchParams.set('$expand', expand);
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Filter                                                                 */
+        /* ---------------------------------------------------------------------- */
+        const filters = [];
+        /*
+         * Static filter from options
+         */
+        if (options.filter &&
+            ((options.filter.filters && options.filter.filters.length > 0) ||
+                options.filter.column ||
+                options.filter.func)) {
+            const expression = toODataFilter(options.filter);
+            if (expression)
+                filters.push(`(${expression})`);
+        }
+        /*
+         * Runtime filter from DataTable
+         */
+        if (props.filter &&
+            ((props.filter.filters && props.filter.filters.length > 0) ||
+                props.filter.column ||
+                props.filter.func)) {
+            const expression = toODataFilter(props.filter);
+            if (expression)
+                filters.push(`(${expression})`);
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Search                                                                 */
+        /* ---------------------------------------------------------------------- */
+        if (props.search &&
+            props.search.trim() &&
+            props.cols &&
+            props.cols.length > 0) {
+            const searchValue = escapeODataString(props.search.trim());
+            const searchExpressions = props.cols
+                .filter(column => column.searchable === undefined ||
+                column.searchable === true)
+                .map(column => {
+                const name = column.name.replace(/\./g, '/');
+                return (`contains(` +
+                    `${name},` +
+                    `'${searchValue}'` +
+                    `)`);
+            });
+            if (searchExpressions.length > 0) {
+                filters.push(`(${searchExpressions.join(' or ')})`);
+            }
+        }
+        /*
+         * Combine all filters with AND.
+         */
+        if (filters.length > 0) {
+            url.searchParams.set('$filter', filters.join(' and '));
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Order By                                                               */
+        /* ---------------------------------------------------------------------- */
+        if (props.sort &&
+            props.sort.length > 0) {
+            const orderBy = props.sort
+                .map(sort => {
+                let column;
+                if (sort.index !== undefined &&
+                    sort.index >= 0) {
+                    if (!props.cols ||
+                        !props.cols[sort.index]) {
+                        throw new Error(`Invalid sort column index: ${sort.index}`);
+                    }
+                    column =
+                        props.cols[sort.index].name;
+                }
+                else if (sort.name) {
+                    column = sort.name;
+                }
+                else {
+                    throw new Error('Sort requires either index or name.');
+                }
+                column =
+                    column.replace(/\./g, '/');
+                return (column +
+                    (sort.dir
+                        ? ` ${sort.dir}`
+                        : ''));
+            })
+                .join(',');
+            url.searchParams.set('$orderby', orderBy);
+        }
+        /* ---------------------------------------------------------------------- */
+        /* Request                                                                */
+        /* ---------------------------------------------------------------------- */
+        const requestInit = options.headers ? { headers: options.headers } : undefined;
+        return new Request(url, requestInit);
+    }
+
+    const param = (uri, header, props) => {
+        const url = new URL(uri);
+        // Paging //
+        if (props.pageSize && props.currentPage) {
+            url.searchParams.append('skip', String(props.pageSize * (props.currentPage - 1)));
+            url.searchParams.append('top', String(props.pageSize));
+        }
+        // Filter //
+        if (props.search)
+            url.searchParams.append('search', props.search);
+        // Order //
+        if (props.order && props.order.length > 0 && props.cols) {
+            url.searchParams.append('orderby', props.order.map(m => props.cols?.[m.index]?.name || '').join(','));
+            url.searchParams.append('orderdir', props.order.map(m => m.type ? m.type : 'asc').join(','));
+        }
+        return new Request(url, header);
+    };
+
+    exports.TableVu = tablevu;
+    exports.TablevuStatus = TablevuStatus;
+    exports.adaptArray = adaptArray;
+    exports.buildFilter = toODataFilter;
+    exports.odata = odata;
+    exports.webapi = param;
+
+}));