@vuu-ui/vuu-table-extras 2.1.18 → 2.1.19-beta.2

package/src/column-menu/column-menu-utils.js

@@ -0,0 +1,318 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, MenuPanel, MenuTrigger } from "@salt-ds/core";
+import { getGroupStatus, getSortStatus, isNumericColumn, logUnhandledMessage } from "@vuu-ui/vuu-utils";
+const isColumnMenuActionType = (value)=>void 0 !== value && [
+        "agg-count",
+        "agg-distinct",
+        "agg-sum",
+        "agg-avg",
+        "agg-high",
+        "agg-low",
+        "sort-asc",
+        "sort-dsc",
+        "sort-add-asc",
+        "sort-add-dsc",
+        "remove-sort",
+        "group-column",
+        "remove-group",
+        "add-to-group",
+        "remove-from-group",
+        "pin-column-left",
+        "pin-column-right",
+        "unpin-column",
+        "hide-column",
+        "remove-column"
+    ].includes(value);
+const getColumnMenuActionType = (target)=>{
+    const { menuActionId } = target.dataset;
+    if (isColumnMenuActionType(menuActionId)) return menuActionId;
+    throw Error("[vuu-table-extras] column-menu-utils target element is not a valid Column MenuItem");
+};
+function buildSortMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
+    if (!isAllowed || false === column.sortable) return null;
+    {
+        const { name, label = name } = column;
+        const menuItems = [];
+        const columnSortStatus = getSortStatus(column.name, dataSource.sort);
+        switch(columnSortStatus){
+            case "no-sort":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-asc",
+                    onClick: menuActionClickHandler,
+                    children: "Sort ascending"
+                }, "sort-asc"));
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-dsc",
+                    onClick: menuActionClickHandler,
+                    children: "Sort descending"
+                }, "sort-dsc"));
+                break;
+            case "single-sort-asc":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-dsc",
+                    onClick: menuActionClickHandler,
+                    children: "Reverse Sort (DSC)"
+                }, "sort-dsc"), /*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "remove-sort",
+                    onClick: menuActionClickHandler,
+                    children: "Remove Sort"
+                }, "remove-sort"));
+                break;
+            case "single-sort-desc":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-asc",
+                    onClick: menuActionClickHandler,
+                    children: "Reverse Sort (ASC)"
+                }, "sort-asc"), /*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "remove-sort",
+                    onClick: menuActionClickHandler,
+                    children: "Remove Sort"
+                }, "remove-sort"));
+                break;
+            case "sort-other-column":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-add-asc",
+                    onClick: menuActionClickHandler,
+                    children: "Add to sort ASC"
+                }, "sort-add-asc"));
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-add-dsc",
+                    onClick: menuActionClickHandler,
+                    children: "Add to sort DSC"
+                }, "sort-add-dsc"));
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-asc",
+                    onClick: menuActionClickHandler,
+                    children: "Ascending"
+                }, "sort-asc"));
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "sort-dsc",
+                    onClick: menuActionClickHandler,
+                    children: "Descending"
+                }, "sort-dsc"));
+                break;
+            case "multi-sort-includes-column-asc":
+            case "multi-sort-includes-column-desc":
+                break;
+            default:
+                logUnhandledMessage(columnSortStatus, "[vuu-table-extras] column-menu-utils buildSortMenu");
+        }
+        return /*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: `Sort by ${label}`
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuPanel, {
+                    children: menuItems
+                })
+            ]
+        }, "sort-menu");
+    }
+}
+function buildGroupMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
+    if (!isAllowed || false === column.groupable) return null;
+    {
+        const menuItems = [];
+        const columnGroupStatus = getGroupStatus(column.name, dataSource.groupBy);
+        const { name, label = name } = column;
+        switch(columnGroupStatus){
+            case "no-groupby":
+                return /*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "group-column",
+                    onClick: menuActionClickHandler,
+                    children: `Group by ${label}`
+                }, "group-column");
+            case "single-groupby-other-column":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "group-column",
+                    onClick: menuActionClickHandler,
+                    children: `Group by ${label}`
+                }, "group-column"), /*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "add-to-group",
+                    onClick: menuActionClickHandler,
+                    children: `Add ${label} to groupby`
+                }, "add-to-group"));
+                break;
+            case "single-groupby":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "remove-group",
+                    onClick: menuActionClickHandler,
+                    children: "Remove Grouping"
+                }, "remove-group"));
+                break;
+            case "multi-groupby-other-columns":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "add-to-group",
+                    onClick: menuActionClickHandler,
+                    children: "Add to grouping"
+                }, "add-to-group"));
+                break;
+            case "multi-groupby-includes-column":
+                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+                    "data-menu-action-id": "remove-from-group",
+                    onClick: menuActionClickHandler,
+                    children: "Remove from grouping"
+                }, "remove-from-group"));
+                break;
+            default:
+                logUnhandledMessage(columnGroupStatus, "[vuu-table-extras] column-menu-utils buildGroupMenu");
+        }
+        return /*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: "Group data"
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuPanel, {
+                    children: menuItems
+                })
+            ]
+        }, "group-menu");
+    }
+}
+const buildVisibilityMenuItems = (column, menuActionClickHandler, allowHide = true, allowRemove = true)=>{
+    if (!allowHide && !allowRemove) return null;
+    const menuItems = [];
+    const { name, label = name } = column;
+    if (allowHide) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+        "data-menu-action-id": "hide-column",
+        onClick: menuActionClickHandler,
+        children: `Hide ${label} column`
+    }, "hide-column"));
+    if (allowRemove) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+        "data-menu-action-id": "remove-column",
+        onClick: menuActionClickHandler,
+        children: `Remove ${label} column`
+    }, "remove-column"));
+    return menuItems;
+};
+const buildPinMenuItems = (column, menuActionClickHandler, isAllowed = true)=>{
+    if (!isAllowed || void 0 === column) return [];
+    const { pin } = column;
+    const menuItems = [];
+    const pinLeft = /*#__PURE__*/ jsx(MenuItem, {
+        "data-menu-action-id": "pin-column-left",
+        onClick: menuActionClickHandler,
+        children: "Pin left"
+    }, "pin-column-left");
+    const pinRight = /*#__PURE__*/ jsx(MenuItem, {
+        "data-menu-action-id": "pin-column-right",
+        onClick: menuActionClickHandler,
+        children: "Pin right"
+    }, "pin-column-right");
+    if (pin) {
+        menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+            "data-menu-action-id": "unpin-column",
+            onClick: menuActionClickHandler,
+            children: "Unpin"
+        }, "unpin-column"));
+        if ("left" === pin || "right" === pin) menuItems.push(/*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: "Pin Column"
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuPanel, {
+                    children: "right" === pin ? pinLeft : pinRight
+                })
+            ]
+        }, "pin-menu"));
+        else if ("floating" === pin) menuItems.push(/*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: "Pin Column"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(MenuPanel, {
+                    children: [
+                        pinLeft,
+                        pinRight
+                    ]
+                })
+            ]
+        }, "pin-menu"));
+        else menuItems.push(/*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: "Pin Column"
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuPanel, {
+                    children: pinRight
+                })
+            ]
+        }, "pin-menu"));
+    } else menuItems.push(/*#__PURE__*/ jsxs(Menu, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                children: /*#__PURE__*/ jsx(MenuItem, {
+                    children: "Pin Column"
+                })
+            }),
+            /*#__PURE__*/ jsxs(MenuPanel, {
+                children: [
+                    pinLeft,
+                    pinRight
+                ]
+            })
+        ]
+    }, "pin-menu"));
+    return menuItems;
+};
+function buildAggregationMenuItems(column, dataSource, menuActionClickHandler, isAllowed = true) {
+    if (!isAllowed) return null;
+    const { name, label = name } = column;
+    if (dataSource.groupBy?.length === 0) return [];
+    {
+        const menuItems = [
+            /*#__PURE__*/ jsx(MenuItem, {
+                "data-menu-action-id": "agg-count",
+                onClick: menuActionClickHandler,
+                children: "Count"
+            }, "agg-count"),
+            /*#__PURE__*/ jsx(MenuItem, {
+                "data-menu-action-id": "agg-distinct",
+                onClick: menuActionClickHandler,
+                children: "Distinct"
+            }, "agg-distinct")
+        ];
+        if (isNumericColumn(column)) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
+            "data-menu-action-id": "agg-sum",
+            onClick: menuActionClickHandler,
+            children: "Sum"
+        }, "agg-sum"), /*#__PURE__*/ jsx(MenuItem, {
+            "data-menu-action-id": "agg-avg",
+            onClick: menuActionClickHandler,
+            children: "Average"
+        }, "agg-avg"), /*#__PURE__*/ jsx(MenuItem, {
+            "data-menu-action-id": "agg-high",
+            onClick: menuActionClickHandler,
+            children: "High"
+        }, "agg-high"), /*#__PURE__*/ jsx(MenuItem, {
+            "data-menu-action-id": "agg-low",
+            onClick: menuActionClickHandler,
+            children: "Low"
+        }, "agg-low"));
+        return [
+            /*#__PURE__*/ jsxs(Menu, {
+                children: [
+                    /*#__PURE__*/ jsx(MenuTrigger, {
+                        children: /*#__PURE__*/ jsx(MenuItem, {
+                            children: `Aggregate ${label}`
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(MenuPanel, {
+                        children: menuItems
+                    })
+                ]
+            }, "aggregate-menu")
+        ];
+    }
+}
+export { buildAggregationMenuItems, buildGroupMenu, buildPinMenuItems, buildSortMenu, buildVisibilityMenuItems, getColumnMenuActionType, isColumnMenuActionType };

package/src/column-menu/useColumnActions.js

@@ -0,0 +1,77 @@
+import { AggregationType, addGroupColumn, addSortColumn, logUnhandledMessage, removeGroupColumn, setAggregations, setSortColumn } from "@vuu-ui/vuu-utils";
+const { Average: Average, Count: Count, Distinct: Distinct, High: High, Low: Low, Sum: Sum } = AggregationType;
+const useColumnActions = ({ dataSource, onColumnDisplayAction })=>{
+    const handleContextMenuAction = (columnMenuActionType, column)=>{
+        if (column && dataSource) switch(columnMenuActionType){
+            case "sort-asc":
+                return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
+            case "sort-dsc":
+                return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
+            case "remove-sort":
+                return dataSource.sort = {
+                    sortDefs: []
+                }, true;
+            case "sort-add-asc":
+                return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
+            case "sort-add-dsc":
+                return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
+            case "group-column":
+                return dataSource.groupBy = [
+                    column.name
+                ], true;
+            case "add-to-group":
+                return dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column), true;
+            case "remove-group":
+                return dataSource.groupBy = [], true;
+            case "remove-from-group":
+                return dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column), true;
+            case "remove-column":
+                dataSource.columns = dataSource.columns.filter((name)=>name !== column.name);
+                onColumnDisplayAction?.({
+                    type: "removeColumn",
+                    column
+                });
+                return true;
+            case "agg-avg":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Average), true;
+            case "agg-high":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
+            case "agg-low":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
+            case "agg-count":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
+            case "agg-distinct":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
+            case "agg-sum":
+                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
+            case "hide-column":
+                return onColumnDisplayAction?.({
+                    type: "hideColumn",
+                    column
+                }), true;
+            case "pin-column-left":
+                return onColumnDisplayAction?.({
+                    type: "pinColumn",
+                    column,
+                    pin: "left"
+                }), true;
+            case "pin-column-right":
+                return onColumnDisplayAction?.({
+                    type: "pinColumn",
+                    column,
+                    pin: "right"
+                }), true;
+            case "unpin-column":
+                return onColumnDisplayAction?.({
+                    type: "pinColumn",
+                    column,
+                    pin: false
+                }), true;
+            default:
+                logUnhandledMessage(columnMenuActionType, "[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType");
+        }
+        return false;
+    };
+    return handleContextMenuAction;
+};
+export { useColumnActions };

package/src/column-picker/ColumnModel.js

@@ -0,0 +1,113 @@
+import { EventEmitter, reorderColumnItems } from "@vuu-ui/vuu-utils";
+const ColumnChangeSource = {
+    ColumnPicker: "column-picker",
+    ColumnSettings: "column-settings",
+    Table: "table"
+};
+const SelectedColumnChangeType = {
+    CalculatedColumnAdded: "calculated-column-added",
+    ColumnAdded: "column-added",
+    ColumnRemoved: "column-removed",
+    ColumnUpdated: "column-updated",
+    ColumnsReordered: "columns-reordered"
+};
+const isColumnAdded = (change)=>change?.type === SelectedColumnChangeType.ColumnAdded;
+const isColumnRemoved = (change)=>change?.type === SelectedColumnChangeType.ColumnRemoved;
+const isColumnUpdated = (change)=>change?.type === SelectedColumnChangeType.ColumnUpdated;
+const isColumnsReordered = (change)=>change?.type === SelectedColumnChangeType.ColumnsReordered;
+const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 })=>l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
+const filterColumns = (columns, pattern)=>{
+    if (!pattern) return columns;
+    {
+        const lowerCasePattern = pattern.toLowerCase();
+        return columns.filter(({ name, label = name })=>-1 !== label.toLowerCase().indexOf(lowerCasePattern));
+    }
+};
+class ColumnModel extends EventEmitter {
+    allColumns;
+    #searchPattern = "";
+    #selectedColumns;
+    constructor(allColumns, selectedColumns){
+        super(), this.allColumns = allColumns;
+        this.#selectedColumns = selectedColumns;
+    }
+    get availableColumns() {
+        return filterColumns(this.allColumns, this.#searchPattern).filter(({ name })=>-1 === this.#selectedColumns.findIndex((c)=>c.name === name)).toSorted(byColumnName);
+    }
+    set searchPattern(pattern) {
+        const searchPattern = pattern;
+        if (searchPattern !== this.#searchPattern) {
+            this.#searchPattern = searchPattern;
+            this.emit("render", {});
+        }
+    }
+    get searchPattern() {
+        return this.#searchPattern ?? "";
+    }
+    get selectedColumns() {
+        return filterColumns(this.#selectedColumns, this.#searchPattern);
+    }
+    setSelectedColumns(selectedColumns, source, changeDescriptor) {
+        this.#selectedColumns = selectedColumns;
+        this.notifyListeners(selectedColumns, source, changeDescriptor);
+    }
+    getColumn(name) {
+        const col = this.#selectedColumns.find((col)=>col.name === name);
+        if (col) return col;
+        throw Error(`[ColumnModel] columns does not contain column ${name}`);
+    }
+    addItemToSelectedColumns(name, source) {
+        const column = this.allColumns.find((col)=>col.name === name);
+        if (column) {
+            this.#selectedColumns = this.#selectedColumns.concat(column);
+            this.notifyListeners(this.#selectedColumns, source, {
+                type: SelectedColumnChangeType.ColumnAdded,
+                column
+            });
+        } else throw Error(`[ColumnModel] addItemToSelectedColumns, column '${name}' not found`);
+    }
+    removeItemFromSelectedColumns(name, source) {
+        const column = this.#selectedColumns.find((col)=>col.name === name);
+        if (column) {
+            const index = this.#selectedColumns.indexOf(column);
+            this.#selectedColumns = this.#selectedColumns.toSpliced(index, 1);
+            this.notifyListeners(this.#selectedColumns, source, {
+                type: SelectedColumnChangeType.ColumnRemoved,
+                column
+            });
+        } else throw Error(`[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`);
+    }
+    reorderSelectedColumns(orderedColumnNames, source) {
+        this.setSelectedColumns(reorderColumnItems(this.#selectedColumns, orderedColumnNames), source, {
+            type: SelectedColumnChangeType.ColumnsReordered
+        });
+    }
+    updateColumn(column, newColumn = column) {
+        const allIndex = this.allColumns.findIndex((col)=>col.name === column.name);
+        const selectedIndex = this.#selectedColumns.findIndex((col)=>col.name === column.name);
+        if (-1 !== selectedIndex) {
+            if (-1 === allIndex) throw Error("[ColumnModel] updateColumn, selected column not in allColumns collection");
+            this.#selectedColumns = this.#selectedColumns.toSpliced(selectedIndex, 1, newColumn);
+            this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);
+            this.notifyListeners(this.#selectedColumns, "column-settings", {
+                type: SelectedColumnChangeType.ColumnUpdated,
+                column
+            });
+        } else throw Error(`[ColumnModel] updateColumn, column ${column.name} not found`);
+    }
+    addColumn(column, addToSelectedColumns = false) {
+        console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);
+        if (addToSelectedColumns) console.log("add it to selected coliumns");
+        this.allColumns = this.allColumns.concat(column);
+        this.#selectedColumns = this.#selectedColumns.concat(column);
+        this.notifyListeners(this.#selectedColumns, "column-picker", {
+            type: SelectedColumnChangeType.CalculatedColumnAdded,
+            column
+        });
+    }
+    notifyListeners = (columns, source, changeType)=>{
+        this.emit("change", columns, source, changeType);
+        this.emit("render", {});
+    };
+}
+export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnUpdated, isColumnsReordered };

package/src/column-picker/ColumnPicker.css.js

@@ -0,0 +1,96 @@
+const css = `
+.vuuColumnPicker {
+  --label-margin-left: 0px;
+  --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));
+  background: var(--columnpicker-background);
+  gap: var(--salt-spacing-300);
+  height: var(--vuuColumnPicker-height, 100%);
+  padding: var(--salt-spacing-300) 0;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size;
+
+  &.vuuColumnPicker-withCalculated {
+    --label-margin-left: 8px;
+  }
+
+  & .saltListBox {
+    background-color: inherit;
+  }
+
+  & .saltOption {
+    background-color: inherit;
+    border-bottom: var(--vuuColumnListItem-border, solid) 1px
+        var(--salt-separable-tertiary-borderColor);
+    align-items: center;
+    gap: var(--salt-spacing-200);
+    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
+
+    & .vuuIcon {
+      --vuu-icon-color: var(--salt-content-secondary-foreground);
+    }
+
+    & .vuuCalculatedColumnIcon {
+      --vuu-icon-color: var(--salt-content-secondary-foreground);
+      position: absolute;
+      top: 8px;
+      left: 32px;
+    }
+
+    & .vuuHighlight {
+      color: var(--vuu-color-blue-40);
+      text-decoration: underline;
+    }
+
+    & .vuuColumnPicker-text {
+      margin-left: var(--label-margin-left);
+    }
+  }
+
+  & .vuuColumnPickerListItem-action {
+    visibility: hidden;
+    margin-left: auto;
+  }
+
+  & .saltOption:hover {
+    & .vuuColumnPickerListItem-action {
+      visibility: visible;
+    }
+  }
+
+  & .vuuColumnPicker-search {
+    --saltInput-paddingLeft: var(--salt-spacing-300);
+    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);
+  }
+
+  & .vuuColumnPicker-scrollContainer {
+    flex: 1 1 0;
+    overflow: auto;
+
+    & .vuuColumnPicker-sectionHeader {
+      background: var(--columnpicker-background);
+      height: 32px;
+      padding: 0 var(--salt-spacing-300);
+      z-index: 1;
+      align-items: center;
+      display: flex;
+      position: sticky;
+      top: 0;
+    }
+
+    & .vuuColumnPicker-availableHeader {
+      top: 32px;
+    }
+
+    & .vuuColumnPicker-availableList {
+      & .saltOption {
+        padding-left: var(--salt-spacing-300);
+      }
+    }
+  }
+}
+
+
+`;
+export default css;