@vuu-ui/vuu-datatable 2.1.18 → 2.1.19-beta.2

package/package.json

@@ -1,21 +1,22 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
+  "type": "module",
   "license": "Apache-2.0",
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-local": "2.1.18",
-    "@vuu-ui/vuu-table-types": "2.1.18",
-    "@vuu-ui/vuu-filters": "2.1.18",
-    "@vuu-ui/vuu-layout": "2.1.18",
-    "@vuu-ui/vuu-popups": "2.1.18",
-    "@vuu-ui/vuu-shell": "2.1.18",
-    "@vuu-ui/vuu-table": "2.1.18",
-    "@vuu-ui/vuu-table-extras": "2.1.18",
-    "@vuu-ui/vuu-ui-controls": "2.1.18",
-    "@vuu-ui/vuu-utils": "2.1.18"
+    "@vuu-ui/vuu-data-local": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filters": "2.1.19-beta.2",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-shell": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-extras": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -24,20 +25,16 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-datatable",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/filter-table/FilterTable.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FilterBar } from "@vuu-ui/vuu-filters";
+import { Table } from "@vuu-ui/vuu-table";
+import { useFilterTable } from "./useFilterTable.js";
+import { DataSourceProvider } from "@vuu-ui/vuu-utils";
+const classBase = "vuuFilterTable";
+const filterTableStyles = {
+    "--vuuFilterBar-flex": "0 0 auto",
+    "--vuuMeasuredContainer-flex": "1 1 auto",
+    display: "flex",
+    flexDirection: "column"
+};
+const FilterTable = ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes })=>{
+    const { filterBarProps } = useFilterTable({
+        TableProps,
+        FilterBarProps
+    });
+    return /*#__PURE__*/ jsx(DataSourceProvider, {
+        dataSource: TableProps.dataSource,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...htmlAttributes,
+            className: classBase,
+            style: {
+                ...styleProps,
+                ...filterTableStyles
+            },
+            children: [
+                /*#__PURE__*/ jsx(FilterBar, {
+                    ...filterBarProps
+                }),
+                /*#__PURE__*/ jsx(Table, {
+                    ...TableProps,
+                    height: "auto",
+                    width: "auto"
+                })
+            ]
+        })
+    });
+};
+export { FilterTable };

package/src/filter-table/index.js

@@ -0,0 +1,2 @@
+export * from "./FilterTable.js";
+export * from "./usePersistFilterState.js";

package/src/filter-table/useFilterTable.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+const useFilterTable = ({ FilterBarProps, TableProps: { config: { columns }, dataSource } })=>{
+    const handleApplyFilter = useCallback((filter)=>{
+        dataSource.setFilter?.(filter);
+    }, [
+        dataSource
+    ]);
+    const handleClearFilter = useCallback(()=>{
+        dataSource.clearFilter?.();
+    }, [
+        dataSource
+    ]);
+    const filterBarProps = {
+        ...FilterBarProps,
+        columnDescriptors: FilterBarProps?.columnDescriptors ?? columns,
+        onApplyFilter: handleApplyFilter,
+        onClearFilter: handleClearFilter
+    };
+    return {
+        filterBarProps
+    };
+};
+export { useFilterTable };

package/src/filter-table/usePersistFilterState.js

@@ -0,0 +1,139 @@
+import { useViewContext } from "@vuu-ui/vuu-layout";
+import { useWorkspace } from "@vuu-ui/vuu-shell";
+import { useCallback, useMemo, useState } from "react";
+const NO_CONFIG = {};
+const hasFilterWithName = (filters, name)=>-1 !== filters.findIndex((f)=>f.name === name);
+const usePersistFilterState = ({ tableSchema })=>{
+    const { load, save } = useViewContext();
+    const { getApplicationSettings, saveApplicationSettings } = useWorkspace();
+    const { "filterbar-config": filterbarConfigFromState } = useMemo(()=>load?.() ?? NO_CONFIG, [
+        load
+    ]);
+    const [filterState, setFilterState] = useState({
+        filters: filterbarConfigFromState?.filterState?.filters ?? [],
+        activeIndices: filterbarConfigFromState?.filterState?.activeIndices ?? []
+    });
+    const savedFilters = useMemo(()=>{
+        const { table: { module, table } } = tableSchema;
+        const savedFilters = getApplicationSettings("filters");
+        const key = `${module}:${table}`;
+        return savedFilters?.[key] ?? [];
+    }, [
+        getApplicationSettings,
+        tableSchema
+    ]);
+    const removeFilterFromSettings = useCallback((filter)=>{
+        if (!tableSchema || !filter.name) return;
+        const savedFilters = getApplicationSettings("filters");
+        if (!savedFilters) return;
+        const { module, table } = tableSchema.table;
+        const key = `${module}:${table}`;
+        if (hasFilterWithName(savedFilters[key], filter.name)) {
+            const newSavedFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].filter((f)=>f.name !== filter.name)
+            };
+            saveApplicationSettings(newSavedFilters, "filters");
+        }
+    }, [
+        getApplicationSettings,
+        saveApplicationSettings,
+        tableSchema
+    ]);
+    const saveFilterToSettings = useCallback((filter, name)=>{
+        if (tableSchema && name) {
+            const savedFilters = getApplicationSettings("filters");
+            let newFilters = savedFilters;
+            const { module, table } = tableSchema.table;
+            const key = `${module}:${table}`;
+            newFilters = savedFilters ? savedFilters[key] ? hasFilterWithName(savedFilters[key], name) ? {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f)=>f.name === name ? {
+                        ...filter,
+                        name
+                    } : f)
+            } : filter?.name && filter?.name !== name && hasFilterWithName(savedFilters[key], filter.name) ? {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f)=>f.name === filter.name ? {
+                        ...filter,
+                        name
+                    } : f)
+            } : {
+                ...savedFilters,
+                [key]: savedFilters[key].concat({
+                    ...filter,
+                    name
+                })
+            } : {
+                ...savedFilters,
+                [key]: [
+                    {
+                        ...filter,
+                        name
+                    }
+                ]
+            } : {
+                [key]: [
+                    {
+                        ...filter,
+                        name
+                    }
+                ]
+            };
+            if (newFilters !== savedFilters) saveApplicationSettings(newFilters, "filters");
+        }
+    }, [
+        getApplicationSettings,
+        saveApplicationSettings,
+        tableSchema
+    ]);
+    const handleFilterStateChanged = useCallback((filterState)=>{
+        save?.({
+            filterState
+        }, "filterbar-config");
+        setFilterState(filterState);
+    }, [
+        save
+    ]);
+    const handleFilterDeleted = useCallback((filter)=>{
+        removeFilterFromSettings(filter);
+    }, [
+        removeFilterFromSettings
+    ]);
+    const handleFilterRenamed = useCallback((filter, name)=>{
+        saveFilterToSettings(filter, name);
+    }, [
+        saveFilterToSettings
+    ]);
+    const buildFilterTableMenuOptions = useCallback((location)=>{
+        if ("filter-bar-menu" !== location) return [];
+        if (savedFilters.length > 0) return savedFilters.map((filter)=>({
+                id: "add-filter",
+                label: filter.name,
+                options: {
+                    filter
+                }
+            }));
+        return [
+            {
+                label: "You have no saved filters for this table",
+                id: "no-action"
+            }
+        ];
+    }, [
+        savedFilters
+    ]);
+    const handleFilterTableMenuAction = useCallback((menuItemId)=>{
+        if ("add-filter" === menuItemId) return true;
+        return false;
+    }, []);
+    return {
+        buildFilterTableMenuOptions,
+        filterState,
+        handleFilterTableMenuAction,
+        onFilterStateChanged: handleFilterStateChanged,
+        onFilterDeleted: handleFilterDeleted,
+        onFilterRenamed: handleFilterRenamed
+    };
+};
+export { usePersistFilterState };

package/src/index.js

@@ -0,0 +1,4 @@
+export * from "./filter-table/index.js";
+export * from "./json-table/index.js";
+export * from "./tree-table/index.js";
+export * from "./linked-table-view/LinkedTableView.js";

package/src/json-table/JsonCell.css.js

@@ -0,0 +1,21 @@
+const css = `
+.vuuJsonCell {
+  --group-cell-spacer-width: 20px;
+  cursor: pointer;
+  height: var(--row-height);
+  border-right-style: solid;
+  border-right-width: 1px;
+  align-items: center;
+  padding-left: 20px;
+  line-height: 16px;
+  display: inline-flex;
+  position: relative;
+
+  & .vuuToggleIconButton {
+    position: absolute;
+  }
+}
+
+
+`;
+export default css;

package/src/json-table/JsonCell.js

@@ -0,0 +1,40 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ToggleIconButton } from "@vuu-ui/vuu-ui-controls";
+import JsonCell from "./JsonCell.css";
+const JsonCell_JsonCell = ({ column, dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-array-cell",
+        css: JsonCell,
+        window: targetWindow
+    });
+    const { name } = column;
+    let { isExpanded, isLeaf, [name]: value } = dataRow;
+    const getDisplayValue = ()=>{
+        if (isLeaf) return value;
+        if ("string" == typeof value && value.endsWith("{")) {
+            value = value.slice(0, -1);
+            if (!isNaN(parseInt(value))) return `${value}: {...}`;
+            return "value {...}";
+        }
+        if ("string" == typeof value && value.endsWith("[")) {
+            value = value.slice(0, -1);
+            return `${value} [...]`;
+        }
+    };
+    const displayValue = getDisplayValue();
+    const isEmpty = "" === displayValue || void 0 === displayValue;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isLeaf || isEmpty ? null : /*#__PURE__*/ jsx(ToggleIconButton, {
+                isExpanded: isExpanded
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: displayValue
+            })
+        ]
+    });
+};
+export { JsonCell_JsonCell as JsonCell };

package/src/json-table/JsonTable.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { Table } from "@vuu-ui/vuu-table";
+import { JsonDataSource } from "@vuu-ui/vuu-data-local";
+import { useEffect, useMemo, useRef } from "react";
+import { JsonCell } from "./JsonCell.js";
+registerComponent("json", JsonCell, "cell-renderer");
+const JsonTable = ({ config, source: sourceProp, ...tableProps })=>{
+    const sourceRef = useRef(sourceProp);
+    const dataSourceRef = useRef(void 0);
+    useMemo(()=>{
+        dataSourceRef.current = new JsonDataSource({
+            data: sourceRef.current
+        });
+    }, []);
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns: dataSourceRef.current?.columnDescriptors ?? [],
+            columnSeparators: true,
+            rowSeparators: true
+        }), [
+        config
+    ]);
+    useEffect(()=>{
+        if (dataSourceRef.current) dataSourceRef.current.data = sourceProp;
+    }, [
+        sourceProp
+    ]);
+    if (void 0 === dataSourceRef.current) return null;
+    return /*#__PURE__*/ jsx(Table, {
+        ...tableProps,
+        config: tableConfig,
+        dataSource: dataSourceRef.current,
+        showColumnHeaderMenus: false,
+        selectionModel: "none"
+    });
+};
+export { JsonTable };

package/src/json-table/index.js

@@ -0,0 +1 @@
+export * from "./JsonTable.js";

package/src/linked-table-view/LinkedTableView.css.js

@@ -0,0 +1,24 @@
+const css = `
+.vuuLinkedTableView-header {
+  padding-right: var(--salt-spacing-100);
+  flex: 0 0 28px;
+  align-items: center;
+  display: flex;
+
+  & .vuuTabstrip {
+    width: fit-content;
+  }
+
+  & .vuuLinkedTableView-toolTray {
+    margin-left: auto;
+  }
+}
+
+.vuuLinkedTableView-view {
+  padding: var(--salt-spacing-100);
+  overflow: hidden;
+}
+
+
+`;
+export default css;

package/src/linked-table-view/LinkedTableView.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Stack, View } from "@vuu-ui/vuu-layout";
+import { Table } from "@vuu-ui/vuu-table";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useLinkedTableView } from "./useLinkedTableView.js";
+import LinkedTableView from "./LinkedTableView.css";
+import { TableLayoutToggleButton } from "./TableLayoutToggleButton.js";
+const classBase = "vuuLinkedTableView";
+const LinkedTables = ({ className, linkedDataSources, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-linked-table-view",
+        css: LinkedTableView,
+        window: targetWindow
+    });
+    const { tableConfig, ...config } = useLinkedTableView({
+        linkedDataSources
+    });
+    const getLinkedTables = (tdsConfig, { activeTab, onChangeTabbedView, onTabChange, tabbedView, ...levelConfig })=>false === Array.isArray(tdsConfig) ? /*#__PURE__*/ jsx(View, {
+            ...levelConfig,
+            header: true,
+            resizeable: true,
+            style: {
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            title: tdsConfig.title,
+            children: /*#__PURE__*/ jsx(Table, {
+                config: tdsConfig.config,
+                dataSource: tdsConfig.dataSource
+            })
+        }) : 1 === tabbedView ? /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `${classBase}-header`,
+                    children: [
+                        /*#__PURE__*/ jsx(Tabstrip, {
+                            activeTabIndex: activeTab,
+                            onActiveChange: onTabChange,
+                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx(Tab, {
+                                    label: title
+                                }, i))
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-toolTray`,
+                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
+                                onChange: onChangeTabbedView,
+                                value: tabbedView
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Stack, {
+                    active: activeTab,
+                    "data-resizeable": true,
+                    showTabs: false,
+                    style: {
+                        flexBasis: 0,
+                        flexGrow: 1,
+                        flexShrink: 1
+                    },
+                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-view`,
+                            style: {
+                                flexBasis: 0,
+                                flexGrow: 1,
+                                flexShrink: 1
+                            },
+                            title: title,
+                            children: /*#__PURE__*/ jsx(Table, {
+                                config: config,
+                                dataSource: dataSource
+                            })
+                        }, i))
+                }, levelConfig.key)
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `${classBase}-header`,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-flexHeaders`,
+                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx("span", {
+                                    children: title
+                                }, i))
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-toolTray`,
+                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
+                                onChange: onChangeTabbedView,
+                                value: tabbedView
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Flexbox, {
+                    style: {
+                        flexDirection: "row",
+                        flexBasis: 0,
+                        flexGrow: 1,
+                        flexShrink: 1
+                    },
+                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-view`,
+                            "data-resizeable": true,
+                            style: {
+                                flexBasis: 0,
+                                flexGrow: 1,
+                                flexShrink: 1
+                            },
+                            title: title,
+                            children: /*#__PURE__*/ jsx(Table, {
+                                config: config,
+                                dataSource: dataSource
+                            })
+                        }, i))
+                })
+            ]
+        });
+    const getAllLinkedTables = (level2, level3, config)=>{
+        const results = [
+            getLinkedTables(level2, config.level2)
+        ];
+        if (level3) results.push(getLinkedTables(level3, config.level3));
+        return results;
+    };
+    if (!tableConfig) return null;
+    {
+        const { 1: level1, 2: level2, 3: level3 } = tableConfig;
+        return /*#__PURE__*/ jsx("div", {
+            ...htmlAttributes,
+            className: clsx(classBase, className),
+            children: /*#__PURE__*/ jsxs(Flexbox, {
+                style: {
+                    flexDirection: "column",
+                    height: "100%"
+                },
+                children: [
+                    /*#__PURE__*/ jsx(View, {
+                        className: `${classBase}-view`,
+                        header: true,
+                        resizeable: true,
+                        style: {
+                            flexBasis: 0,
+                            flexGrow: 1,
+                            flexShrink: 1
+                        },
+                        title: level1.title,
+                        children: /*#__PURE__*/ jsx(Table, {
+                            config: level1.config,
+                            dataSource: level1.dataSource
+                        })
+                    }),
+                    ...getAllLinkedTables(level2, level3, config)
+                ]
+            })
+        });
+    }
+};
+const LinkedTableView_LinkedTableView = ({ className, linkedDataSources, ...htmlAttributes })=>/*#__PURE__*/ jsx(View, {
+        ...htmlAttributes,
+        className: className,
+        children: /*#__PURE__*/ jsx(LinkedTables, {
+            linkedDataSources: linkedDataSources
+        })
+    });
+export { LinkedTableView_LinkedTableView as LinkedTableView };

package/src/linked-table-view/TableLayoutToggleButton.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+const TableLayoutToggleButton = (props)=>/*#__PURE__*/ jsxs(ToggleButtonGroup, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ToggleButton, {
+                className: "vuuIconToggleButton",
+                value: 0,
+                "aria-label": "Tabbed View",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "split-v",
+                    size: 18
+                })
+            }),
+            /*#__PURE__*/ jsx(ToggleButton, {
+                className: "vuuIconToggleButton",
+                value: 1,
+                "aria-label": "Side by side view",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "tabs",
+                    size: 18
+                })
+            })
+        ]
+    });
+export { TableLayoutToggleButton };