tablevu 0.3.0-beta.3 → 0.3.0-beta.4

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

@@ -1,586 +0,0 @@
-(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] },
-            rowid: { type: String },
-            onRowClick: { type: Function },
-            onRowDblClick: { type: Function },
-            class: { type: String, default: 'table' },
-            style: { type: String, default: null }
-        },
-        emits: ['onRowClick', 'onRowDblClick', 'selectionChange', 'columnVisibilityChange'],
-        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 : undefined,
-                    content: (props.settings && props.settings.group) ? props.settings.group.content : undefined,
-                    expandAll: true,
-                    class: 'table-light'
-                },
-                page: {
-                    count: 0,
-                    size: (props.settings && props.settings.page) ? (props.settings.page.size || 0) : 0,
-                    current: 0,
-                    type: undefined
-                },
-                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,
-                selectedRows: [],
-                columnWidths: {},
-                columnOrder: [],
-                columnVisibility: {}
-            });
-            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 });
-            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() { loadPage(1); }
-            function prior() {
-                if (spec.page.current > 1) {
-                    loadPage(spec.page.current - 1);
-                }
-                else {
-                    loadPage(spec.page.current);
-                }
-            }
-            function next() { loadPage(spec.page.current + 1); }
-            function last() { loadPage(spec.page.count); }
-            // Navigate to specific page number
-            function page(currentPage) {
-                if (currentPage < 1)
-                    currentPage = 1;
-                if (currentPage > spec.page.count && spec.page.count > 0)
-                    currentPage = spec.page.count;
-                loadPage(currentPage);
-            }
-            function refresh() { loadPage(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 });
-                }
-                loadPage(spec.page.current);
-            }
-            // Internal load function (alias for adapter call)
-            function loadPage(currentPage) {
-                let dat = null;
-                if (props.data) {
-                    if (Array.isArray(props.data))
-                        dat = props.data;
-                }
-                else
-                    return;
-                spec.status = TablevuStatus.Loading;
-                if (adapter) {
-                    const pageSize = spec.page.size || 20;
-                    adapter({
-                        pageSize,
-                        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 && pageSize > 0) ? Math.ceil(ada.count / pageSize) : 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, innerHTML: 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);
-                        }
-                    };
-                }
-                // Selection
-                if (spec.selectedRows.some(s => s[props.rowid || 'id'] === row[props.rowid || 'id'])) {
-                    o.class = (o.class || '') + ' selected';
-                }
-                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]));
-                        }
-                    }
-                }
-                else if (spec.settings?.emptyMessage) {
-                    dr.push(vue.h('tr', {}, vue.h('td', { colspan: spec.columns.length, style: { textAlign: 'center', padding: '2rem', color: '#666' } }, spec.settings.emptyMessage)));
-                }
-                return dr;
-            }
-            // Prompt user for page number and navigate
-            function goToPage() {
-                const input = prompt('Page number:', String(spec.page.current));
-                if (input) {
-                    const pageNum = parseInt(input, 10);
-                    if (!isNaN(pageNum) && pageNum > 0 && pageNum !== spec.page.current) {
-                        page(pageNum);
-                    }
-                }
-            }
-            function makeHandler(fn) {
-                return (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    fn();
-                };
-            }
-            function renderFooter() {
-                const fr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(first), disabled: spec.page.current == 1 }, '◀◀');
-                const ls = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(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: makeHandler(goToPage) }, 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: makeHandler(prior), disabled: spec.page.current == 1 }, '◀');
-                const nx = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(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;
-            }
-            // Initialize column metadata
-            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('.');
-                }
-                // Initialize visibility
-                if (spec.columns[i].visible === undefined) {
-                    spec.columns[i].visible = true;
-                    spec.columnVisibility[spec.columns[i].name] = true;
-                }
-            }
-            loadPage(1);
-            // Expose methods for external access via ref
-            expose({
-                first,
-                prior,
-                next,
-                last,
-                page,
-                refresh,
-                orderby,
-                getSelectedRows: () => spec.selectedRows,
-                setSelectedRows: (rows) => { spec.selectedRows = rows; }
-            });
-            vue.onMounted(() => {
-                // mounted hook
-            });
-            return {
-                spec, renderHeader, renderBody, renderFooter, renderCaption,
-                first, prior, next, last, page, refresh, orderby,
-                getSelectedRows: () => spec.selectedRows,
-                setSelectedRows: (rows) => { spec.selectedRows = rows; }
-            };
-        },
-        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);
-        }
-    };
-
-    exports.default = tablevu;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));

package/dist/tablevu-webapi.esm.js

@@ -1,19 +0,0 @@
-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);
-};
-
-export { param as default };

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

@@ -1,29 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.tablevu = {}));
-})(this, (function (exports) { 'use strict';
-
-    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.default = param;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));

package/dist/types/tablevu-page-settings.d.ts

@@ -1,4 +0,0 @@
-export interface TablevuPageSettings {
-    size?: number;
-    type?: 'incremental' | 'dynamic';
-}

package/dist/webapi.d.ts

@@ -1,15 +0,0 @@
-interface WebApiProps {
-    pageSize?: number;
-    currentPage?: number;
-    search?: string;
-    order?: {
-        index: number;
-        type?: string;
-    }[];
-    cols?: {
-        name: string;
-        type?: string;
-    }[];
-}
-declare const param: (uri: string, header: any, props: WebApiProps) => Request;
-export default param;