tablevu 0.2.21 → 0.3.0-beta.1

package/README.md

@@ -1,125 +1,76 @@
-# tablevu (alpha version)
-Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)
+# tablevu
 
-* No Dependencies
+A simple, fast, and easy-to-use Vue 3 data table component.
 
-* Working with javascript array or server side (odata or default request)
+## Installation
 
-* Sorting
-
-* Filtering
-
-* Custom column rendering
-
-* ...
-
-
-## Install
-```shell
+```bash
 npm install tablevu
 ```
 
-
 ## 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
+```vue
+<script setup>
+import { TableVu } from 'tablevu'
 
+const columns = [
+  { name: 'id', label: 'ID' },
+  { name: 'name', label: 'Name' },
+  { name: 'email', label: 'Email' }
+]
 
-## Samples
-
-* odata sample (Coming soon..)
-* search sample (Coming soon..)
-
-
-**odata sample**
+const data = [
+  { id: 1, name: 'John', email: 'john@example.com' },
+  { id: 2, name: 'Jane', email: 'jane@example.com' }
+]
+</script>
 
-```code
 <template>
-  <tablevu :data="grid" rowid="OrderId" />
+  <TableVu :data="data" :columns="columns" />
 </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>
 ```
 
-## Dev. Dependencies
-
-- [Vuejs](https://github.com/vuejs/vue) 3.0+
-
-
-## Browser Support
-
-Modern browsers.
-
-
-## Authors
-endb
+## 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 |
+
+## Events
+
+- `row-click` - Emitted when a row is clicked
+- `row-dbl-click` - Emitted when a row is double-clicked
+
+## Example
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { TableVu } from 'tablevu'
+
+const data = ref([])
+const columns = ref([
+  { name: 'id', label: 'ID' },
+  { name: 'name', label: 'Name' }
+])
+</script>
 
-## License
-tablevu is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
+<template>
+  <TableVu
+    :data="data"
+    :columns="columns"
+    @row-click="handleRowClick"
+    @row-dbl-click="handleRowDblClick"
+  />
+</template>
+```

package/dist/array.d.ts

@@ -0,0 +1,14 @@
+import type { TablevuSort, TablevuColumn } from './table';
+export interface ArrayAdapterParams {
+    pageSize?: number;
+    currPage?: number;
+    sort?: TablevuSort[];
+    cols?: TablevuColumn[];
+    filter?: any;
+    search?: string | null;
+}
+export interface AdapterResult<T = any> {
+    rows: T[];
+    count: number;
+}
+export default function adaptArray<T = any>(props: ArrayAdapterParams, data: T[]): Promise<AdapterResult<T>>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+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';

package/dist/odata.d.ts

@@ -0,0 +1,40 @@
+export type FilterOperator = 'eq' | 'ne' | 'gt' | 'ge' | 'lt' | 'le' | 'contains' | 'startsWith' | 'endsWith' | 'in' | 'between' | 'isNull' | 'isNotNull' | 'and' | 'or' | 'not' | 'any' | 'all' | 'countGt' | 'countGe' | 'countLt' | 'countLe';
+export interface Filter {
+    column?: string;
+    operator: FilterOperator;
+    value?: unknown;
+    filters?: Filter[];
+    func?: string;
+    params?: unknown[];
+}
+export interface Column {
+    name: string;
+    searchable?: boolean;
+}
+export interface Sort {
+    index?: number;
+    name?: string;
+    dir?: 'asc' | 'desc' | string;
+}
+export interface Expand {
+    name: string;
+    select?: string[];
+}
+export interface DataTableProps {
+    pageSize?: number;
+    currPage?: number;
+    filter?: Filter;
+    search?: string;
+    sort?: Sort[];
+    cols?: Column[];
+}
+export interface ODataOptions {
+    url: string;
+    header?: RequestInit;
+    select?: string[];
+    expand?: Expand[];
+    filter?: Filter;
+    count?: boolean;
+}
+export declare function toODataFilter(filter: Filter): string;
+export default function odata(options: ODataOptions, props?: DataTableProps): Request;

package/dist/table.d.ts

@@ -0,0 +1,173 @@
+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[];
+}
+interface TableSetupReturn {
+    spec: TablevuSpec;
+    renderHeader: () => 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>;
+        };
+        readonly search: {
+            readonly type: PropType<string>;
+        };
+        readonly filter: {
+            readonly type: PropType<any>;
+        };
+        readonly command: {
+            readonly type: PropType<Array<{
+                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;
+        };
+    };
+    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;
+    }>;
+};
+export default tablevu;