tablevu 0.3.0-beta.3 → 0.3.0-beta.5

package/dist/tablevu-table.esm.js

@@ -1,578 +0,0 @@
-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] },
-        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 = 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;
-        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 });
-        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 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, innerHTML: 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);
-                    }
-                };
-            }
-            // Selection
-            if (spec.selectedRows.some(s => s[props.rowid || 'id'] === row[props.rowid || 'id'])) {
-                o.class = (o.class || '') + ' selected';
-            }
-            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]));
-                    }
-                }
-            }
-            else if (spec.settings?.emptyMessage) {
-                dr.push(h('tr', {}, 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 = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(first), disabled: spec.page.current == 1 }, '◀◀');
-            const ls = 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 = 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 = h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(prior), disabled: spec.page.current == 1 }, '◀');
-            const nx = 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 = h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
-            const tr = 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; }
-        });
-        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(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 { tablevu as default };