tablevu 0.2.22 → 0.3.0-beta.2

package/dist/tablevu-table.esm.js

@@ -0,0 +1,551 @@
+import { h, reactive, watch, onMounted, ref } from 'vue';
+
+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 = 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;
+        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;
+        watch(() => props.filter, () => {
+            if (props.filter)
+                spec.filter = props.filter;
+            else
+                spec.filter = null;
+            refresh();
+        }, { deep: true });
+        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 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 h('td', o, f);
+        }
+        function renderGroup(grp) {
+            const b = 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 h('tr', {}, 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 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(h('span', spec.columns[i].label));
+                else
+                    cl.push(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(h('span', { style: { float: 'right' } }, '▼'));
+                    else
+                        cl.push(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 = ref(null);
+                    const c = [
+                        h('a', { href: '#', onClick: (event) => { orderby(i); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Ascending'),
+                        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 = 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 = 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 = h('a', { href: '#', onClick: (event) => { orderby(i); event.preventDefault(); }, style: cy }, cl);
+                if (spec.columns[i].filter) ;
+                ar.push(h('th', { colspan: null, style: ch }, [a, f]));
+            }
+            const tr = 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 = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: first, disabled: spec.page.current == 1 }, '◀◀');
+            const ls = 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 = 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 = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: prior, disabled: spec.page.current == 1 }, '◀');
+            const nx = 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 = h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
+            const tr = 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);
+        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(h('thead', {}, this.renderHeader()));
+        if (this.spec.status == TablevuStatus.Ready)
+            cntn.push(h('tbody', { 'data-time': this.spec.time }, this.renderBody()));
+        if (this.spec.caption)
+            cntn.push(h('caption', {}, this.renderCaption()));
+        if (this.spec.status == TablevuStatus.Ready)
+            if (this.spec.page.size > 0)
+                cntn.push(h('tfoot', {}, this.renderFooter()));
+        return h('table', prps, cntn);
+    }
+};
+
+export { TablevuStatus, tablevu as default };