tablevu 0.2.22 → 0.3.0-beta.1

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

@@ -0,0 +1,560 @@
+(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);
+        }
+    };
+
+    exports.TablevuStatus = TablevuStatus;
+    exports.default = tablevu;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/tablevu-webapi.esm.js

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,29 @@
+(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/webapi.d.ts

@@ -0,0 +1,15 @@
+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;