tablevu 0.3.0-beta.2 → 0.3.0-beta.4

package/README.md

@@ -1,76 +1,36 @@
-# tablevu
+# TableVu TypeScript package
 
-A simple, fast, and easy-to-use Vue 3 data table component.
+This is a standalone TypeScript implementation of the Vue 3 table component. It is intentionally isolated from the legacy JavaScript package at the repository root. Build it from this directory with `npm install` and `npm run build`.
 
-## Installation
+## Run the browser example locally
 
-```bash
-npm install tablevu
-```
-
-## Usage
-
-```vue
-<script setup>
-import { TableVu } from 'tablevu'
-
-const columns = [
-  { name: 'id', label: 'ID' },
-  { name: 'name', label: 'Name' },
-  { name: 'email', label: 'Email' }
-]
+From the `typescript/` directory, install dependencies and build the local bundle. Then start a static server from the same directory and open the example. This uses the local build and does not publish or install the package elsewhere.
 
-const data = [
-  { id: 1, name: 'John', email: 'john@example.com' },
-  { id: 2, name: 'Jane', email: 'jane@example.com' }
-]
-</script>
-
-<template>
-  <TableVu :data="data" :columns="columns" />
-</template>
+```sh
+npm install
+npm run build
+python3 -m http.server 8080
 ```
 
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `Object` | - | Must contain `columns`, `pageSize`, `currPage`, `sort`, and `value`/`@count` properties, or an array |
-| `columns` | `Array` | - | Column definitions with `name`, `label`, `type`, `align`, `width`, `render` properties |
-| `search` | `String` | - | Search term (debounced) |
-| `filter` | `Array` / `Object` | - | Filter objects |
-| `command` | `Array` | `[]` | Commands like `refresh`, `first`, `previous`, `next`, `last` |
-| `rowid` | `String` | - | Row ID field name |
-| `onRowClick` | `Function` | - | Row click handler |
-| `onRowDblClick` | `Function` | - | Row double-click handler |
-| `class` | `String` | `'table'` | CSS class for the table |
-| `buttonclass` | `String` | `'btn'` | CSS class for pagination buttons |
+Open `http://localhost:8080/example/test-northwind.html`. The browser needs internet access for Vue from the import map and the public Northwind OData service.
 
-## Events
+```ts
+import { TableVu, odata, type Filter, type TableVuExpose } from 'tablevu';
 
-- `row-click` - Emitted when a row is clicked
-- `row-dbl-click` - Emitted when a row is double-clicked
+const filter: Filter = {
+	operator: 'and',
+	filters: [
+		{ column: 'status', operator: 'in', value: ['active', 'pending'] },
+		{ column: 'createdAt', operator: 'between', value: [new Date('2025-01-01'), new Date()] },
+		{ column: 'deletedAt', operator: 'isNull' },
+		{ column: 'Orders', operator: 'any', variable: 'order', filter: { column: 'Freight', operator: 'gt', value: 100 } },
+		{ column: 'Orders', operator: 'all', variable: 'order', filter: { column: 'Freight', operator: 'ge', value: 0 } }
+	]
+};
 
-## Example
-
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TableVu } from 'tablevu'
+const data = odata({ url: 'https://api.example.com/items', count: true, filter });
+```
 
-const data = ref([])
-const columns = ref([
-  { name: 'id', label: 'ID' },
-  { name: 'name', label: 'Name' }
-])
-</script>
+The component exposes `first()`, `prior()`, `next()`, `last()`, `go(pageNumber)`, `page(pageNumber)`, `refresh()`, `sortBy(columnIndex, direction?)`, `getRows()` and `setRows(rows)` through its Vue template ref. `go` validates and clamps pages when the adapter reports a page count. `page` performs a direct reload even when the requested page is already current.
 
-<template>
-  <TableVu
-    :data="data"
-    :columns="columns"
-    @row-click="handleRowClick"
-    @row-dbl-click="handleRowDblClick"
-  />
-</template>
-```
+Supported filter operators are `eq`, `ne`, `gt`, `ge`, `lt`, `le`, `contains`, `startsWith`, `endsWith`, `in`, `between`, `isNull`, `isNotNull`, `and`, `or`, `not`, `any`, `all`, `countGt`, `countGe`, `countLt`, and `countLe`. `field` accepts dotted paths; `column` is also accepted as an alias. `any` and `all` take a nested `filter` and may specify a `variable` (default `item`).

package/dist/adapters/array.d.ts

@@ -0,0 +1,3 @@
+import type { AdapterFunction } from '../types';
+declare const adaptArray: AdapterFunction;
+export default adaptArray;

package/dist/adapters/odata.d.ts

@@ -0,0 +1,4 @@
+import type { AdapterParams, AdapterResult, Filter, ODataOptions } from '../types';
+/** Converts the typed filter tree into an OData `$filter` expression. */
+export declare function buildFilter(filter: Filter | string | null | undefined): string;
+export declare function createODataAdapter(options: ODataOptions): (params?: AdapterParams) => Promise<AdapterResult>;

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { default as TableVu } from './table';
 export * from './table';
-export { default as odata, toODataFilter as buildFilter, } from './odata';
-export type { FilterOperator, Filter, Column, Sort, Expand, DataTableProps, ODataOptions } from './odata';
-export { default as webapi } from './webapi';
-export * from './webapi';
-export { default as adaptArray, type ArrayAdapterParams, type AdapterResult } from './array';
+export * from './types';
+export { createODataAdapter as odata, buildFilter } from './adapters/odata';
+export { default as adaptArray } from './adapters/array';
+export * from './adapters/array';

package/dist/table.d.ts

@@ -1,173 +1,174 @@
-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';
+import { TablevuStatus } from './types';
+import type { TablevuSettings, AdapterFunction } from './types';
+export interface TableVuExpose {
+    first: () => Promise<void>;
+    prior: () => void | Promise<void>;
+    next: () => void | Promise<void>;
+    last: () => void | Promise<void>;
+    go: (pageNumber: number) => void | Promise<void>;
+    page: (pageNumber: number) => Promise<void>;
+    refresh: () => Promise<void>;
+    sortBy: (columnIndex: number, direction?: string) => void | Promise<void>;
+    getRows: () => any[];
+    setRows: (rows: any[]) => void;
 }
-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;
+declare const tablevu: import("vue").DefineComponent<{
+    settings?: (TablevuSettings | null) | undefined;
+    data?: (any[] | AdapterFunction) | undefined;
+    group?: (string | import("./types").TablevuGroup) | undefined;
+    search?: string | undefined;
     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[];
-}
-interface TableSetupReturn {
-    spec: TablevuSpec;
-    renderHeader: () => any[];
+        name: "refresh" | "first" | "prior" | "next" | "last" | "go" | string;
+        page?: number;
+    }> | undefined;
+    rowid?: string | undefined;
+    onRowClick?: ((event: MouseEvent, row: any) => void) | undefined;
+    onRowDblClick?: ((event: MouseEvent, row: any) => void) | undefined;
+    class?: string | undefined;
+    style?: (string | Record<string, string> | null) | undefined;
+}, {
+    renderHeader: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
     renderBody: () => any[];
-    renderFooter: () => any[];
-    renderCaption: () => any;
-}
-declare const tablevu: {
-    props: {
-        readonly settings: {
-            readonly type: PropType<TablevuSettings>;
-            readonly default: null;
-        };
-        readonly data: {
-            readonly type: PropType<any[] | AdapterFunction>;
-        };
-        readonly group: {
-            readonly type: PropType<string | object>;
+    renderFooter: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    renderCaption: () => string;
+    first: () => Promise<void>;
+    prior: () => Promise<void> | undefined;
+    next: () => Promise<void> | undefined;
+    last: () => Promise<void> | undefined;
+    go: (pageNumber: number) => Promise<void> | undefined;
+    page: (pageNumber: number) => Promise<void>;
+    refresh: () => Promise<void>;
+    sortBy: (columnIndex: number, direction?: string) => Promise<void>;
+    getRows: () => any[];
+    setRows: (newRows: any[]) => void;
+    state: {
+        caption: any;
+        group: {
+            value: any;
+            content: any;
+            expandAll: boolean;
+            class: string;
         };
-        readonly search: {
-            readonly type: PropType<string>;
+        page: {
+            count: number;
+            size: number;
+            current: number;
+            type: string | null;
         };
-        readonly filter: {
-            readonly type: PropType<any>;
+        sort: {
+            index?: number | undefined;
+            name?: string | undefined;
+            dir?: "asc" | "desc" | null | string | undefined;
+        }[];
+        columns: {
+            name: string;
+            label?: string | undefined;
+            type?: "string" | "number" | "numeric" | "integer" | "date" | "time" | "datetime" | "boolean" | undefined;
+            align?: "left" | "center" | "right" | undefined;
+            width?: string | undefined;
+            style?: Record<string, string> | undefined;
+            render?: ((row: any) => any) | undefined;
+            colspan?: number | undefined;
+            depth?: string[] | undefined;
+            header?: {
+                colspan?: number | undefined;
+                style?: Record<string, string> | undefined;
+                align?: string | undefined;
+            } | undefined;
+            popup?: boolean | undefined;
+            filter?: any;
+            searchable?: boolean | undefined;
+            resizable?: boolean | undefined;
+            draggable?: boolean | undefined;
+            visible?: boolean | undefined;
+        }[];
+        footer: {
+            button: {
+                class: string;
+            };
         };
-        readonly command: {
-            readonly type: PropType<Array<{
+        status: TablevuStatus;
+        time: number | null;
+        search: string | null;
+        filter: any;
+        onData?: ((rows: any[]) => any[]) | undefined;
+        settings?: {
+            group?: {
+                value?: string | number | bigint | ((row: any) => any) | undefined;
+                content?: string | number | ((row: any) => any) | undefined;
+                expandAll?: boolean | undefined;
+                class?: string | undefined;
+            } | undefined;
+            page?: {
+                size?: number | undefined;
+                type?: "incremental" | "dynamic" | undefined;
+            } | undefined;
+            sort?: {
+                index?: number | undefined;
+                name?: string | undefined;
+                dir?: "asc" | "desc" | null | string | undefined;
+            }[] | undefined;
+            columns?: {
                 name: string;
-            }>>;
-            readonly default: () => never[];
-        };
-        readonly rowid: {
-            readonly type: PropType<string>;
-        };
-        readonly onRowClick: {
-            readonly type: PropType<(event: MouseEvent, row: any) => void>;
-        };
-        readonly onRowDblClick: {
-            readonly type: PropType<(event: MouseEvent, row: any) => void>;
-        };
-        readonly class: {
-            readonly type: PropType<string>;
-            readonly default: "table";
-        };
-        readonly style: {
-            readonly type: PropType<string>;
-            readonly default: null;
-        };
+                label?: string | undefined;
+                type?: "string" | "number" | "numeric" | "integer" | "date" | "time" | "datetime" | "boolean" | undefined;
+                align?: "left" | "center" | "right" | undefined;
+                width?: string | undefined;
+                style?: Record<string, string> | undefined;
+                render?: ((row: any) => any) | undefined;
+                colspan?: number | undefined;
+                depth?: string[] | undefined;
+                header?: {
+                    colspan?: number | undefined;
+                    style?: Record<string, string> | undefined;
+                    align?: string | undefined;
+                } | undefined;
+                popup?: boolean | undefined;
+                filter?: any;
+                searchable?: boolean | undefined;
+                resizable?: boolean | undefined;
+                draggable?: boolean | undefined;
+                visible?: boolean | undefined;
+            }[] | undefined;
+            searchMinChar?: number | undefined;
+            footer?: {
+                button?: {
+                    class?: string | undefined;
+                } | undefined;
+            } | undefined;
+            onData?: ((rows: any[]) => any[]) | undefined;
+            emptyMessage?: string | undefined;
+        } | undefined;
     };
-    emits: EmitsOptions;
-    setup(props: TablevuProps, { attrs, slots, emit, expose }: {
-        attrs: any;
-        slots: any;
-        emit: any;
-        expose: any;
-    }): TableSetupReturn;
-    render(props: TablevuProps): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-};
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("row-click" | "row-dbl-click")[], "row-click" | "row-dbl-click", import("vue").PublicProps, Readonly<{
+    settings?: (TablevuSettings | null) | undefined;
+    data?: (any[] | AdapterFunction) | undefined;
+    group?: (string | import("./types").TablevuGroup) | undefined;
+    search?: string | undefined;
+    filter?: any;
+    command?: Array<{
+        name: "refresh" | "first" | "prior" | "next" | "last" | "go" | string;
+        page?: number;
+    }> | undefined;
+    rowid?: string | undefined;
+    onRowClick?: ((event: MouseEvent, row: any) => void) | undefined;
+    onRowDblClick?: ((event: MouseEvent, row: any) => void) | undefined;
+    class?: string | undefined;
+    style?: (string | Record<string, string> | null) | undefined;
+}> & Readonly<{
+    "onRow-click"?: ((...args: any[]) => any) | undefined;
+    "onRow-dbl-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly settings: TablevuSettings | null;
+    readonly command: {
+        name: string;
+    }[];
+    readonly class: string;
+    readonly style: string | Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default tablevu;