tablevu 0.3.0-beta.2 → 0.3.0-beta.3

package/dist/array.d.ts

@@ -1,4 +1,4 @@
-import type { TablevuSort, TablevuColumn } from './table';
+import type { TablevuSort, TablevuColumn } from './types';
 export interface ArrayAdapterParams {
     pageSize?: number;
     currPage?: number;

package/dist/table.d.ts

@@ -1,115 +1,5 @@
 import { PropType, EmitsOptions } from 'vue';
-export type TablevuStatus = -1 | 0 | 1;
-export declare const TablevuStatus: {
-    Error: TablevuStatus;
-    Ready: TablevuStatus;
-    Loading: TablevuStatus;
-};
-export interface TablevuColumn {
-    name: string;
-    label?: string;
-    type?: 'string' | 'number' | 'numeric' | 'integer' | 'date' | 'time' | 'datetime' | 'boolean';
-    align?: 'left' | 'center' | 'right';
-    width?: string;
-    style?: Record<string, string>;
-    render?: (row: any) => any;
-    colspan?: number;
-    depth?: string[];
-    header?: {
-        colspan?: number;
-        style?: Record<string, string>;
-        align?: string;
-    };
-    popup?: boolean;
-    filter?: any;
-}
-export interface TablevuSort {
-    index?: number;
-    name?: string;
-    dir?: 'asc' | 'desc' | null | string;
-}
-export interface TablevuGroup {
-    value?: string | number | bigint | ((row: any) => any);
-    content?: string | number | ((row: any) => any);
-    expandAll?: boolean;
-    class?: string;
-}
-export interface TablevuPageSettings {
-    size?: number;
-    type?: 'incremental' | 'dynamic';
-}
-export interface TablevuFooterSettings {
-    button?: {
-        class?: string;
-    };
-}
-export interface TablevuSettings {
-    group?: TablevuGroup;
-    page?: TablevuPageSettings;
-    sort?: TablevuSort[];
-    columns?: TablevuColumn[];
-    searchMinChar?: number;
-    footer?: TablevuFooterSettings;
-    onData?: (rows: any[]) => any[];
-}
-export interface TablevuProps {
-    settings?: TablevuSettings;
-    data?: any[] | ((params: any, data: any[]) => Promise<any>);
-    group?: string | object;
-    search?: string;
-    filter?: any;
-    command?: Array<{
-        name: string;
-    }>;
-    rowid?: string;
-    onRowClick?: (event: MouseEvent, row: any) => void;
-    onRowDblClick?: (event: MouseEvent, row: any) => void;
-    class?: string;
-    style?: string;
-}
-export interface TablevuEmits {
-    (e: 'onRowClick', event: MouseEvent, row: any): void;
-    (e: 'onRowDblClick', event: MouseEvent, row: any): void;
-}
-interface AdapterResult {
-    rows: any[];
-    count: number;
-}
-type AdapterFunction = (params: {
-    pageSize: number;
-    currPage: number;
-    sort: TablevuSort[];
-    cols: TablevuColumn[];
-    filter: any;
-    search: string | null;
-}, data: any[]) => Promise<AdapterResult>;
-interface TablevuSpec {
-    caption: any;
-    group: TablevuGroup & {
-        value: any;
-        content: any;
-        expandAll: boolean;
-        class: string;
-    };
-    page: {
-        count: number;
-        size: number;
-        current: number;
-        type: string | null;
-    };
-    sort: TablevuSort[];
-    columns: TablevuColumn[];
-    footer: {
-        button: {
-            class: string;
-        };
-    };
-    status: TablevuStatus;
-    time: number | null;
-    search: string | null;
-    filter: any;
-    onData?: (rows: any[]) => any[];
-}
+import type { TablevuSettings, TablevuProps, TablevuSpec, AdapterFunction } from './types';
 interface TableSetupReturn {
     spec: TablevuSpec;
     renderHeader: () => any[];
@@ -135,12 +25,6 @@ declare const tablevu: {
         readonly filter: {
             readonly type: PropType<any>;
         };
-        readonly command: {
-            readonly type: PropType<Array<{
-                name: string;
-            }>>;
-            readonly default: () => never[];
-        };
         readonly rowid: {
             readonly type: PropType<string>;
         };
@@ -160,12 +44,7 @@ declare const tablevu: {
         };
     };
     emits: EmitsOptions;
-    setup(props: TablevuProps, { attrs, slots, emit, expose }: {
-        attrs: any;
-        slots: any;
-        emit: any;
-        expose: any;
-    }): TableSetupReturn;
+    setup(props: TablevuProps, { attrs, slots, emit, expose }: any): TableSetupReturn;
     render(props: TablevuProps): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;

package/dist/tablevu-index.esm.js

@@ -81,6 +81,7 @@ const TablevuStatus = {
     Ready: 0,
     Loading: 1
 };
+
 const tablevu = {
     props: {
         settings: { type: Object, default: null },
@@ -88,14 +89,13 @@ const tablevu = {
         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'],
+    emits: ['onRowClick', 'onRowDblClick', 'selectionChange', 'columnVisibilityChange'],
     setup(props, { attrs, slots, emit, expose }) {
         let rows = [];
         let rowg = [];
@@ -105,16 +105,16 @@ const tablevu = {
         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,
+                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,
+                size: (props.settings && props.settings.page) ? (props.settings.page.size || 0) : 0,
                 current: 0,
-                type: null
+                type: undefined
             },
             sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
             columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
@@ -127,7 +127,11 @@ const tablevu = {
             time: null,
             search: null,
             filter: null,
-            onData: (props.settings && props.settings.onData) ? props.settings.onData : undefined
+            onData: (props.settings && props.settings.onData) ? props.settings.onData : undefined,
+            selectedRows: [],
+            columnWidths: {},
+            columnOrder: [],
+            columnVisibility: {}
         });
         if (props.data) {
             if (Array.isArray(props.data)) {
@@ -163,32 +167,6 @@ const tablevu = {
                 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 = [];
@@ -227,28 +205,26 @@ const tablevu = {
                 rowg.push(n);
             }
         }
-        function first() { page(1); }
+        function first() { loadPage(1); }
         function prior() {
             if (spec.page.current > 1) {
-                page(spec.page.current - 1);
+                loadPage(spec.page.current - 1);
             }
             else {
-                page(spec.page.current);
+                loadPage(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 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() { page(spec.page.current); }
+        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);
@@ -272,9 +248,10 @@ const tablevu = {
             else {
                 spec.sort.push({ index: ind, dir: dir ? dir : null });
             }
-            page(spec.page.current);
+            loadPage(spec.page.current);
         }
-        function page(currentPage) {
+        // Internal load function (alias for adapter call)
+        function loadPage(currentPage) {
             let dat = null;
             if (props.data) {
                 if (Array.isArray(props.data))
@@ -284,8 +261,9 @@ const tablevu = {
                 return;
             spec.status = TablevuStatus.Loading;
             if (adapter) {
+                const pageSize = spec.page.size || 20;
                 adapter({
-                    pageSize: spec.page.size,
+                    pageSize,
                     currPage: currentPage,
                     sort: spec.sort,
                     cols: spec.columns,
@@ -299,7 +277,7 @@ const tablevu = {
                     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.count = (ada.count > 0 && pageSize > 0) ? Math.ceil(ada.count / pageSize) : 0;
                     spec.page.current = currentPage;
                     spec.status = TablevuStatus.Ready;
                     spec.time = Date.now();
@@ -361,8 +339,8 @@ const tablevu = {
                 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);
+            const f = col.render?.(row) ?? '';
+            return h('td', { ...o, innerHTML: f });
         }
         function renderGroup(grp) {
             const b = h('button', {
@@ -421,6 +399,10 @@ const tablevu = {
                     }
                 };
             }
+            // 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() {
@@ -471,7 +453,10 @@ const tablevu = {
                 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]));
+                ar.push(h('th', {
+                    colspan: null,
+                    style: ch
+                }, [a, f]));
             }
             const tr = h('tr', {}, ar);
             return [tr];
@@ -499,14 +484,34 @@ const tablevu = {
                     }
                 }
             }
+            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: 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 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];
@@ -514,19 +519,41 @@ const tablevu = {
         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++)
+        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);
+            // 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
+            spec, renderHeader, renderBody, renderFooter, renderCaption,
+            first, prior, next, last, page, refresh, orderby,
+            getSelectedRows: () => spec.selectedRows,
+            setSelectedRows: (rows) => { spec.selectedRows = rows; }
         };
     },
     render(props) {
@@ -1072,4 +1099,4 @@ const param = (uri, header, props) => {
     return new Request(url, header);
 };
 
-export { tablevu as TableVu, TablevuStatus, adaptArray, toODataFilter as buildFilter, odata, param as webapi };
+export { tablevu as TableVu, adaptArray, toODataFilter as buildFilter, odata, param as webapi };