tablevu 0.2.22 → 0.3.0-beta-4

package/README.md

@@ -1,125 +1,36 @@
-# tablevu (alpha version)
-Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)
+# TableVu TypeScript package
 
-* No Dependencies
+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`.
 
-* Working with javascript array or server side (odata or default request)
+## Run the browser example locally
 
-* Sorting
+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.
 
-* Filtering
-
-* Custom column rendering
-
-* ...
-
-
-## Install
-```shell
-npm install tablevu
+```sh
+npm install
+npm run build
+python3 -m http.server 8080
 ```
 
+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.
 
-## Usage
-* **data**		: Array or Server side parameters
-
-* **grouping**		: Grouping data specific column or function
-
-* **filter**		: Reactive filter value
-
-* **search**		: Reactive search value
-
-* **rowid**		: Key value for row.
-
-* **class**		: Table class name. (default "table")
-
-* **buttonclass**	: Arrow buttons class name (default "btn")
-
-* **onRowClick**	: Row click event
-
-* **onRowDblClick**	: Row double click event
-
-* **columns**
-  * **name**	  	: Column name
-  
-  * **label**	  	: Column label
-  
-  * **searchable** 	: Column is searchable (default true)
-  
-  * **orderable**	: Column is orderable (default true)
-  
-  * **width**	  	: Column width
-  
-  * **align**	  	: Column align
-
-  * **style**	  	: Column style
-
-  * **type**	  	: Data type (datetime, date, time, numeric). Show local value
-  
-  * **render**  	: Render value
+```ts
+import { TableVu, odata, type Filter, type TableVuExpose } from 'tablevu';
 
+const filter: Filter = {
+	operator: 'and',
+	filters: [
+		{ field: 'status', operator: 'in', value: ['active', 'pending'] },
+		{ field: 'createdAt', operator: 'between', value: [new Date('2025-01-01'), new Date()] },
+		{ field: 'deletedAt', operator: 'isNull' },
+		{ field: 'Orders', operator: 'any', variable: 'order', filter: { field: 'Freight', operator: 'gt', value: 100 } },
+		{ field: 'Orders', operator: 'all', variable: 'order', filter: { field: 'Freight', operator: 'ge', value: 0 } }
+	]
+};
 
-## Samples
-
-* odata sample (Coming soon..)
-* search sample (Coming soon..)
-
-
-**odata sample**
-
-```code
-<template>
-  <tablevu :data="grid" rowid="OrderId" />
-</template>
-
-<script>
-import { tablevu, odata } from 'tablevu'
-
-export default {
-  name: 'App',
-  components: {
-    tablevu
-  },
-  setup() {
-    const prm = {
-      url: `https://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json`,
-      header: { 'Content-Type': 'application/json;odata=verbose' },
-      select: ['OrderID', 'OrderDate', 'ShipName', 'ShipAddress'],
-      expand: [
-      ]
-    };
-
-    const grid = {
-      adapter: (grd) => {
-        return odata(prm, grd);
-      },
-      pageSize: 10,
-      columns: [
-        { name: 'OrderID', label: 'id', width: '26rem' },
-        { name: 'OrderDate', label: 'name', width: '26rem' },
-        { name: 'ShipName', label: 'name', width: '26rem' },
-        { name: 'ShipAddress', label: 'name', width: '26rem' },
-      ]
-    }
-
-    return { grid }
-  }
-}
-</script>
+const data = odata({ url: 'https://api.example.com/items', count: true, filter });
 ```
 
-## Dev. Dependencies
-
-- [Vuejs](https://github.com/vuejs/vue) 3.0+
-
-
-## Browser Support
-
-Modern browsers.
-
-
-## Authors
-endb
+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.
 
-## License
-tablevu is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
+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

@@ -0,0 +1,6 @@
+export { default as TableVu } from './table';
+export * from './table';
+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

@@ -0,0 +1,174 @@
+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;
+}
+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: "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: () => 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;
+        };
+        page: {
+            count: number;
+            size: number;
+            current: number;
+            type: string | null;
+        };
+        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;
+            };
+        };
+        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;
+                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;
+    };
+}, {}, {}, {}, 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;