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

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

@@ -85,6 +85,7 @@
         Ready: 0,
         Loading: 1
     };
+
     const tablevu = {
         props: {
             settings: { type: Object, default: null },
@@ -92,14 +93,13 @@
             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 = [];
@@ -109,16 +109,16 @@
             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,
+                    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 : [],
@@ -131,7 +131,11 @@
                 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)) {
@@ -167,32 +171,6 @@
                     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 = [];
@@ -231,28 +209,26 @@
                     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);
@@ -276,9 +252,10 @@
                 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))
@@ -288,8 +265,9 @@
                     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,
@@ -303,7 +281,7 @@
                         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();
@@ -365,8 +343,8 @@
                     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);
+                const f = col.render?.(row) ?? '';
+                return vue.h('td', { ...o, innerHTML: f });
             }
             function renderGroup(grp) {
                 const b = vue.h('button', {
@@ -425,6 +403,10 @@
                         }
                     };
                 }
+                // Selection
+                if (spec.selectedRows.some(s => s[props.rowid || 'id'] === row[props.rowid || 'id'])) {
+                    o.class = (o.class || '') + ' selected';
+                }
                 return vue.h('tr', o, r);
             }
             function renderHeader() {
@@ -475,7 +457,10 @@
                     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]));
+                    ar.push(vue.h('th', {
+                        colspan: null,
+                        style: ch
+                    }, [a, f]));
                 }
                 const tr = vue.h('tr', {}, ar);
                 return [tr];
@@ -503,14 +488,34 @@
                         }
                     }
                 }
+                else if (spec.settings?.emptyMessage) {
+                    dr.push(vue.h('tr', {}, vue.h('td', { colspan: spec.columns.length, style: { textAlign: 'center', padding: '2rem', color: '#666' } }, spec.settings.emptyMessage)));
+                }
                 return dr;
             }
+            // Prompt user for page number and navigate
+            function goToPage() {
+                const input = prompt('Page number:', String(spec.page.current));
+                if (input) {
+                    const pageNum = parseInt(input, 10);
+                    if (!isNaN(pageNum) && pageNum > 0 && pageNum !== spec.page.current) {
+                        page(pageNum);
+                    }
+                }
+            }
+            function makeHandler(fn) {
+                return (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    fn();
+                };
+            }
             function renderFooter() {
-                const fr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: 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 fr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(first), disabled: spec.page.current == 1 }, '◀◀');
+                const ls = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(last), disabled: spec.page.count == 0 || spec.page.current == spec.page.count }, '▶▶');
+                const pg = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(goToPage) }, spec.page.current + (spec.page.count > 0 ? (' / ' + spec.page.count) : ''));
+                const pr = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(prior), disabled: spec.page.current == 1 }, '◀');
+                const nx = vue.h('button', { class: spec.footer.button.class, style: 'font: initial; margin-right: .5rem', onClick: makeHandler(next), disabled: spec.page.count > 0 && spec.page.current == spec.page.count }, '▶');
                 const td = vue.h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
                 const tr = vue.h('tr', {}, [td]);
                 return [tr];
@@ -518,19 +523,41 @@
             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; }
+            });
             vue.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) {
@@ -552,7 +579,6 @@
         }
     };
 
-    exports.TablevuStatus = TablevuStatus;
     exports.default = tablevu;
 
     Object.defineProperty(exports, '__esModule', { value: true });

package/dist/types/adapter.d.ts

@@ -0,0 +1,15 @@
+import type { TablevuSort } from './tablevu-sort';
+import type { TablevuColumn } from './tablevu-column';
+export interface AdapterParams {
+    pageSize?: number;
+    currPage?: number;
+    sort?: TablevuSort[];
+    cols?: TablevuColumn[];
+    filter?: any;
+    search?: string | null;
+}
+export interface AdapterResult<T = any> {
+    rows: T[];
+    count: number;
+}
+export type AdapterFunction = (params: AdapterParams, data: any[]) => Promise<AdapterResult>;

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export type { TablevuStatus } from './tablevu-status';
+export type { TablevuColumn } from './tablevu-column';
+export type { TablevuSort } from './tablevu-sort';
+export type { TablevuGroup } from './tablevu-group';
+export type { TablevuPageSettings } from './tablevu-page-settings';
+export type { TablevuFooterSettings } from './tablevu-footer-settings';
+export type { TablevuSettings } from './tablevu-settings';
+export type { TablevuProps } from './tablevu-props';
+export type { TablevuEmits } from './tablevu-emits';
+export type { TablevuSpec } from './tablevu-spec';
+export type { AdapterFunction, AdapterResult } from './adapter';

package/dist/types/tablevu-column.d.ts

@@ -0,0 +1,22 @@
+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;
+    visible?: boolean;
+    resizable?: boolean;
+    draggable?: boolean;
+    searchable?: boolean;
+}

package/dist/types/tablevu-emits.d.ts

@@ -0,0 +1,8 @@
+export interface TablevuEmits {
+    (e: 'onRowClick', event: MouseEvent, row: any): void;
+    (e: 'onRowDblClick', event: MouseEvent, row: any): void;
+    (e: 'selectionChange', selectedRows: any[]): void;
+    (e: 'columnResize', column: string, width: string): void;
+    (e: 'columnReorder', columns: string[]): void;
+    (e: 'columnVisibilityChange', column: string, visible: boolean): void;
+}

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

@@ -0,0 +1,5 @@
+export interface TablevuFooterSettings {
+    button?: {
+        class?: string;
+    };
+}

package/dist/types/tablevu-group.d.ts

@@ -0,0 +1,6 @@
+export interface TablevuGroup {
+    value?: string | number | bigint | ((row: any) => any);
+    content?: string | number | ((row: any) => any);
+    expandAll?: boolean;
+    class?: string;
+}

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

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

package/dist/types/tablevu-props.d.ts

@@ -0,0 +1,13 @@
+import type { TablevuSettings } from './tablevu-settings';
+export interface TablevuProps {
+    settings?: TablevuSettings;
+    data?: any[] | ((params: any, data: any[]) => Promise<any>);
+    group?: string | object;
+    search?: string;
+    filter?: any;
+    rowid?: string;
+    onRowClick?: (event: MouseEvent, row: any) => void;
+    onRowDblClick?: (event: MouseEvent, row: any) => void;
+    class?: string;
+    style?: string;
+}

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

@@ -0,0 +1,26 @@
+import type { TablevuGroup } from './tablevu-group';
+import type { TablevuPageSettings } from './tablevu-page-settings';
+import type { TablevuSort } from './tablevu-sort';
+import type { TablevuColumn } from './tablevu-column';
+import type { TablevuFooterSettings } from './tablevu-footer-settings';
+export interface TablevuSettings {
+    group?: TablevuGroup;
+    page?: TablevuPageSettings;
+    sort?: TablevuSort[];
+    columns?: TablevuColumn[];
+    searchMinChar?: number;
+    footer?: TablevuFooterSettings;
+    onData?: (rows: any[]) => any[];
+    selection?: TablevuSelectionSettings;
+    resizableColumns?: boolean;
+    reorderableColumns?: boolean;
+    stickyHeader?: boolean;
+    emptyMessage?: string;
+    loadingMode?: 'skeleton' | 'spinner';
+}
+export interface TablevuSelectionSettings {
+    enabled: boolean;
+    multiple?: boolean;
+    rowId?: string;
+    onChange?: (selectedRows: any[]) => void;
+}

package/dist/types/tablevu-sort.d.ts

@@ -0,0 +1,5 @@
+export interface TablevuSort {
+    index?: number;
+    name?: string;
+    dir?: 'asc' | 'desc' | null | string;
+}

package/dist/types/tablevu-spec.d.ts

@@ -0,0 +1,31 @@
+import type { TablevuGroup } from './tablevu-group';
+import type { TablevuPageSettings } from './tablevu-page-settings';
+import type { TablevuSort } from './tablevu-sort';
+import type { TablevuColumn } from './tablevu-column';
+import type { TablevuFooterSettings } from './tablevu-footer-settings';
+import type { TablevuStatus } from './tablevu-status';
+export interface TablevuSpec {
+    caption: any;
+    group: TablevuGroup & {
+        value: any;
+        content: any;
+        expandAll: boolean;
+        class: string;
+    };
+    page: TablevuPageSettings & {
+        count: number;
+        current: number;
+    };
+    sort: TablevuSort[];
+    columns: TablevuColumn[];
+    footer: TablevuFooterSettings;
+    status: TablevuStatus;
+    time: number | null;
+    search: string | null;
+    filter: any;
+    onData?: (rows: any[]) => any[];
+    selectedRows: any[];
+    columnWidths: Record<string, string>;
+    columnOrder: string[];
+    columnVisibility: Record<string, boolean>;
+}

package/dist/types/tablevu-status.d.ts

@@ -0,0 +1,6 @@
+export type TablevuStatus = -1 | 0 | 1;
+export declare const TablevuStatus: {
+    Error: TablevuStatus;
+    Ready: TablevuStatus;
+    Loading: TablevuStatus;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tablevu",
-	"version": "0.3.0-beta.2",
+	"version": "0.3.0-beta.3",
 	"type": "module",
 	"description": "Vue 3 data table component",
 	"main": "dist/tablevu-index.umd.cjs.js",