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

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

@@ -0,0 +1,187 @@
+const css = `
+@keyframes vuubgup1 {
+  0% {
+    background-color: var(--salt-sentiment-positive-foreground-informative);
+    color: #fff;
+  }
+
+  40% {
+    color: #fff;
+  }
+
+  60% {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  100% {
+    color: var(--salt-content-primary-foreground);
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgup2 {
+  0% {
+    background-color: var(--salt-sentiment-positive-foreground-informative);
+    color: #fff;
+  }
+
+  30% {
+    color: #fff;
+  }
+
+  33% {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  100% {
+    color: var(--salt-content-primary-foreground);
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgdown1 {
+  0% {
+    background-color: var(--salt-sentiment-negative-foreground-informative);
+    color: #fff;
+  }
+
+  30% {
+    color: #fff;
+  }
+
+  33% {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  100% {
+    color: var(--salt-content-primary-foreground);
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgdown2 {
+  0% {
+    background-color: var(--salt-sentiment-negative-foreground-informative);
+    color: #fff;
+  }
+
+  30% {
+    color: #fff;
+  }
+
+  33% {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  100% {
+    color: var(--salt-content-primary-foreground);
+    background-color: #0000;
+  }
+}
+
+@keyframes vuuarrowup1 {
+  from {
+    color: var(--salt-sentiment-positive-foreground-informative);
+  }
+
+  to {
+    color: #0000;
+  }
+}
+
+@keyframes vuuarrowup2 {
+  from {
+    color: var(--salt-sentiment-positive-foreground-informative);
+  }
+
+  to {
+    color: #0000;
+  }
+}
+
+@keyframes vuuarrowdown1 {
+  from {
+    color: var(--salt-sentiment-negative-foreground-informative);
+  }
+
+  to {
+    color: #0000;
+  }
+}
+
+@keyframes vuuarrowdown2 {
+  from {
+    color: var(--salt-sentiment-negative-foreground-informative);
+  }
+
+  to {
+    color: #0000;
+  }
+}
+
+@keyframes vuubgarrowup1 {
+  0% {
+    color: var(--salt-sentiment-positive-foreground-informative);
+    background-color: var(--salt-sentiment-positive-foreground-informative);
+  }
+
+  20% {
+    color: var(--salt-sentiment-positive-foreground-informative);
+    background-color: #0000;
+  }
+
+  100% {
+    color: #0000;
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgarrowup2 {
+  0% {
+    color: var(--salt-sentiment-positive-foreground-informative);
+    background-color: var(--salt-sentiment-positive-foreground-informative);
+  }
+
+  100% {
+    color: #0000;
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgarrowdown1 {
+  0% {
+    color: var(--salt-sentiment-negative-foreground-informative);
+    background-color: var(--salt-sentiment-negative-foreground-informative);
+  }
+
+  20% {
+    color: var(--salt-sentiment-negative-foreground-informative);
+    background-color: #0000;
+  }
+
+  100% {
+    color: #0000;
+    background-color: #0000;
+  }
+}
+
+@keyframes vuubgarrowdown2 {
+  0% {
+    color: var(--salt-sentiment-negative-foreground-informative);
+    background-color: var(--salt-sentiment-negative-foreground-informative);
+  }
+
+  20% {
+    color: var(--salt-sentiment-negative-foreground-informative);
+    background-color: #0000;
+  }
+
+  100% {
+    color: #0000;
+    background-color: #0000;
+  }
+}
+
+
+`;
+export default css;

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

@@ -0,0 +1,2 @@
+export * from "./BackgroundCell.js";
+export * from "./BackgroundCellConfigurationEditor.js";

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

@@ -0,0 +1,25 @@
+import { getMovingValueDirection, isTypeDescriptor, isValidNumber } from "@vuu-ui/vuu-utils";
+import { useEffect, useRef } from "react";
+const INITIAL_VALUE = [
+    void 0,
+    void 0,
+    void 0,
+    void 0
+];
+function useDirection(key, value, column) {
+    const ref = useRef(void 0);
+    const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+    const { type: dataType } = column;
+    const decimals = isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
+    const direction = key === prevKey && isValidNumber(value) && isValidNumber(prevValue) && column === prevColumn ? getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
+    useEffect(()=>{
+        ref.current = [
+            key,
+            value,
+            column,
+            direction
+        ];
+    });
+    return direction;
+}
+export { useDirection };

package/src/cell-renderers/button-cell/IconButtonCell.css.js

@@ -0,0 +1,23 @@
+const css = `
+.vuuTableCell:has(.vuuIconButtonCell) {
+  padding: 0;
+  position: relative;
+}
+
+.vuuIconButtonCell {
+  --saltButton-height: 100%;
+  --saltButton-minWidth: 100%;
+  --saltButton-padding: 0;
+  --saltButton-width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0;
+  font-weight: 500;
+  display: inline-flex;
+  position: relative;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/button-cell/IconButtonCell.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import IconButtonCell from "./IconButtonCell.css";
+import { useRowAction } from "../../table-provider/TableProvider.js";
+import { Button } from "@salt-ds/core";
+const classBase = "vuuIconButtonCell";
+const IconButtonCell_IconButtonCell = ({ column, dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-iconbutton-cell",
+        css: IconButtonCell,
+        window: targetWindow
+    });
+    const actionHandler = useRowAction(column.name);
+    const handleClick = useCallback((evt)=>{
+        evt.stopPropagation();
+        actionHandler(column.name, dataRow);
+    }, [
+        actionHandler,
+        column,
+        dataRow
+    ]);
+    return /*#__PURE__*/ jsx(Button, {
+        appearance: "transparent",
+        className: classBase,
+        "data-embedded": true,
+        "data-icon": true,
+        onClick: handleClick
+    });
+};
+export { IconButtonCell_IconButtonCell as IconButtonCell };

package/src/cell-renderers/dropdown-cell/DropdownCell.css.js

@@ -0,0 +1,36 @@
+const css = `
+.vuuTableCell {
+  & .vuuTableDropdownCell {
+    --vuu-icon-height: 15px;
+    --vuu-icon-left: calc(100% - var(--salt-spacing-300));
+    --vuu-icon-size: 8px;
+    --vuu-icon-top: -3px;
+    --salt-focused-outlineStyle: none;
+    --saltButton-borderRadius: 2px;
+    border: solid 1px var(--salt-editable-borderColor);
+    height: var(--vuu-table-embedded-control-height);
+    min-height: var(--vuu-table-embedded-control-height);
+    text-align: left;
+    border-radius: 2px;
+    font-weight: 500;
+    position: relative;
+
+    & button:focus-visible {
+      --saltButton-borderColor: var(--salt-focused-outlineColor);
+      --saltButton-borderWidth: 2px;
+      padding-left: 7px;
+    }
+
+    &.saltDropdown:focus {
+      outline: none;
+    }
+  }
+
+  & .vuuTableDropdownCell:focus {
+    border: solid 2px var(--salt-focused-outlineColor);
+  }
+}
+
+
+`;
+export default css;

package/src/cell-renderers/dropdown-cell/DropdownCell.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useLookupValues } from "@vuu-ui/vuu-data-react";
+import { dataColumnAndKeyUnchanged, dispatchCustomEvent, getSelectedOption, isRpcSuccess, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { Dropdown, Option } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import DropdownCell_0 from "./DropdownCell.css";
+const classBase = "vuuTableDropdownCell";
+const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow, editedDuringCurrentSession, onEdit }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-dropdown-cell",
+        css: DropdownCell_0,
+        window: targetWindow
+    });
+    if (editedDuringCurrentSession) console.log(`${column.name} edited ${editedDuringCurrentSession}`);
+    const [open, setOpen] = useState(false);
+    const dataValue = dataRow[column.name];
+    const { values } = useLookupValues(column, dataValue);
+    const valueRef = useRef(void 0);
+    useMemo(()=>{
+        valueRef.current = getSelectedOption(values, dataValue);
+    }, [
+        dataValue,
+        values
+    ]);
+    const handleOpenChange = useCallback((isOpen)=>{
+        console.log(`handleOpenChange ${isOpen}`);
+        if (false === isOpen) setOpen(false);
+    }, []);
+    const handleSelectionChange = useCallback(async (evt, [selectedOption])=>{
+        if (selectedOption) {
+            const response = await onEdit?.({
+                editType: "commit",
+                isValid: true,
+                previousValue: valueRef.current?.value,
+                value: selectedOption.value
+            }, "commit");
+            if (isRpcSuccess(response)) dispatchCustomEvent(evt.target, "vuu-commit");
+        }
+    }, [
+        onEdit
+    ]);
+    const handleClick = useCallback(()=>{
+        if (!open) setOpen(true);
+    }, [
+        open
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ("Enter" === e.key && !open) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+        }
+    }, [
+        open
+    ]);
+    const { current: selectedOption } = valueRef;
+    return /*#__PURE__*/ jsx(Dropdown, {
+        className: clsx(classBase, {
+            [`${classBase}-edited`]: true === editedDuringCurrentSession
+        }),
+        "data-icon": "triangle-down",
+        onClick: handleClick,
+        onKeyDownCapture: handleKeyDown,
+        onOpenChange: handleOpenChange,
+        onSelectionChange: handleSelectionChange,
+        open: open,
+        selected: selectedOption ? [
+            selectedOption
+        ] : [],
+        value: selectedOption?.label,
+        children: values.map((listOption, i)=>/*#__PURE__*/ jsx(Option, {
+                value: listOption,
+                children: listOption.label
+            }, i))
+    });
+}, (p, p1)=>p.editedDuringCurrentSession !== p1.editedDuringCurrentSession && dataColumnAndKeyUnchanged(p, p1));
+registerComponent("dropdown-cell", DropdownCell_DropdownCell, "cell-renderer", {
+    userCanAssign: false
+});
+export { DropdownCell_DropdownCell as DropdownCell };

package/src/cell-renderers/dropdown-cell/index.js

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

package/src/cell-renderers/index.js

@@ -0,0 +1,6 @@
+export * from "./background-cell/index.js";
+export * from "./dropdown-cell/index.js";
+export * from "./lookup-cell/index.js";
+export * from "./pct-progress-cell/index.js";
+export * from "./progress-cell/index.js";
+export { IconButtonCell } from "./button-cell/IconButtonCell.js";

package/src/cell-renderers/lookup-cell/LookupCell.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { useLookupValues } from "@vuu-ui/vuu-data-react";
+import { dataAndColumnUnchanged, registerComponent } from "@vuu-ui/vuu-utils";
+import { memo } from "react";
+const LookupCell_LookupCell = /*#__PURE__*/ memo(function({ column, dataRow }) {
+    const dataValue = dataRow[column.name];
+    const { initialValue: value } = useLookupValues(column, dataValue);
+    return /*#__PURE__*/ jsx("span", {
+        children: value?.label
+    });
+}, dataAndColumnUnchanged);
+registerComponent("lookup-cell", LookupCell_LookupCell, "cell-renderer", {
+    userCanAssign: false
+});
+export { LookupCell_LookupCell as LookupCell };

package/src/cell-renderers/lookup-cell/index.js

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

package/src/cell-renderers/pct-progress-cell/PctProgressCell.css.js

@@ -0,0 +1,31 @@
+const css = `
+.vuuPctProgressCell {
+  --progress-bar-width: 2px;
+  position: relative;
+}
+
+.vuuPctProgressCell-zero, .vuuPctProgressCell-complete {
+  --progress-bar-width: 0px;
+}
+
+.vuuPctProgressCell-progressBar {
+  background-color: var(--vuu-color-green-60-fade-30);
+  border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);
+  height: 20px;
+  width: var(--progress-bar-pct, 0);
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+}
+
+.vuuPctProgressCell-text {
+  text-align: left;
+  z-index: 1;
+  width: 80%;
+  display: inline-block;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/pct-progress-cell/PctProgressCell.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import PctProgressCell from "./PctProgressCell.css";
+const classBase = "vuuPctProgressCell";
+const getPercentageValue = (value)=>{
+    if (value >= 0 && value <= 1) return 100 * value;
+    if (value > 2) return 0;
+    if (value > 1) return 100;
+    return 0;
+};
+const PctProgressCell_PctProgressCell = ({ column, dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-pct-progress-cell",
+        css: PctProgressCell,
+        window: targetWindow
+    });
+    const value = dataRow[column.name];
+    const percentageValue = getPercentageValue(value);
+    const className = clsx(classBase, {});
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(className, {
+            [`${classBase}-zero`]: 0 === percentageValue,
+            [`${classBase}-complete`]: percentageValue >= 100
+        }),
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-progressBar`,
+                style: {
+                    "--progress-bar-pct": `${percentageValue}%`
+                }
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: `${percentageValue.toFixed(2)} %`
+            })
+        ]
+    });
+};
+registerComponent("vuu.pct-progress", PctProgressCell_PctProgressCell, "cell-renderer", {
+    description: "Percentage formatter",
+    label: "Percentage formatter",
+    serverDataType: "double"
+});
+export { PctProgressCell_PctProgressCell as PctProgressCell };

package/src/cell-renderers/pct-progress-cell/index.js

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

package/src/cell-renderers/progress-cell/ProgressCell.css.js

@@ -0,0 +1,43 @@
+const css = `
+.vuuProgressCell {
+  align-items: center;
+  display: flex;
+}
+
+.vuuProgressCell-track {
+  flex: auto;
+  height: 4px;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.vuuProgressCell-bg {
+  background-color: var(--salt-measured-background);
+  width: 100%;
+  height: 2px;
+  display: inline-block;
+  position: absolute;
+  top: 1px;
+  left: 0;
+}
+
+.vuuProgressCell-bar {
+  background-color: var(--salt-measured-fill);
+  height: 100%;
+  transform: translateX(var(--progress-bar-pct, -100%));
+  width: 100%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.vuuProgressCell-text {
+  text-align: right;
+  flex: 0 0 35px;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/progress-cell/ProgressCell.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isColumnTypeRenderer, isTypeDescriptor, isValidNumber, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import ProgressCell from "./ProgressCell.css";
+const classBase = "vuuProgressCell";
+const ProgressCell_ProgressCell = ({ column, dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-progress-cell",
+        css: ProgressCell,
+        window: targetWindow
+    });
+    const { name, type } = column;
+    const value = dataRow[name];
+    let showProgress = false;
+    let percentage = 0;
+    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
+        const { associatedField } = type.renderer;
+        if (associatedField) {
+            const associatedValue = dataRow[associatedField];
+            if (isValidNumber(value) && isValidNumber(associatedValue)) {
+                percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+                percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+                showProgress = isFinite(percentage);
+            } else {
+                const floatValue = parseFloat(value);
+                if (Number.isFinite(floatValue)) {
+                    const floatOtherValue = parseFloat(associatedValue);
+                    if (Number.isFinite(floatOtherValue)) {
+                        percentage = Math.min(Math.round(floatValue / floatOtherValue * 100), 100);
+                        showProgress = isFinite(percentage);
+                    }
+                }
+            }
+        } else throw Error("ProgressCell associatedField is required to render");
+    }
+    const className = clsx(classBase, {});
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        tabIndex: -1,
+        children: [
+            showProgress ? /*#__PURE__*/ jsxs("span", {
+                className: `${classBase}-track`,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-bg`
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-bar`,
+                        style: {
+                            "--progress-bar-pct": `-${100 - percentage}%`
+                        }
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: `${percentage} %`
+            })
+        ]
+    });
+};
+registerComponent("vuu.progress", ProgressCell_ProgressCell, "cell-renderer", {
+    description: "Progress formatter",
+    label: "Progress formatter",
+    serverDataType: [
+        "long",
+        "int",
+        "double"
+    ],
+    userCanAssign: false
+});

package/src/cell-renderers/progress-cell/index.js

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