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

package/src/column-expression-input/ColumnExpressionInput.css.js

@@ -0,0 +1,94 @@
+const css = `
+.vuuColumnExpressionInput {
+  --vuuFilterEditor-background: var(--salt-container-primary-background);
+  --vuuFilterEditor-color: var(--salt-content-primary-foreground);
+  --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+  --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+  --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
+  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+  --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
+  --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10);
+  --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+  --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
+  --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);
+  --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);
+  --vuuFilterEditor-suggestion-height: 24px;
+  --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);
+  box-sizing: border-box;
+  align-items: center;
+  height: 30px;
+}
+
+.vuuColumnExpressionInput-FilterButton, .vuuColumnExpressionInput-ClearButton {
+  --vuu-icon-size: 12px;
+  --saltButton-width: 28px;
+}
+
+.expression-type-container {
+  color: var(--salt-content-secondary-foreground);
+  margin: 0 3px 0 auto;
+}
+
+.expression-kind {
+  width: 50px;
+  display: inline-block;
+}
+
+.expression-type {
+  text-align: right;
+  width: 50px;
+  display: inline-block;
+}
+
+.vuuSuggestion {
+  align-items: center;
+  display: flex;
+}
+
+.vuuFunctionDoc {
+  padding: 13px 7px;
+}
+
+.vuuFunctionDoc .function-heading {
+  gap: 3px;
+  display: flex;
+}
+
+.vuuFunctionDoc .function-name {
+  text-transform: capitalize;
+  font-weight: 700;
+}
+
+.vuuFunctionDoc .param-list {
+  color: var(--vuu-color-gray-50);
+  white-space: pre;
+}
+
+.vuuFunctionDoc .function-type {
+  color: var(--vuu-color-gray-50);
+  text-transform: capitalize;
+  margin-left: auto;
+  font-weight: 700;
+}
+
+.vuuFunctionDoc .example-container {
+  background-color: var(--vuu-color-gray-03);
+  margin: 6px 0;
+  padding: 3px;
+}
+
+.vuuFunctionDoc .example-expression {
+  color: var(--vuu-color-gray-80);
+  font-family: var(--salt-typography-fontFamily-code);
+  padding: 8px;
+  font-weight: 500;
+}
+
+.vuuFunctionDoc .example-result {
+  margin-top: 6px;
+  margin-left: 8px;
+}
+
+
+`;
+export default css;

package/src/column-expression-input/ColumnExpressionInput.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useColumnExpressionEditor } from "./useColumnExpressionEditor.js";
+import ColumnExpressionInput from "./ColumnExpressionInput.css";
+const classBase = "vuuColumnExpressionInput";
+const ColumnExpressionInput_ColumnExpressionInput = /*#__PURE__*/ memo(({ onChange, onSubmitExpression, source = "", suggestionProvider })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-expression-input",
+        css: ColumnExpressionInput,
+        window: targetWindow
+    });
+    const { editorRef, onBlur } = useColumnExpressionEditor({
+        onChange,
+        onSubmitExpression,
+        source,
+        suggestionProvider
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: `${classBase}`,
+        onBlur: onBlur,
+        ref: editorRef
+    });
+}, (prevProps, newProps)=>prevProps.source === newProps.source);
+ColumnExpressionInput_ColumnExpressionInput.displayName = "ColumnExpressionInput";
+export { ColumnExpressionInput_ColumnExpressionInput as ColumnExpressionInput };

package/src/column-expression-input/column-function-descriptors.js

@@ -0,0 +1,281 @@
+const columnFunctionDescriptors = [
+    {
+        accepts: [
+            "boolean"
+        ],
+        description: "Applies boolean and operator across supplied parameters to returns a single boolean result",
+        example: {
+            expression: 'and(ccy="EUR",quantity=0)',
+            result: "true | false"
+        },
+        name: "and",
+        params: {
+            description: "( boolean, [ boolean* ] )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "string",
+        description: "Returns multiple string values as a single joined string. Arguments may be string literal values, string columns or other string expressions. Non string arguments may also be included, these will be converted to strings.",
+        example: {
+            expression: 'concatenate("example", "-test")',
+            result: '"example-test"'
+        },
+        name: "concatenate",
+        params: {
+            description: "( string, string, [ string* ] )"
+        },
+        type: "string"
+    },
+    {
+        accepts: [
+            "string",
+            "string"
+        ],
+        description: "Tests a string value to determine whether it contains a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> contains one or more occurrences of <target subscring>",
+        example: {
+            expression: 'contains("Royal Bank of Scotland", "bank")',
+            result: "true"
+        },
+        name: "contains",
+        params: {
+            description: "( string )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: [
+            "string",
+            "number"
+        ],
+        description: "Returns the leftmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+        example: {
+            expression: 'left("USD Benchmark Report", 3)',
+            result: '"USD"'
+        },
+        name: "left",
+        params: {
+            count: 2,
+            description: "( string, number )"
+        },
+        type: "string"
+    },
+    {
+        accepts: "string",
+        description: "Returns the number of characters in <string>. Argument may be a string literal, string column or other string expression.",
+        example: {
+            expression: 'len("example")',
+            result: "7"
+        },
+        name: "len",
+        params: {
+            description: "(string)"
+        },
+        type: "number"
+    },
+    {
+        accepts: "string",
+        description: "Convert a string value to lowercase. Argument may be a string column or other string expression.",
+        example: {
+            expression: 'lower("examPLE")',
+            result: '"example"'
+        },
+        name: "lower",
+        params: {
+            description: "( string )"
+        },
+        type: "string"
+    },
+    {
+        accepts: [
+            "boolean"
+        ],
+        description: "Applies boolean or operator across supplied parameters to returns a single boolean result",
+        example: {
+            expression: 'or(status="cancelled",quantity=0)',
+            result: "true | false"
+        },
+        name: "or",
+        params: {
+            description: "( boolean, [ boolean* ] )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "string",
+        description: "Convert a string value to uppercase. Argument may be a string column or other string expression.",
+        example: {
+            expression: 'upper("example")',
+            result: '"EXAMPLE"'
+        },
+        name: "upper",
+        params: {
+            description: "( string )"
+        },
+        type: "string"
+    },
+    {
+        accepts: [
+            "string",
+            "number"
+        ],
+        description: "Returns the rightmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "right",
+        params: {
+            description: "( string )"
+        },
+        type: "string"
+    },
+    {
+        accepts: [
+            "string",
+            "string",
+            "string"
+        ],
+        description: "Replace characters within a string. Accepts three arguments: source text, text to replace and replacement text. Returns a copy of <source text> with any occurrences of <text to replace> replaced by <replacement text>",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "replace",
+        params: {
+            description: "( string )"
+        },
+        type: "string"
+    },
+    {
+        accepts: "number",
+        description: "Converts a number to a string.",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "text",
+        params: {
+            description: "( string )"
+        },
+        type: "string"
+    },
+    {
+        accepts: "string",
+        description: "Tests a string value to determine whether it starts with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> starts with <target subscring>.",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "starts",
+        params: {
+            description: "( string )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "string",
+        description: "Tests a string value to determine whether it ends with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> ends with <target subscring>.",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "ends",
+        params: {
+            description: "( string )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "number",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "min",
+        params: {
+            description: "( string )"
+        },
+        type: "number"
+    },
+    {
+        accepts: "number",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "max",
+        params: {
+            description: "( string )"
+        },
+        type: "number"
+    },
+    {
+        accepts: "number",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "sum",
+        params: {
+            description: "( string )"
+        },
+        type: "number"
+    },
+    {
+        accepts: "number",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "round",
+        params: {
+            description: "( string )"
+        },
+        type: "number"
+    },
+    {
+        accepts: "any",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "or",
+        params: {
+            description: "( string )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "any",
+        description: "blah",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "and",
+        params: {
+            description: "( string )"
+        },
+        type: "boolean"
+    },
+    {
+        accepts: "any",
+        description: "Return one of two possible result values, depending on the evaluation of a filter expression. If <filterExpression> resolves to true, result is <expression1>, otherwise <expression2>. ",
+        example: {
+            expression: "blah",
+            result: "blah"
+        },
+        name: "if",
+        params: {
+            description: "( filterExpression, expression1, expression 2)"
+        },
+        type: "variable"
+    }
+];
+export { columnFunctionDescriptors };

package/src/column-expression-input/column-language-parser/ColumnExpressionLanguage.js

@@ -0,0 +1,18 @@
+import { LRLanguage, LanguageSupport, styleTags, tags } from "@vuu-ui/vuu-codemirror";
+import { parser } from "./generated/column-parser.js";
+const columnExpressionLanguage = LRLanguage.define({
+    name: "VuuColumnExpression",
+    parser: parser.configure({
+        props: [
+            styleTags({
+                Column: tags.attributeValue,
+                Function: tags.variableName,
+                String: tags.string,
+                Or: tags.emphasis,
+                Operator: tags.operator
+            })
+        ]
+    })
+});
+const columnExpressionLanguageSupport = ()=>new LanguageSupport(columnExpressionLanguage);
+export { columnExpressionLanguageSupport };