tablevu 0.3.0-beta.1 → 0.3.0-beta.3

package/dist/tablevu-index.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) {
@@ -687,18 +714,18 @@
      * Logical
      * ========================================================================== */
     function buildLogical(filter, operator) {
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length === 0)
-            throw new Error(`Operator '${filter.operator}' requires at least one filter.`);
+            return '';
         return filters
             .map(buildFilter)
             .map(expression => `(${expression})`)
             .join(` ${operator} `);
     }
     function buildNot(filter) {
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length !== 1)
-            throw new Error("Operator 'not' requires exactly one filter.");
+            return '';
         return `not (${buildFilter(filters[0])})`;
     }
     /* ==========================================================================
@@ -789,9 +816,9 @@
      * ========================================================================== */
     function buildAll(filter) {
         const column = getColumn(filter);
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length !== 1)
-            throw new Error("Operator 'all' requires exactly one filter.");
+            return '';
         return (`${column}/all(x: ` +
             `${buildLambdaFilter(filters[0], 'x')}` +
             `)`);
@@ -908,9 +935,7 @@
             `${getColumn(filter)}`);
     }
     function requireFilters(filter) {
-        if (!filter.filters)
-            throw new Error(`Operator '${filter.operator}' requires filters.`);
-        return filter.filters;
+        return filter.filters || [];
     }
     /* ==========================================================================
      * OData Request
@@ -974,7 +999,7 @@
          * Static filter from options
          */
         if (options.filter &&
-            (options.filter.filters ||
+            ((options.filter.filters && options.filter.filters.length > 0) ||
                 options.filter.column ||
                 options.filter.func)) {
             const expression = toODataFilter(options.filter);
@@ -985,7 +1010,7 @@
          * Runtime filter from DataTable
          */
         if (props.filter &&
-            (props.filter.filters ||
+            ((props.filter.filters && props.filter.filters.length > 0) ||
                 props.filter.column ||
                 props.filter.func)) {
             const expression = toODataFilter(props.filter);
@@ -1056,7 +1081,8 @@
         /* ---------------------------------------------------------------------- */
         /* Request                                                                */
         /* ---------------------------------------------------------------------- */
-        return new Request(url, options.header);
+        const requestInit = options.headers ? { headers: options.headers } : undefined;
+        return new Request(url, requestInit);
     }
 
     const param = (uri, header, props) => {
@@ -1078,7 +1104,6 @@
     };
 
     exports.TableVu = tablevu;
-    exports.TablevuStatus = TablevuStatus;
     exports.adaptArray = adaptArray;
     exports.buildFilter = toODataFilter;
     exports.odata = odata;

package/dist/tablevu-odata.esm.js

@@ -133,18 +133,18 @@ function buildFilter(filter) {
  * Logical
  * ========================================================================== */
 function buildLogical(filter, operator) {
-    const filters = requireFilters(filter);
+    const filters = filter.filters || [];
     if (filters.length === 0)
-        throw new Error(`Operator '${filter.operator}' requires at least one filter.`);
+        return '';
     return filters
         .map(buildFilter)
         .map(expression => `(${expression})`)
         .join(` ${operator} `);
 }
 function buildNot(filter) {
-    const filters = requireFilters(filter);
+    const filters = filter.filters || [];
     if (filters.length !== 1)
-        throw new Error("Operator 'not' requires exactly one filter.");
+        return '';
     return `not (${buildFilter(filters[0])})`;
 }
 /* ==========================================================================
@@ -235,9 +235,9 @@ function buildAny(filter) {
  * ========================================================================== */
 function buildAll(filter) {
     const column = getColumn(filter);
-    const filters = requireFilters(filter);
+    const filters = filter.filters || [];
     if (filters.length !== 1)
-        throw new Error("Operator 'all' requires exactly one filter.");
+        return '';
     return (`${column}/all(x: ` +
         `${buildLambdaFilter(filters[0], 'x')}` +
         `)`);
@@ -354,9 +354,7 @@ function getLambdaColumn(filter, variable) {
         `${getColumn(filter)}`);
 }
 function requireFilters(filter) {
-    if (!filter.filters)
-        throw new Error(`Operator '${filter.operator}' requires filters.`);
-    return filter.filters;
+    return filter.filters || [];
 }
 /* ==========================================================================
  * OData Request
@@ -420,7 +418,7 @@ function odata(options, props = {}) {
      * Static filter from options
      */
     if (options.filter &&
-        (options.filter.filters ||
+        ((options.filter.filters && options.filter.filters.length > 0) ||
             options.filter.column ||
             options.filter.func)) {
         const expression = toODataFilter(options.filter);
@@ -431,7 +429,7 @@ function odata(options, props = {}) {
      * Runtime filter from DataTable
      */
     if (props.filter &&
-        (props.filter.filters ||
+        ((props.filter.filters && props.filter.filters.length > 0) ||
             props.filter.column ||
             props.filter.func)) {
         const expression = toODataFilter(props.filter);
@@ -502,7 +500,8 @@ function odata(options, props = {}) {
     /* ---------------------------------------------------------------------- */
     /* Request                                                                */
     /* ---------------------------------------------------------------------- */
-    return new Request(url, options.header);
+    const requestInit = options.headers ? { headers: options.headers } : undefined;
+    return new Request(url, requestInit);
 }
 
 export { odata as default, toODataFilter };

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

@@ -139,18 +139,18 @@
      * Logical
      * ========================================================================== */
     function buildLogical(filter, operator) {
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length === 0)
-            throw new Error(`Operator '${filter.operator}' requires at least one filter.`);
+            return '';
         return filters
             .map(buildFilter)
             .map(expression => `(${expression})`)
             .join(` ${operator} `);
     }
     function buildNot(filter) {
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length !== 1)
-            throw new Error("Operator 'not' requires exactly one filter.");
+            return '';
         return `not (${buildFilter(filters[0])})`;
     }
     /* ==========================================================================
@@ -241,9 +241,9 @@
      * ========================================================================== */
     function buildAll(filter) {
         const column = getColumn(filter);
-        const filters = requireFilters(filter);
+        const filters = filter.filters || [];
         if (filters.length !== 1)
-            throw new Error("Operator 'all' requires exactly one filter.");
+            return '';
         return (`${column}/all(x: ` +
             `${buildLambdaFilter(filters[0], 'x')}` +
             `)`);
@@ -360,9 +360,7 @@
             `${getColumn(filter)}`);
     }
     function requireFilters(filter) {
-        if (!filter.filters)
-            throw new Error(`Operator '${filter.operator}' requires filters.`);
-        return filter.filters;
+        return filter.filters || [];
     }
     /* ==========================================================================
      * OData Request
@@ -426,7 +424,7 @@
          * Static filter from options
          */
         if (options.filter &&
-            (options.filter.filters ||
+            ((options.filter.filters && options.filter.filters.length > 0) ||
                 options.filter.column ||
                 options.filter.func)) {
             const expression = toODataFilter(options.filter);
@@ -437,7 +435,7 @@
          * Runtime filter from DataTable
          */
         if (props.filter &&
-            (props.filter.filters ||
+            ((props.filter.filters && props.filter.filters.length > 0) ||
                 props.filter.column ||
                 props.filter.func)) {
             const expression = toODataFilter(props.filter);
@@ -508,7 +506,8 @@
         /* ---------------------------------------------------------------------- */
         /* Request                                                                */
         /* ---------------------------------------------------------------------- */
-        return new Request(url, options.header);
+        const requestInit = options.headers ? { headers: options.headers } : undefined;
+        return new Request(url, requestInit);
     }
 
     exports.default = odata;