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

package/src/calculated-column/useEditCalculatedColumn.js

@@ -1,104 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

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

@@ -1,103 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

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

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

@@ -1,71 +0,0 @@
-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 };

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

@@ -1,187 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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 };