@vuu-ui/vuu-table 2.1.19-beta.1 → 2.1.19-beta.2

package/src/data-row/DataRow.mjs

@@ -0,0 +1,298 @@
+import { getCalculatedColumnDetails, getServerDataType, isCalculatedColumn, isVuuColumnDataType } from "@vuu-ui/vuu-utils";
+const dataRowSymbol = Symbol("DataRow");
+const dataRowIntrinsicAttributes = {
+    childCount: true,
+    depth: true,
+    index: true,
+    isExpanded: true,
+    isSelected: true,
+    isLeaf: true,
+    key: true,
+    renderIndex: true
+};
+const dataRowOperations = {
+    hasColumn: true
+};
+const isDataRowIntrinsicAttribute = (attrName)=>true === dataRowIntrinsicAttributes[attrName];
+const isDataRowOperation = (attrName)=>true === dataRowOperations[attrName];
+const stringNumericTypes = {
+    long: true,
+    scaleddecimal2: true,
+    scaleddecimal4: true,
+    scaleddecimal6: true,
+    scaleddecimal8: true
+};
+const isStringNumericType = (type)=>true === stringNumericTypes[type];
+const MAX_DECIMALS = "0000000";
+const TRAILING_ZEROES = /0+$/;
+const stripTrailingZeroes = (value)=>value.endsWith("0") ? value.replace(TRAILING_ZEROES, "") : value;
+const injectDecimalPoint = (value, decimal)=>{
+    if ("0" === value || "-0" === value || "" === value) return value;
+    if ("-" === value[0]) {
+        const digits = value.slice(1);
+        if (digits.length < decimal) return `-0.${(MAX_DECIMALS + digits).slice(-decimal)}`;
+        if (digits.length === decimal) return `-0.${stripTrailingZeroes(digits)}`;
+        return `-${digits.slice(0, -decimal)}.${digits.slice(-decimal)}`;
+    }
+    if (value.length < decimal) {
+        const decimals = (MAX_DECIMALS + value).slice(-decimal);
+        return `0.${stripTrailingZeroes(decimals)}`;
+    }
+    {
+        if (value.length === decimal) return `0.${stripTrailingZeroes(value)}`;
+        const decimals = value.slice(-decimal);
+        return `${value.slice(0, -decimal)}.${stripTrailingZeroes(decimals)}`;
+    }
+};
+const formatStringNumeric = (value, type)=>{
+    switch(type){
+        case "long":
+            return value;
+        case "scaleddecimal2":
+            return injectDecimalPoint(value, 2);
+        case "scaleddecimal4":
+            return injectDecimalPoint(value, 4);
+        case "scaleddecimal6":
+            return injectDecimalPoint(value, 6);
+        case "scaleddecimal8":
+            return injectDecimalPoint(value, 8);
+    }
+};
+function DataRowImpl(data, columnMap) {
+    const target = {};
+    const getPropertyNames = ()=>Object.keys(columnMap);
+    const jsonSerializer = ()=>Object.entries(columnMap).reduce((json, [name, mapEntry])=>{
+            if (mapEntry) json[name] = data[mapEntry.index];
+            return json;
+        }, {});
+    const DataRowOperations = {
+        hasColumn: (name)=>void 0 !== columnMap[name]
+    };
+    return new Proxy(target, {
+        get (_obj, prop) {
+            if ("symbol" == typeof prop) {
+                if (prop === dataRowSymbol) return true;
+                return;
+            }
+            if ("toJSON" === prop) return jsonSerializer;
+            if ("toString" === prop) return "DataRow";
+            if ("$$typeof" === prop) return;
+            if (isDataRowOperation(prop)) return DataRowOperations[prop];
+            else if ("getPropertyNames" === prop) return getPropertyNames;
+            const columnMapEntry = columnMap[prop];
+            if (void 0 === columnMapEntry) {
+                if ("" !== prop) console.warn(`[DataRow:Proxy] unknown column ${prop}`);
+                return;
+            }
+            if (isDataRowIntrinsicAttribute(prop)) return data[columnMapEntry.index];
+            if (isStringNumericType(columnMapEntry.type)) return formatStringNumeric(data[columnMapEntry.index], columnMapEntry.type);
+            return data[columnMapEntry.index];
+        },
+        set () {
+            throw new TypeError("DataRow is readonly");
+        }
+    });
+}
+const ColumnMapIntrinsicColumns = {
+    index: {
+        index: 0,
+        type: "int"
+    },
+    renderIndex: {
+        index: 1,
+        type: "int"
+    },
+    isLeaf: {
+        index: 2,
+        type: "boolean"
+    },
+    isExpanded: {
+        index: 3,
+        type: "boolean"
+    },
+    depth: {
+        index: 4,
+        type: "int"
+    },
+    childCount: {
+        index: 5,
+        type: "int"
+    },
+    key: {
+        index: 6,
+        type: "string"
+    },
+    isSelected: {
+        index: 7,
+        type: "boolean"
+    }
+};
+function createColumnMap(columns, schemaColumns) {
+    const columnMap = {
+        ...ColumnMapIntrinsicColumns
+    };
+    columns.forEach((name, i, cols)=>{
+        const schemaColumn = schemaColumns.find((col)=>col.name === name);
+        if (schemaColumn) {
+            const serverDataType = getServerDataType(schemaColumn, true);
+            columnMap[name] = {
+                index: i + 10,
+                type: serverDataType
+            };
+        } else if (isCalculatedColumn(name)) {
+            const { serverDataType } = getCalculatedColumnDetails(name);
+            if (isVuuColumnDataType(serverDataType)) columnMap[name] = {
+                index: i + 10,
+                type: serverDataType
+            };
+            else throw Error(`[DataRow] calculated column with invalid serverDataType ${name}`);
+        } else if ("vuuMsg" === name && i === cols.length - 1) columnMap[name] = {
+            index: i + 10,
+            type: "string"
+        };
+        else throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);
+    });
+    if (void 0 === columnMap.vuuMsg) return {
+        ...columnMap,
+        vuuMsg: {
+            index: columns.length + 10,
+            type: "string"
+        }
+    };
+    return columnMap;
+}
+const dataRowFactory = (columns, schemaColumns)=>{
+    let columnMap = createColumnMap(columns, schemaColumns);
+    const setColumns = (columns)=>{
+        columnMap = createColumnMap(columns, schemaColumns);
+    };
+    const DataRow = function(data) {
+        return DataRowImpl(data, columnMap);
+    };
+    return [
+        DataRow,
+        setColumns
+    ];
+};
+if ("production" !== process.env.NODE_ENV) window.devtoolsFormatters = [
+    {
+        header: function(obj) {
+            if (obj[dataRowSymbol]) return [
+                "div",
+                {
+                    style: "display: flex; gap: 4px; justify-content: space-between"
+                },
+                [
+                    "span",
+                    {},
+                    "Vuu DataRow"
+                ],
+                [
+                    "span",
+                    {
+                        style: "font-weight: bold;"
+                    },
+                    `[${obj.index}]`
+                ],
+                [
+                    "span",
+                    {
+                        style: "font-weight: bold; color: blue;"
+                    },
+                    `#${obj.key}`
+                ]
+            ];
+            return null;
+        },
+        hasBody: function() {
+            return true;
+        },
+        body: function(obj) {
+            return [
+                "div",
+                {},
+                [
+                    "div",
+                    {
+                        style: "display: flex; gap: 4px;"
+                    },
+                    [
+                        "span",
+                        {},
+                        "index"
+                    ],
+                    [
+                        "span",
+                        {},
+                        obj.index
+                    ]
+                ],
+                [
+                    "div",
+                    {
+                        style: "display: flex; gap: 4px;"
+                    },
+                    [
+                        "span",
+                        {},
+                        "key"
+                    ],
+                    [
+                        "span",
+                        {},
+                        obj.key
+                    ]
+                ],
+                [
+                    "div",
+                    {
+                        style: "display: flex; gap: 4px;"
+                    },
+                    [
+                        "span",
+                        {},
+                        "renderIndex"
+                    ],
+                    [
+                        "span",
+                        {},
+                        obj.renderIndex
+                    ]
+                ],
+                [
+                    "div",
+                    {
+                        style: "display: flex; gap: 4px;"
+                    },
+                    [
+                        "span",
+                        {},
+                        "isSelected"
+                    ],
+                    [
+                        "span",
+                        {},
+                        obj.isSelected
+                    ]
+                ],
+                ...obj.getPropertyNames().map((name)=>[
+                        "div",
+                        {
+                            style: "display: flex; gap: 4px;"
+                        },
+                        [
+                            "span",
+                            {},
+                            name
+                        ],
+                        [
+                            "span",
+                            {},
+                            obj[name]
+                        ]
+                    ])
+            ];
+        }
+    }
+];
+export { dataRowFactory };

package/src/header-cell/GroupHeaderCell.css.js

@@ -0,0 +1,91 @@
+const css = `
+.vuu-theme {
+  --svg-spinner: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb%2838, 112, 169%29\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>");
+}
+
+.vuuTableGroupHeaderCell {
+  --vuuColumnHeaderPill-margin: 0;
+  --cell-align: "flex-start";
+  text-align: left;
+  cursor: default;
+  --vuuColumnHeaderPill-flex: 0 0 24px;
+  background-color: var(--vuuTableHeaderCell-background, var(--table-background));
+  border-bottom: none;
+  border-right-color: var(--cell-borderColor);
+  box-sizing: border-box;
+  vertical-align: top;
+  border-right-style: solid;
+  border-right-width: 1px;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  padding: 0 12px 0 4px;
+  display: inline-flex;
+  position: relative;
+
+  &.vuuPinLeft, &.vuuPinRight {
+    background-color: var(--vuuTableHeaderCell-background, var(--table-background));
+  }
+}
+
+.vuuTableGroupHeaderCell-inner {
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  padding-left: 1px;
+  display: flex;
+}
+
+.vuuTableGroupHeaderCell-col {
+  background-color: inherit;
+  height: calc(var(--vuuTableHeaderHeight) - 2px);
+  flex: 0 auto;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 8px;
+  display: inline-flex;
+  position: relative;
+}
+
+.vuuTableGroupHeaderCell-label {
+  flex: none;
+  align-items: center;
+  display: flex;
+}
+
+.vuuTableGroupHeaderCell-close {
+  --vuu-icon-height: 18px;
+  --vuu-icon-width: 18px;
+  cursor: pointer;
+  left: 3px;
+}
+
+.vuuTableGroupHeaderCell-resizing {
+  --columnResizer-color: var(--salt-color-blue-500);
+  --columnResizer-height: var(--table-height);
+  --columnResizer-width: 2px;
+}
+
+.vuuTableGroupHeaderCell-pending {
+  --pending-content: "";
+}
+
+.vuuTableGroupHeaderCell-col:has( + .vuuColumnResizer):after {
+  content: var(--pending-content);
+  background-image: var(--svg-spinner);
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 24px;
+  height: 24px;
+}
+
+.vuuTableGroupHeaderCell:focus {
+  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 var(--cell-outline-width) white;
+  border-bottom: none;
+}
+
+
+`;
+export default css;

package/src/header-cell/GroupHeaderCell.mjs

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useRef, useState } from "react";
+import { OverflowContainer } from "@vuu-ui/vuu-ui-controls";
+import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { ColumnHeaderPill, GroupColumnPill } from "../column-header-pill/index.mjs";
+import { ColumnResizer, useTableColumnResize } from "../column-resizing/index.mjs";
+import { useCell } from "../useCell.mjs";
+import GroupHeaderCell from "./GroupHeaderCell.css";
+const classBase = "vuuTableGroupHeaderCell";
+const switchIfChanged = (columns, newColumns)=>{
+    if (columns === newColumns) return columns;
+    return newColumns;
+};
+const GroupHeaderCell_GroupHeaderCell = ({ column: groupColumn, className: classNameProp, onMoveColumn, onRemoveColumn, onResize, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-group-header-cell",
+        css: GroupHeaderCell,
+        window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const { isResizing, ...resizeProps } = useTableColumnResize({
+        column: groupColumn,
+        onResize,
+        rootRef
+    });
+    const [columns, setColumns] = useState(groupColumn.columns);
+    const { className, style } = useCell(groupColumn, classBase, true);
+    const columnPillProps = columns.length > 1 ? {
+        removable: true,
+        onRemove: onRemoveColumn
+    } : void 0;
+    const handleMoveItem = useCallback((fromIndex, toIndex)=>{
+        setColumns((cols)=>{
+            const newCols = cols.slice();
+            const [tab] = newCols.splice(fromIndex, 1);
+            if (-1 === toIndex) {
+                const result = newCols.concat(tab);
+                requestAnimationFrame(()=>onMoveColumn?.(result));
+                return result;
+            }
+            newCols.splice(toIndex, 0, tab);
+            requestAnimationFrame(()=>onMoveColumn?.(newCols));
+            return newCols;
+        });
+    }, [
+        onMoveColumn
+    ]);
+    useLayoutEffectSkipFirst(()=>{
+        setColumns((cols)=>switchIfChanged(cols, groupColumn.columns));
+    }, [
+        groupColumn.columns
+    ]);
+    const handleClick = useCallback(()=>{
+        console.log("click");
+    }, []);
+    const handleKeyDown = useCallback(()=>{
+        console.log("keydown");
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        "aria-colindex": groupColumn.ariaColIndex,
+        className: clsx(className, classNameProp, {
+            [`${classBase}-pending`]: false === groupColumn.groupConfirmed
+        }),
+        ref: rootRef,
+        role: "columnheader",
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(OverflowContainer, {
+                allowDragDrop: true,
+                className: `${classBase}-inner`,
+                onMoveItem: handleMoveItem,
+                overflowPosition: "start",
+                children: columns.map((column)=>/*#__PURE__*/ createElement(GroupColumnPill, {
+                        ...columnPillProps,
+                        column: column,
+                        key: column.name,
+                        onClick: handleClick,
+                        onKeyDown: handleKeyDown
+                    }))
+            }),
+            /*#__PURE__*/ jsx(ColumnHeaderPill, {
+                className: `${classBase}-removeAll`,
+                column: groupColumn,
+                removable: true,
+                onRemove: onRemoveColumn
+            }),
+            false !== groupColumn.resizeable ? /*#__PURE__*/ jsx(ColumnResizer, {
+                ...resizeProps
+            }) : null
+        ]
+    });
+};
+export { GroupHeaderCell_GroupHeaderCell as GroupHeaderCell };

package/src/header-cell/HeaderCell.css.js

@@ -0,0 +1,182 @@
+const css = `
+.vuuTableHeaderCell {
+  --selected-column-borderColor: var(--vuuTable-column-selected-borderColor, var(--salt-selectable-borderColor-selected));
+  --cell-align: "flex-start";
+  --vuuColumnHeaderPill-margin: 0;
+  --vuuColumnHeaderPill-flex: 0 0 24px;
+  background-color: var(--vuuTableHeaderCell-background, var(--table-background));
+  border-bottom: none;
+  border-right-color: var(--cell-borderColor);
+  box-sizing: border-box;
+  cursor: default;
+  vertical-align: top;
+  border-right-style: solid;
+  border-right-width: 1px;
+  align-items: center;
+  gap: 2px;
+  height: 100%;
+  padding: 0 4px 0 8px;
+  display: inline-flex;
+  position: relative;
+
+  &.vuuPinLeft, &.vuuPinRight {
+    background-color: var(--vuuTableHeaderCell-background, var(--table-background));
+  }
+}
+
+.vuuTableHeaderCell.vuuDragging, .vuuTableHeaderCell:focus {
+  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);
+  outline-offset: -3px;
+}
+
+.vuuTableHeaderCell.vuuDragging {
+  height: var(--vuu-table-col-header-row-height);
+}
+
+.vuuTableHeaderCell-right {
+  --columnResizer-left: 0;
+  --vuuTable-columnMenu-margin: 0;
+  --column-menu-left: 2px;
+  justify-content: flex-end;
+  padding: 0 3px 0 12px;
+}
+
+.vuuTableHeaderCell-noMenu {
+  padding-left: var(--salt-spacing-300);
+}
+
+.vuuTableHeaderCell-label {
+  line-height: calc(var(--vuu-table-cell-header-height) - 1px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: auto;
+  overflow: hidden;
+}
+
+.vuuTableHeaderCell-right .vuuTableHeaderCell-label {
+  text-align: right;
+}
+
+.vuuTableHeaderCell-resizing {
+  --columnResizeThumb-color: var(--vuu-color-purple-10);
+  --columnResizer-color: var(--vuu-color-purple-10);
+  --columnResizer-height: var(--table-height);
+}
+
+.vuuTableHeaderCell.vuuPinLeft {
+  padding-left: 2px;
+}
+
+.vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {
+  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
+  --inset-r: calc(var(--pin-width) - 2px);
+  --inset-b: calc(var(--height) - 2px);
+  --clip-path: polygon(0% 0%,
+    0% 120%,
+    2px 120%,
+    2px 2px,
+    var(--inset-r) 2px,
+    var(--inset-r) var(--inset-b),
+    2px var(--inset-b),
+    2px 120%,
+    120% 120%,
+    120% 0%);
+  border-color: var(--vuuTablePinnedColumn-borderColor, var(--salt-container-primary-borderColor));
+  clip-path: var(--clip-path);
+  content: "";
+  width: var(--pin-width);
+  height: var(--height);
+  z-index: -5;
+  background-color: #0000;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 3px;
+  box-shadow: 2px 1px 4px #0000001a;
+}
+
+.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {
+  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
+  --inset-r: calc(var(--pin-width) - 2px);
+  --inset-b: calc(var(--height) - 2px);
+  --clip-path: polygon(-20% 0%,
+    -20% 120%,
+    2px 120%,
+    2px 2px,
+    var(--inset-r) 2px,
+    var(--inset-r) var(--inset-b),
+    2px var(--inset-b),
+    2px 120%,
+    120% 120%,
+    120% 0%);
+  clip-path: var(--clip-path);
+  content: "";
+  width: var(--pin-width);
+  height: var(--height);
+  z-index: -5;
+  background-color: #0000;
+  border: 1px solid #a9aaad;
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  box-shadow: -2px 1px 4px #0000001a;
+}
+
+.vuuTableHeaderCell.vuuDraggable-dragAway {
+  display: none;
+}
+
+.vuuTable-headingCell {
+  background: var(--dataTable-background);
+  border-color: var(--salt-separable-tertiary-borderColor);
+  color: var(--salt-content-secondary-foreground);
+  height: var(--vuu-table-col-heading-height);
+  border-style: solid solid solid none;
+  border-width: 1px;
+  display: inline-block;
+  padding: 0 !important;
+}
+
+.vuuTableHeaderCell:has(.saltCheckbox) {
+  padding-left: 6px;
+}
+
+.vuuTableHeaderCell.error {
+  --selected-column-borderColor: var(--salt-status-error-borderColor);
+}
+
+.vuuTableHeaderCell.info {
+  --selected-column-borderColor: var(--salt-status-info-borderColor);
+}
+
+.vuuTableHeaderCell.success {
+  --selected-column-borderColor: var(--salt-status-success-borderColor);
+}
+
+.vuuTableHeaderCell.warning {
+  --selected-column-borderColor: var(--salt-status-warning-borderColor);
+}
+
+.vuuTableHeaderCell-selected:after {
+  border: solid 1px var(--selected-column-borderColor);
+  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px 2px);
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  height: calc(var(--table-height) - var(--horizontal-scrollbar-height) - 2px);
+  background-color: #0000;
+  border-radius: 6px;
+  width: calc(100% - 2px);
+  position: absolute;
+  top: 1px;
+  right: 1px;
+}
+
+
+`;
+export default css;