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

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "2.1.19-beta.1",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
+    "@vuu-ui/vuu-codemirror": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
@@ -31,13 +31,12 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/calculated-column/CalculatedColumnPanel.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dropdown, FormField, FormFieldLabel, Input, Option } from "@salt-ds/core";
+import { useCalculatedColumnPanel } from "./useCalculatedColumnPanel.js";
+import { useCallback, useRef } from "react";
+import { getCalculatedColumnDetails } from "@vuu-ui/vuu-utils";
+import { ColumnExpressionInput, useColumnExpressionSuggestionProvider } from "../column-expression-input/index.js";
+const classBase = "vuuCalculatedColumnPanel";
+const CalculatedColumnPanel = ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable })=>{
+    const typeRef = useRef(null);
+    const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useCalculatedColumnPanel({
+        column: columnProp,
+        onChangeColumn,
+        onChangeServerDataType: onChangeServerDataTypeProp
+    });
+    const initialExpressionRef = useRef(getCalculatedColumnDetails(column).expression ?? "");
+    const suggestionProvider = useColumnExpressionSuggestionProvider({
+        columns: columnModel.selectedColumns,
+        table: vuuTable
+    });
+    const handleSubmitExpression = useCallback(()=>{
+        if (typeRef.current) typeRef.current?.querySelector("button")?.focus();
+    }, []);
+    const { name, serverDataType } = getCalculatedColumnDetails(column);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: column.name
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-name",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Column Label"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: "vuuInput",
+                        onChange: onChangeName,
+                        value: name
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-expression",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Expression"
+                    }),
+                    /*#__PURE__*/ jsx(ColumnExpressionInput, {
+                        onChange: onChangeExpression,
+                        onSubmitExpression: handleSubmitExpression,
+                        source: initialExpressionRef.current,
+                        suggestionProvider: suggestionProvider
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "type",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Column type"
+                    }),
+                    /*#__PURE__*/ jsxs(Dropdown, {
+                        className: `${classBase}-type`,
+                        onSelectionChange: onChangeServerDataType,
+                        ref: typeRef,
+                        selected: serverDataType ? [
+                            serverDataType
+                        ] : [],
+                        value: serverDataType,
+                        children: [
+                            /*#__PURE__*/ jsx(Option, {
+                                value: "boolean",
+                                children: "Boolean"
+                            }),
+                            /*#__PURE__*/ jsx(Option, {
+                                value: "double",
+                                children: "Double"
+                            }),
+                            /*#__PURE__*/ jsx(Option, {
+                                value: "long",
+                                children: "Long"
+                            }),
+                            /*#__PURE__*/ jsx(Option, {
+                                value: "string",
+                                children: "String"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { CalculatedColumnPanel };

package/src/calculated-column/useCalculatedColumnPanel.js

@@ -0,0 +1,60 @@
+import { getCalculatedColumnDetails, isVuuColumnDataType, setCalculatedColumnExpression, setCalculatedColumnName, setCalculatedColumnType } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+const applyDefaults = (column)=>{
+    const { name, expression, serverDataType } = getCalculatedColumnDetails(column);
+    if (void 0 === serverDataType) return {
+        ...column,
+        name: `${name}:string:${expression}`
+    };
+    return column;
+};
+const useCalculatedColumnPanel = ({ column: columnProp, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp })=>{
+    const [column, _setColumn] = useState(applyDefaults(columnProp));
+    const columnRef = useRef(columnProp);
+    const setColumn = useCallback((column)=>{
+        columnRef.current = column;
+        _setColumn(column);
+    }, []);
+    const onChangeName = useCallback((evt)=>{
+        const { value } = evt.target;
+        const newColumn = setCalculatedColumnName(column, value);
+        console.log(`name = ${newColumn.name}`);
+        setColumn(newColumn);
+        onChangeColumn(newColumn);
+    }, [
+        column,
+        onChangeColumn,
+        setColumn
+    ]);
+    const onChangeExpression = useCallback((value)=>{
+        console.log(`expression = ${value}`);
+        const expression = value.trim();
+        const { current: column } = columnRef;
+        const newColumn = setCalculatedColumnExpression(column, expression);
+        setColumn(newColumn);
+        onChangeColumn(newColumn);
+    }, [
+        onChangeColumn,
+        setColumn
+    ]);
+    const onChangeServerDataType = useCallback((_e, [serverDataType])=>{
+        if (isVuuColumnDataType(serverDataType)) {
+            const newColumn = setCalculatedColumnType(column, serverDataType);
+            setColumn(newColumn);
+            onChangeServerDataTypeProp?.(serverDataType);
+            onChangeColumn(newColumn);
+        }
+    }, [
+        column,
+        onChangeColumn,
+        onChangeServerDataTypeProp,
+        setColumn
+    ]);
+    return {
+        column,
+        onChangeExpression,
+        onChangeName,
+        onChangeServerDataType
+    };
+};
+export { useCalculatedColumnPanel };

package/src/calculated-column/useEditCalculatedColumn.js

@@ -0,0 +1,104 @@
+import { jsx } from "react/jsx-runtime";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useRef } from "react";
+import { CalculatedColumnPanel } from "./CalculatedColumnPanel.js";
+const useEditCalculatedColumn = ({ calculatedColumn, columnModel, onSaveColumn, vuuTable })=>{
+    if (void 0 === vuuTable) throw Error("[useEditCalculatedColumn] vuuTable must be provided to create or edit a calculated column");
+    const { showPrompt } = useModal();
+    const calculatedColumnRef = useRef(void 0);
+    const handleChangeNewCalculatedColumn = useCallback((column)=>{
+        if (calculatedColumnRef.current) calculatedColumnRef.current.newColumn = column;
+        else throw Error("[TabbedTableConfigPanel] handleChangeNewCalculatedColumn");
+    }, []);
+    const handleSaveNewCalculatedColumn = useCallback(()=>{
+        if (calculatedColumnRef.current) {
+            const { current: { newColumn: calculatedColumn } } = calculatedColumnRef;
+            columnModel.addColumn(calculatedColumn, true);
+            calculatedColumnRef.current = void 0;
+            onSaveColumn?.(calculatedColumn);
+        }
+        const { current: calculatedColumn } = calculatedColumnRef;
+        if (calculatedColumn) {
+            columnModel.addColumn(calculatedColumn, true);
+            calculatedColumnRef.current = void 0;
+            onSaveColumn?.(calculatedColumn);
+        }
+    }, [
+        columnModel,
+        onSaveColumn
+    ]);
+    const handleCreateCalculatedColumn = useCallback(()=>{
+        if (vuuTable) {
+            const newColumn = {
+                name: "::",
+                serverDataType: "string"
+            };
+            calculatedColumnRef.current = {
+                newColumn
+            };
+            showPrompt(/*#__PURE__*/ jsx(CalculatedColumnPanel, {
+                column: newColumn,
+                columnModel: columnModel,
+                onChangeColumn: handleChangeNewCalculatedColumn,
+                vuuTable: vuuTable
+            }), {
+                confirmButtonLabel: "Save column",
+                onConfirm: handleSaveNewCalculatedColumn,
+                title: "Calculated column"
+            });
+        }
+    }, [
+        columnModel,
+        handleChangeNewCalculatedColumn,
+        handleSaveNewCalculatedColumn,
+        showPrompt,
+        vuuTable
+    ]);
+    const handleSaveColumnEdits = useCallback(()=>{
+        if (calculatedColumnRef.current) {
+            const { originalColumn, newColumn } = calculatedColumnRef.current;
+            if (originalColumn) {
+                calculatedColumnRef.current = void 0;
+                onSaveColumn?.(newColumn);
+                columnModel.updateColumn(originalColumn, newColumn);
+            }
+        }
+    }, [
+        columnModel,
+        onSaveColumn
+    ]);
+    const handleUpdateCalculatedColumn = useCallback((column)=>{
+        if (calculatedColumnRef.current) calculatedColumnRef.current.newColumn = column;
+        else throw Error("[TabbedTableConfigPanel] handleUpdateCalculatedColumn`");
+    }, []);
+    const handleEditCalculatedColumn = useCallback(()=>{
+        if (calculatedColumn && vuuTable) {
+            calculatedColumnRef.current = {
+                originalColumn: calculatedColumn,
+                newColumn: calculatedColumn
+            };
+            showPrompt(/*#__PURE__*/ jsx(CalculatedColumnPanel, {
+                column: calculatedColumn,
+                columnModel: columnModel,
+                onChangeColumn: handleUpdateCalculatedColumn,
+                vuuTable: vuuTable
+            }), {
+                confirmButtonLabel: "Save column",
+                onConfirm: handleSaveColumnEdits,
+                title: "Calculated column"
+            });
+        }
+    }, [
+        calculatedColumn,
+        columnModel,
+        handleSaveColumnEdits,
+        handleUpdateCalculatedColumn,
+        showPrompt,
+        vuuTable
+    ]);
+    return {
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        onEditCalculatedColumn: handleEditCalculatedColumn
+    };
+};
+export { useEditCalculatedColumn };

package/src/cell-edit-validators/CaseValidator.js

@@ -0,0 +1,21 @@
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { OK } from "@vuu-ui/vuu-data-react";
+const isString = (value)=>"string" == typeof value;
+const CaseValidator = (rule, value)=>{
+    if (!isString(value)) return {
+        ok: false,
+        message: "value must be a string"
+    };
+    if ("" === value) return OK;
+    if ("lower" === rule.value && value.toLowerCase() !== value) return {
+        ok: false,
+        message: "value must be all lowercase"
+    };
+    if ("upper" === rule.value && value.toUpperCase() !== value) return {
+        ok: false,
+        message: "value must be all uppercase"
+    };
+    return OK;
+};
+registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+export { CaseValidator };

package/src/cell-edit-validators/PatternValidator.js

@@ -0,0 +1,23 @@
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { OK } from "@vuu-ui/vuu-data-react";
+const isString = (value)=>"string" == typeof value;
+const defaultMessage = "value does not match expected pattern";
+const PatternValidator = (rule, value)=>{
+    if ("string" != typeof rule.value) throw Error("Pattern validation rule must provide pattern");
+    if (!isString(value)) return {
+        ok: false,
+        message: "value must be a string"
+    };
+    if ("" === value) return OK;
+    {
+        const { message = defaultMessage } = rule;
+        const pattern = new RegExp(rule.value);
+        if (pattern.test(value)) return OK;
+        return {
+            ok: false,
+            message
+        };
+    }
+};
+registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
+export { PatternValidator };

package/src/cell-edit-validators/index.js

@@ -0,0 +1,2 @@
+export * from "./CaseValidator.js";
+export * from "./PatternValidator.js";

package/src/cell-renderers/background-cell/BackgroundCell.css.js

@@ -0,0 +1,103 @@
+const css = `
+.vuuBackgroundCell {
+  --background-animation-duration: 10s;
+  color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));
+  padding-right: var(--salt-size-unit);
+  position: relative;
+}
+
+.vuuBackgroundCell-arrowBackground, .vuuBackgroundCell-arrowOnly {
+  padding-left: 14px;
+}
+
+.vuuBackgroundCell-value {
+  z-index: 1;
+  position: relative;
+}
+
+.vuuBackgroundCell-arrow {
+  background-color: var(--background-cell-background);
+  text-align: left;
+  position: absolute;
+  inset: 0;
+}
+
+.vuuBackgroundCell-arrow + .num {
+  padding-left: 8px;
+}
+
+.right .vuuBackgroundCell-arrow {
+  text-align: right;
+}
+
+.right .vuuBackgroundCell-arrow + .num {
+  padding-right: 8px;
+}
+
+.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  background-color: #0000;
+}
+
+.vuuBackgroundCell-backgroundOnly.up1, .vuuBackgroundCell-arrowBackground.up1 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgup1;
+}
+
+.vuuBackgroundCell-backgroundOnly.up2, .vuuBackgroundCell-arrowBackground.up2 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgup2;
+}
+
+.vuuBackgroundCell-backgroundOnly.down1, .vuuBackgroundCell-arrowBackground.down1 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgdown1;
+}
+
+.vuuBackgroundCell-backgroundOnly.down2, .vuuBackgroundCell-arrowBackground.down2 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgdown2;
+}
+
+.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-name: vuuarrowup1;
+  animation-duration: 30s;
+}
+
+.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-name: vuuarrowup2;
+  animation-duration: 30s;
+}
+
+.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-name: vuuarrowdown1;
+  animation-duration: 30s;
+}
+
+.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-name: vuuarrowdown2;
+  animation-duration: 30s;
+}
+
+.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-name: vuubgarrowup1;
+  animation-duration: 30s;
+}
+
+.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-name: vuubgarrowup2;
+  animation-duration: 30s;
+}
+
+.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-name: vuubgarrowdown1;
+  animation-duration: 30s;
+}
+
+.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-name: vuubgarrowdown2;
+  animation-duration: 30s;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/background-cell/BackgroundCell.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { DOWN1, DOWN2, UP1, UP2, dataAndColumnUnchanged, isTypeDescriptor, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { memo } from "react";
+import { useDirection } from "./useDirection.js";
+import BackgroundCell_0 from "./BackgroundCell.css";
+import BackgroundKeyframes from "./BackgroundKeyframes.css";
+const CHAR_ARROW_UP = String.fromCharCode(11014);
+const CHAR_ARROW_DOWN = String.fromCharCode(11015);
+const classBase = "vuuBackgroundCell";
+const FlashStyle = {
+    ArrowOnly: "arrow",
+    BackgroundOnly: "bg-only",
+    ArrowBackground: "arrow-bg"
+};
+const getFlashStyle = (colType)=>{
+    if (isTypeDescriptor(colType) && colType.renderer) {
+        if ("flashStyle" in colType.renderer) return colType.renderer["flashStyle"];
+    }
+    return FlashStyle.BackgroundOnly;
+};
+const BackgroundCell_BackgroundCell = /*#__PURE__*/ memo(function({ column, dataRow }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-background-cell",
+        css: BackgroundCell_0,
+        window: targetWindow
+    });
+    useComponentCssInjection({
+        testId: "vuu-background-keyframes",
+        css: BackgroundKeyframes,
+        window: targetWindow
+    });
+    const { name, type, valueFormatter } = column;
+    const value = dataRow[name];
+    const flashStyle = getFlashStyle(type);
+    const direction = useDirection(dataRow.key, value, column);
+    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
+    const dirClass = direction ? " " + direction : "";
+    const className = clsx(classBase, dirClass, {
+        [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+        [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+        [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-arrow`,
+                children: arrow
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-value`,
+                children: valueFormatter(dataRow[name])
+            })
+        ]
+    });
+}, dataAndColumnUnchanged);
+registerComponent("vuu.price-move-background", BackgroundCell_BackgroundCell, "cell-renderer", {
+    description: "Change background color of cell when value changes",
+    configEditor: "BackgroundCellConfigurationEditor",
+    label: "Background Flash",
+    serverDataType: [
+        "long",
+        "int",
+        "double",
+        "scaleddecimal2",
+        "scaleddecimal4",
+        "scaleddecimal6",
+        "scaleddecimal8"
+    ]
+});
+export { BackgroundCell_BackgroundCell as BackgroundCell };

package/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js

@@ -0,0 +1,9 @@
+const css = `
+.vuuBackgroundCellConfiguration {
+  background-color: red;
+  height: 50px;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { registerConfigurationEditor } from "@vuu-ui/vuu-utils";
+import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback, useState } from "react";
+import BackgroundCellConfigurationEditor from "./BackgroundCellConfigurationEditor.css";
+const classBase = "vuuBackgroundCellConfiguration";
+const flashOptions = [
+    {
+        label: "Background Only",
+        value: "bg-only"
+    },
+    {
+        label: "Background and Arrow",
+        value: "arrow-bg"
+    },
+    {
+        label: "Arrow Only",
+        value: "arrow"
+    }
+];
+const [defaultFlashOption] = flashOptions;
+const valueFromColumn = (column)=>{
+    const { flashStyle } = column.type.renderer;
+    return flashOptions.find((o)=>o.value === flashStyle) || defaultFlashOption;
+};
+const BackgroundCellConfigurationEditor_BackgroundCellConfigurationEditor = ({ column, onChangeRendering })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-background-cell-configuration-editor",
+        css: BackgroundCellConfigurationEditor,
+        window: targetWindow
+    });
+    console.log({
+        type: column.type
+    });
+    const [flashStyle, setFlashStyle] = useState(valueFromColumn(column));
+    const handleSelectionChange = useCallback((_, [flashOption])=>{
+        setFlashStyle(flashOption);
+        const renderProps = column.type.renderer;
+        onChangeRendering({
+            ...renderProps,
+            flashStyle: flashOption?.value ?? defaultFlashOption.value
+        });
+    }, [
+        column.type,
+        onChangeRendering
+    ]);
+    return /*#__PURE__*/ jsxs(FormField, {
+        children: [
+            /*#__PURE__*/ jsx(FormFieldLabel, {
+                children: "Flash Style"
+            }),
+            /*#__PURE__*/ jsx(Dropdown, {
+                className: `${classBase}-flashStyle`,
+                onSelectionChange: handleSelectionChange,
+                selected: flashStyle ? [
+                    flashStyle
+                ] : [],
+                value: flashStyle?.label,
+                children: flashOptions.map((flashOption, i)=>/*#__PURE__*/ jsx(Option, {
+                        value: flashOption,
+                        children: flashOption.label
+                    }, i))
+            })
+        ]
+    });
+};
+registerConfigurationEditor("BackgroundCellConfigurationEditor", BackgroundCellConfigurationEditor_BackgroundCellConfigurationEditor);
+export { BackgroundCellConfigurationEditor_BackgroundCellConfigurationEditor as BackgroundCellConfigurationEditor };