onekijs-ui 0.19.20 → 0.19.21

package/dist/styles/border.d.ts

@@ -36,4 +36,4 @@ export declare const borderTopWidth: import("./typings").CssProperty<string | nu
 export declare const borderBottomWidth: import("./typings").CssProperty<string | number>;
 export declare const borderLeftWidth: import("./typings").CssProperty<string | number>;
 export declare const borderRightWidth: import("./typings").CssProperty<string | number>;
-export declare const boxShadow: import("./typings").CssProperty<"default" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "outline" | Property.BoxShadow>;
+export declare const boxShadow: import("./typings").CssProperty<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "default" | "inner" | "outline" | Property.BoxShadow>;

package/dist/styles/flex.d.ts

@@ -6,4 +6,4 @@ export declare const flexDirection: import("./typings").CssProperty<Property.Fle
 export declare const flexGrow: import("./typings").CssProperty<number>;
 export declare const flexShrink: import("./typings").CssProperty<number>;
 export declare const flexWrap: import("./typings").CssProperty<Property.FlexWrap>;
-export declare const order: import("./typings").CssProperty<number | Globals | "none" | "first" | "last">;
+export declare const order: import("./typings").CssProperty<number | "none" | Globals | "first" | "last">;

package/dist/styles/size.d.ts

@@ -1,10 +1,10 @@
 import { Property } from 'csstype';
-export declare const width: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const minWidth: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const maxWidth: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const height: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const minHeight: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const maxHeight: import("./typings").CssProperty<string | 0 | (string & {}) | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const width: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const minWidth: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const maxWidth: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const height: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const minHeight: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const maxHeight: import("./typings").CssProperty<string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | (string & {}) | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
 export declare const overscrollBehavior: import("./typings").CssProperty<Property.OverscrollBehavior>;
 export declare const overscrollBehaviorBlock: import("./typings").CssProperty<Property.OverscrollBehaviorBlock>;
 export declare const overscrollBehaviorInline: import("./typings").CssProperty<Property.OverscrollBehaviorInline>;

package/dist/styles/typography.d.ts

@@ -20,10 +20,10 @@ export declare const fontVariantLigatures: import("./typings").CssProperty<Prope
 export declare const fontVariantNumeric: import("./typings").CssProperty<Property.FontVariantNumeric>;
 export declare const fontVariantPosition: import("./typings").CssProperty<Property.FontVariantPosition>;
 export declare const fontVariationSettings: import("./typings").CssProperty<Property.FontVariationSettings>;
-export declare const fontWeight: import("./typings").CssProperty<number | "bold" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "lighter" | "light" | "black" | "medium" | "thin" | "hairline" | "normal" | "semibold" | "extrabold" | (number & {}) | "bolder">;
+export declare const fontWeight: import("./typings").CssProperty<number | "lighter" | "light" | "black" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "thin" | "hairline" | "normal" | "semibold" | "bold" | "extrabold" | (number & {}) | "bolder">;
 export declare const hyphens: import("./typings").CssProperty<Property.Hyphens>;
 export declare const letterSpacing: import("./typings").CssProperty<Property.LetterSpacing<TLength>>;
-export declare const lineHeight: import("./typings").CssProperty<string | 0 | (string & {}) | 4 | (number & {}) | 5 | 6 | 8 | 10 | 7 | 9>;
+export declare const lineHeight: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | (string & {}) | (number & {})>;
 export declare const lineHeightStep: import("./typings").CssProperty<Property.LineHeightStep<TLength>>;
 export declare const overflowWrap: import("./typings").CssProperty<Property.OverflowWrap>;
 export declare const textAlign: import("./typings").CssProperty<Property.TextAlign>;

package/dist/utils/formatter.d.ts

@@ -4,4 +4,5 @@ export declare const booleanFormatter: Formatter<boolean>;
 export declare const themeFormatter: (category: string) => Formatter<string | number>;
 export declare const colorFormatter: (key: string, opacityKey?: string) => Formatter<string>;
 export declare const enumFormatter: <T>(values: AnonymousObject) => Formatter<T>;
+export declare const escapeCsvValue: (value: any, separator?: string) => string;
 export declare const pxFormatter: Formatter<string | number>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "0.19.20",
+  "version": "0.19.21",
   "description": "Advanced React Web Components",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -53,5 +53,5 @@
     "react-dom": ">=18"
   },
   "sideEffects": false,
-  "gitHead": "6e90682d010150138b408047280686f6c0065d14"
+  "gitHead": "1cda04828413aa2f83c4a6c16d2a6e409185df40"
 }

package/src/components/table/TableService.ts

@@ -1,6 +1,15 @@
-import { AnonymousObject, CollectionService, reducer, service } from 'onekijs-framework';
+import { AnonymousObject, CollectionService, get, reducer, service } from 'onekijs-framework';
 import React from 'react';
-import { TableColumn, TableColumnWidth, TableConfig, TableController, TableItem, TableState } from './typings';
+import {
+  TableColumn,
+  TableColumnWidth,
+  TableConfig,
+  TableController,
+  TableItem,
+  TableSerializerFormat,
+  TableState,
+} from './typings';
+import { escapeCsvValue } from '../../utils/formatter';
 
 export const parseColumnWidth = (width: string | number = 'auto'): TableColumnWidth => {
   const regex = /^\s*(auto|(?:(?:([0-9]+)|(?:([0-9]+)\s*(px|%)))\s*(grow|force)?)|(grow))\s*$/;
@@ -98,6 +107,39 @@ class TableService<T = any, I extends TableItem<T> = TableItem<T>, S extends Tab
     });
   }
 
+  serialize(data: T[], format: TableSerializerFormat): string {
+    const serializer = this.config?.serializer;
+    if (serializer) {
+      return serializer(data, format);
+    }
+
+    const serializableColumns = (this.state.columns || []).filter((c) => c.serializer !== undefined);
+
+    switch(format) {
+      case 'csv':
+        let result = 'sep=,'
+        const header = serializableColumns.map((c) => escapeCsvValue(get(c, 'title', get(c, 'id')))).join(',')
+        result = `${result}\n${header}`
+        const csvRows = data.map((row) => {
+          const columns = serializableColumns
+            .map((c) => c.serializer!(row, c, format))
+            .map((s) => {
+              return escapeCsvValue(s, ',');
+            });
+          return columns.join(',');
+        });
+        return `${result}\n${csvRows.join('\n')}`;
+      case 'json':
+        const rows = data.map((row) => {
+          return serializableColumns.reduce((accumulator, c) => {
+            accumulator[c.title ?? c.id] = c.serializer!(row, c, format);
+            return accumulator;
+          }, {} as AnonymousObject);
+        });
+        return JSON.stringify(rows);
+    }
+  }
+
   @reducer
   toggle(item: I): void {
     this.setMeta('item', item, 'expanded', !item.expanded);

package/src/components/table/columns/checkboxColumn.ts

@@ -1,5 +1,6 @@
 import CheckboxCellComponent from '../components/cells/CheckboxCellComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 import { CheckboxColumn, CheckboxColumnOptions, TableItem } from '../typings';
 
 const checkboxColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -13,6 +14,7 @@ const checkboxColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       sortable: false,
       className: 'o-checkbox-cell',
       Displayer: DefaultCellDisplayer,
+      serializer: defaultCellSerializer,
     },
     options,
     {

package/src/components/table/columns/enumColumn.tsx

@@ -1,13 +1,31 @@
 import React from 'react';
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableSelectFilterComponent from '../components/filters/TableSelectFilterComponent';
-import { EnumColumnOptions, TableColumn, TableHeaderCellProps, TableItem } from '../typings';
+import { EnumColumnOptions, TableCellSerializer, TableColumn, TableHeaderCellProps, TableItem } from '../typings';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import { get } from 'onekijs-framework';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
+
 
 const enumColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>(
   id: string,
   options: EnumColumnOptions<T, I>,
 ): TableColumn<T, I> => {
+  const serializer: TableCellSerializer<T, I> = (data: any, column, format) => {
+    const value = get(data, column.id, null);
+    const entry = (options.filterDataSource as any[]).find((item: any) => {
+      if (Array.isArray(item)) {
+        if (item[0] === value) {
+          return true;
+        }
+      }
+      return false;
+    })
+    if (entry) {
+      return entry[1];
+    }
+    return defaultCellSerializer(data, column, format);
+  }
   return Object.assign(
     {
       CellComponent: DefaultCellComponent,
@@ -17,6 +35,7 @@ const enumColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>(
       ),
       sortable: true,
       Displayer: DefaultCellDisplayer,
+      serializer,
     },
     options,
     {

package/src/components/table/columns/inputColumn.ts

@@ -1,5 +1,6 @@
 import InputCellComponent from '../components/cells/InputCellComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 import { InputColumn, InputColumnOptions, TableItem } from '../typings';
 
 const inputColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>(
@@ -12,6 +13,7 @@ const inputColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>
       filterable: false,
       sortable: false,
       Displayer: DefaultCellDisplayer,
+      serializer: defaultCellSerializer,
     },
     options,
     {

package/src/components/table/columns/numberColumn.ts

@@ -1,6 +1,7 @@
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableNumberFilterComponent from '../components/filters/TableNumberFilterComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 import { TableColumn, TableColumnOptions, TableItem } from '../typings';
 
 const numberColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -14,6 +15,7 @@ const numberColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       FilterComponent: TableNumberFilterComponent,
       sortable: true,
       Displayer: DefaultCellDisplayer,
+      serializer: defaultCellSerializer,
     },
     options,
     {

package/src/components/table/columns/selectColumn.ts

@@ -1,8 +1,10 @@
+import { get } from 'onekijs-framework';
 import DefaultSelectBroker from '../../select/SelectBroker';
 import { SelectItem, SelectItemAdapter } from '../../select/typings';
 import SelectCellComponent from '../components/cells/SelectCellComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
-import { SelectCell, SelectColumn, SelectColumnOptions, TableItem } from '../typings';
+import { SelectCell, SelectColumn, SelectColumnOptions, TableCellSerializer, TableItem } from '../typings';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 
 const selectColumn = <
   T = any,
@@ -27,6 +29,25 @@ const selectColumn = <
     opts.adapter = adapter;
   }
 
+  const serializer: TableCellSerializer<T, TI> = (data: any, column, format) => {
+    const value = get(data, column.id, null);
+    if (Array.isArray(opts.dataSource)) {
+      const entry = (opts.dataSource as [S, string][]).find((item) => {
+        if (Array.isArray(item)) {
+          if (item[0] === value) {
+            return true;
+          }
+        }
+        return false;
+      })
+      if (entry && Array.isArray(entry)) {
+        return entry[1];
+      }
+    }
+
+    return defaultCellSerializer(data, column, format);
+  }
+
   const broker = new DefaultSelectBroker(dataSource, opts);
 
   const Component: SelectCell<T, S, TI, SI> = opts.CellComponent || (SelectCellComponent as any);
@@ -36,6 +57,7 @@ const selectColumn = <
       filterable: false,
       sortable: false,
       Displayer: DefaultCellDisplayer,
+      serializer,
     },
     opts,
     {

package/src/components/table/columns/textColumn.ts

@@ -1,6 +1,7 @@
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableTextFilterComponent from '../components/filters/TableTextFilterComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 import { TableColumn, TableColumnOptions, TableItem } from '../typings';
 
 const textColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -14,6 +15,7 @@ const textColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       FilterComponent: TableTextFilterComponent,
       sortable: true,
       Displayer: DefaultCellDisplayer,
+      serializer: defaultCellSerializer,
     },
     options,
     {

package/src/components/table/columns/textareaColumn.ts

@@ -1,5 +1,6 @@
 import TextareaCellComponent from '../components/cells/TextareaCellComponent';
 import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
+import defaultCellSerializer from '../seralizers/defaultCellSerializer';
 import { TableItem, TextareaColumn, TextareaColumnOptions } from '../typings';
 
 const textareaColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -13,6 +14,7 @@ const textareaColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       filterable: false,
       sortable: false,
       Displayer: DefaultCellDisplayer,
+      serializer: defaultCellSerializer,
     },
     options,
     {

package/src/components/table/seralizers/defaultCellSerializer.tsx

@@ -0,0 +1,8 @@
+import { get } from 'onekijs-framework';
+import { TableCellSerializer } from '../typings';
+
+const defaultCellSerializer: TableCellSerializer<any, any> = (data, column) => {
+  return get(data, column.id, null);
+}
+
+export default defaultCellSerializer;

package/src/components/table/typings.ts

@@ -133,6 +133,8 @@ export type TableBodyRowProps<T = any, I extends TableItem<T> = TableItem<T>> =
   onCollapsed?: (item: I | undefined, index: number) => void;
 };
 
+export type TableSerializerFormat = 'csv' | 'json'
+
 export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
   autoRefresh?: number;
   bodyClassName?: string;
@@ -168,6 +170,7 @@ export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
   preload?: number;
   rowClassName?: string | ((item: I | undefined, rowIndex: number, columns: TableColumn<T, I>[]) => string);
   RowComponent?: React.FC<TableBodyRowProps<T, I>>;
+  serializer?: (data: T[], format: TableSerializerFormat) => string;
   sortable?: boolean;
   stripRows?: boolean;
   tail?: boolean;
@@ -200,6 +203,7 @@ export type TableController<
     by: B,
     target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][],
   ): I[];
+  serialize: (data: T[], format: TableSerializerFormat) => string;
   setSelected<B extends keyof CollectionBy<T, I>>(by: B, target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][]): I[];
   startAutoRefresh: (interval: number) => void;
   stopAutoRefresh: () => void;
@@ -223,6 +227,8 @@ export type TableCellDisplayerProps<T, I extends TableItem<T> = TableItem<T>> =
   format: FormDisplayerProps['format'];
 };
 
+export type TableCellSerializer<T, I extends TableItem<T> = TableItem<T>> = (data: T, column: TableColumn<T, I>, format: TableSerializerFormat) => any;
+
 export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
   className?: string | ((item: I, column: TableColumn<T, I>, rowIndex: number) => string);
   CellComponent?: Cell<T, I>;
@@ -233,15 +239,16 @@ export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
   filterable?: boolean;
   FilterComponent?: React.FC<TableHeaderCellProps<T, I>>;
   headerClassName?: string | ((column: TableColumn<T, I>) => string);
+  help?: ReactNode;
   id: string;
   maxWidth?: string;
   minWidth?: string;
+  serializer?: TableCellSerializer<T, I>;
   sortable?: boolean;
   title?: string;
   TitleComponent?: React.FC<TableHeaderCellProps<T, I>>;
   weight?: number;
   width?: string;
-  help?: ReactNode;
 };
 
 export type TableColumnWidth = {

package/src/index.ts

@@ -304,6 +304,8 @@ export {
   TextareaColumnOptions,
   UseTableController,
   UseTableOptions,
+  TableCellSerializer,
+  TableSerializerFormat
 } from './components/table/typings';
 export { default as Tag } from './components/tag';
 export { default as TagComponent } from './components/tag/components/TagComponent';
@@ -326,6 +328,7 @@ export { default as ArrayTreeComponent } from './components/tree/components/Arra
 export { default as ControllerTreeComponent } from './components/tree/components/ControllerTreeComponent';
 export { default as TreeBodyComponent } from './components/tree/components/TreeBodyComponent';
 export { default as TreeComponent } from './components/tree/components/TreeComponent';
+export { default as defaultCellSerializer } from './components/table/seralizers/defaultCellSerializer';
 export {
   default as TreeItemComponent,
   TreeItemContent,

package/src/utils/formatter.ts

@@ -39,6 +39,26 @@ export const enumFormatter = <T>(values: AnonymousObject): Formatter<T> => {
   };
 };
 
+
+
+export const escapeCsvValue = (value: any, separator = ','): string => {
+  const escape = (value: any): string => {
+    if (Array.isArray(value)) {
+      return value.map((v) => escape(v)).join(',');
+    }
+    if (value === null || value === undefined) return '';
+    return `${value}`;
+  }
+
+  const result = escape(value);
+  if (result.startsWith('"') && result.endsWith('"')) return result;  // the string is already escaped
+  // escape only if the string contains the separator
+  if (result.includes(separator)) {
+    return `"${result.replace(/"/g, '""')}"`
+  }
+  return result;
+}
+
 export const pxFormatter: Formatter<string | number> = (value) => {
   if (typeof value === 'string') {
     return value;