@vuu-ui/vuu-table-extras 4.0.0-alpha.2 → 4.0.0-alpha.20

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -12,19 +12,20 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.ts ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.2"
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-data-editing": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.2",
+    "@vuu-ui/core": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-codemirror": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-data-editing": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.20",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.67.0",
     "@salt-ds/lab": "1.0.0-alpha.99",
@@ -45,8 +46,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "module": "./src/index.js",

package/src/calculated-column/CalculatedColumnPanel.js

@@ -1,9 +1,9 @@
 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 { useCallback, useRef } from "react";
 import { ColumnExpressionInput, useColumnExpressionSuggestionProvider } from "../column-expression-input/index.js";
+import { useCalculatedColumnPanel } from "./useCalculatedColumnPanel.js";
 const classBase = "vuuCalculatedColumnPanel";
 const CalculatedColumnPanel = ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable })=>{
     const typeRef = useRef(null);

package/src/calculated-column/useEditCalculatedColumn.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useModal } from "@vuu-ui/vuu-ui-controls";
+import { useModal } from "@vuu-ui/core";
 import { useCallback, useRef } from "react";
 import { CalculatedColumnPanel } from "./CalculatedColumnPanel.js";
 const useEditCalculatedColumn = ({ calculatedColumn, columnModel, onSaveColumn, vuuTable })=>{

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

@@ -1,6 +1,6 @@
 import { AnnotationType, getRelationalOperators, numericOperators, stringOperators, toSuggestions } from "@vuu-ui/vuu-codemirror";
 import { getTypeaheadParams, useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
-import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+import { isNumericColumn, isTemporalColumn, isTextColumn } from "@vuu-ui/vuu-utils";
 import { useCallback, useRef } from "react";
 import { columnFunctionDescriptors } from "./column-function-descriptors.js";
 import { functionDocInfo } from "./functionDocInfo.js";
@@ -64,7 +64,7 @@ const arithmeticOperators = [
     }
 ];
 const getOperators = (column)=>{
-    if (void 0 === column || isNumericColumn(column)) return arithmeticOperators;
+    if (void 0 === column || isNumericColumn(column) || isTemporalColumn(column)) return arithmeticOperators;
     return NO_OPERATORS;
 };
 const getConditionOperators = (column)=>{

package/src/column-formatting-settings/ColumnFormattingPanel.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTemporalColumn, isTypeDescriptor } from "@vuu-ui/vuu-utils";
 import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
 import clsx from "clsx";
 import { useCallback, useMemo } from "react";
@@ -88,21 +88,24 @@ const ColumnFormattingPanel = ({ availableRenderers, className, column, onChange
 function getFormattingSettingsComponent(props) {
     const { column } = props;
     switch(column.serverDataType){
+        case "long":
+            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
+                ...props
+            });
+        case "epochtimestamp":
+        case "epochtimestampnano":
+            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+                ...props
+            });
         case "double":
         case "scaleddecimal2":
         case "scaleddecimal4":
         case "scaleddecimal6":
         case "scaleddecimal8":
         case "int":
-            return /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+            return isTemporalColumn(column) ? /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
                 ...props
-            });
-        case "long":
-            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
-                ...props
-            });
-        case "epochtimestamp":
-            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+            }) : /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
                 ...props
             });
         default:

package/src/column-formatting-settings/DateTimeFormattingSettings.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { dateTimeLabelByType, defaultPatternsByType, fallbackDateTimePattern, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
+import { dateTimeLabelByType, dateTimePattern, defaultPatternsByType, fallbackDateTimePattern, getTemporalInfo, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
 import { Dropdown, FormField, FormFieldLabel, Option, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
 import { useCallback, useMemo, useState } from "react";
 const toggleValues = [
@@ -7,6 +7,32 @@ const toggleValues = [
     "time",
     "both"
 ];
+const DEFAULT = "default";
+const fractionalSecondDigitOptions = [
+    DEFAULT,
+    "0",
+    "3",
+    "6",
+    "9"
+];
+const timeZoneOptions = [
+    DEFAULT,
+    "local",
+    "UTC",
+    "Europe/London",
+    "Europe/Paris",
+    "America/New_York",
+    "Asia/Tokyo",
+    "Asia/Hong_Kong"
+];
+const localeOptions = [
+    DEFAULT,
+    "en-GB",
+    "en-US",
+    "de-DE",
+    "fr-FR",
+    "ja-JP"
+];
 function getToggleValue(pattern) {
     return pattern.time ? pattern.date ? "both" : "time" : "date";
 }
@@ -20,7 +46,8 @@ const getSelectedPattern = (pattern)=>{
 };
 const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
     const formatting = getTypeFormattingFromColumn(column);
-    const { pattern = fallbackDateTimePattern } = formatting;
+    const temporalInfo = getTemporalInfo(column);
+    const { pattern = temporalInfo ? dateTimePattern(column.type, temporalInfo.kind) : fallbackDateTimePattern } = formatting;
     const toggleValue = useMemo(()=>getToggleValue(pattern), [
         pattern
     ]);
@@ -28,6 +55,26 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
         time: pattern.time ?? defaultPatternsByType.time,
         date: pattern.date ?? defaultPatternsByType.date
     });
+    const onFractionalSecondDigitsChange = useCallback((_, [value])=>{
+        const { fractionalSecondDigits, ...rest } = formatting;
+        onChange(value === DEFAULT ? rest : {
+            ...rest,
+            fractionalSecondDigits: parseInt(value, 10)
+        });
+    }, [
+        formatting,
+        onChange
+    ]);
+    const onFormattingOptionChange = useCallback((key)=>(_, [value])=>{
+            const { [key]: _previous, ...rest } = formatting;
+            onChange(value === DEFAULT ? rest : {
+                ...rest,
+                [key]: value
+            });
+        }, [
+        formatting,
+        onChange
+    ]);
     const onPatternChange = useCallback((pattern)=>onChange({
             ...formatting,
             pattern
@@ -109,7 +156,64 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
                                 }, i))
                         })
                     ]
-                }, v))
+                }, v)),
+            pattern.time ? /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Fractional second digits"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFractionalSecondDigitsChange,
+                        selected: [
+                            `${formatting.fractionalSecondDigits ?? DEFAULT}`
+                        ],
+                        value: `${formatting.fractionalSecondDigits ?? DEFAULT}`,
+                        children: fractionalSecondDigitOptions.filter((digits)=>temporalInfo?.precision === "ns" || "6" !== digits && "9" !== digits).map((digits)=>/*#__PURE__*/ jsx(Option, {
+                                value: digits,
+                                children: digits
+                            }, digits))
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Time zone"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFormattingOptionChange("timeZone"),
+                        selected: [
+                            formatting.timeZone ?? DEFAULT
+                        ],
+                        value: formatting.timeZone ?? DEFAULT,
+                        children: timeZoneOptions.map((timeZone)=>/*#__PURE__*/ jsx(Option, {
+                                value: timeZone,
+                                children: timeZone
+                            }, timeZone))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Locale"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFormattingOptionChange("locale"),
+                        selected: [
+                            formatting.locale ?? DEFAULT
+                        ],
+                        value: formatting.locale ?? DEFAULT,
+                        children: localeOptions.map((locale)=>/*#__PURE__*/ jsx(Option, {
+                                value: locale,
+                                children: locale
+                            }, locale))
+                    })
+                ]
+            })
         ]
     });
 };

package/src/column-formatting-settings/LongTypeFormattingSettings.js

@@ -5,7 +5,8 @@ import { useWindow } from "@salt-ds/window";
 import { useCallback } from "react";
 import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
 import LongTypeFormattingSettings from "./LongTypeFormattingSettings.css";
-import { isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { isTemporalColumn, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings.js";
 const classBase = "vuuLongColumnFormattingSettings";
 const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
     const targetWindow = useWindow();
@@ -41,7 +42,9 @@ const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+            isTemporalColumn(column) ? /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+                ...props
+            }) : /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
                 ...props
             })
         ]
@@ -49,6 +52,8 @@ const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
 };
 const toggleValues = [
     "number",
-    "date/time"
+    "date/time",
+    "date",
+    "time"
 ];
 export { LongTypeFormattingSettings_LongTypeFormattingSettings as LongTypeFormattingSettings };

package/src/column-picker/ColumnModel.js

@@ -1,4 +1,4 @@
-import { EventEmitter, reorderItems } from "@vuu-ui/vuu-utils";
+import { EventEmitter, getAddedItems, getRemovedItems, itemsOrOrderChanged, reorderItems } from "@vuu-ui/vuu-utils";
 const ColumnChangeSource = {
     ColumnPicker: "column-picker",
     ColumnSettings: "column-settings",
@@ -15,37 +15,16 @@ const isColumnAdded = (change)=>change?.type === SelectedColumnChangeType.Column
 const isColumnRemoved = (change)=>change?.type === SelectedColumnChangeType.ColumnRemoved;
 const isColumnUpdated = (change)=>change?.type === SelectedColumnChangeType.ColumnUpdated;
 const isColumnsReordered = (change)=>change?.type === SelectedColumnChangeType.ColumnsReordered;
-const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 })=>l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
-const filterColumns = (columns, pattern)=>{
-    if (!pattern) return columns;
-    {
-        const lowerCasePattern = pattern.toLowerCase();
-        return columns.filter(({ name, label = name })=>-1 !== label.toLowerCase().indexOf(lowerCasePattern));
-    }
-};
+const columnDescriptorComparator = (col1, col2)=>col1.name === col2.name;
 class ColumnModel extends EventEmitter {
     allColumns;
-    #searchPattern = "";
     #selectedColumns;
     constructor(allColumns, selectedColumns){
         super(), this.allColumns = allColumns;
         this.#selectedColumns = selectedColumns;
     }
-    get availableColumns() {
-        return filterColumns(this.allColumns, this.#searchPattern).filter(({ name })=>-1 === this.#selectedColumns.findIndex((c)=>c.name === name)).toSorted(byColumnName);
-    }
-    set searchPattern(pattern) {
-        const searchPattern = pattern;
-        if (searchPattern !== this.#searchPattern) {
-            this.#searchPattern = searchPattern;
-            this.emit("render", {});
-        }
-    }
-    get searchPattern() {
-        return this.#searchPattern ?? "";
-    }
     get selectedColumns() {
-        return filterColumns(this.#selectedColumns, this.#searchPattern);
+        return this.#selectedColumns;
     }
     setSelectedColumns(selectedColumns, source, changeDescriptor) {
         this.#selectedColumns = selectedColumns;
@@ -56,6 +35,16 @@ class ColumnModel extends EventEmitter {
         if (col) return col;
         throw Error(`[ColumnModel] columns does not contain column ${name}`);
     }
+    addRemoveOrReorderSelectedColumns(newSelectedColumns, source) {
+        if (!itemsOrOrderChanged(this.#selectedColumns, newSelectedColumns)) throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns no change detected between current and new selected columns");
+        const addedColumns = getAddedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
+        if (addedColumns.length > 0) if (1 == addedColumns.length) return void this.addItemToSelectedColumns(addedColumns[0].name, source);
+        else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to add multiple selected columns in a single call");
+        const removedColumns = getRemovedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
+        if (removedColumns.length > 0) if (1 == removedColumns.length) return void this.removeItemFromSelectedColumns(removedColumns[0].name, source);
+        else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to remove multiple selected columns in a single call");
+        this.reorderSelectedColumns(newSelectedColumns.map(({ name })=>name), source);
+    }
     addItemToSelectedColumns(name, source) {
         const column = this.allColumns.find((col)=>col.name === name);
         if (column) {
@@ -97,7 +86,7 @@ class ColumnModel extends EventEmitter {
     }
     addColumn(column, addToSelectedColumns = false) {
         console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);
-        if (addToSelectedColumns) console.log("add it to selected coliumns");
+        if (addToSelectedColumns) console.log("add it to selected columns");
         this.allColumns = this.allColumns.concat(column);
         this.#selectedColumns = this.#selectedColumns.concat(column);
         this.notifyListeners(this.#selectedColumns, "column-picker", {

package/src/column-picker/ColumnPicker.css.js

@@ -1,94 +1,8 @@
 const css = `
 .vuuColumnPicker {
-  --label-margin-left: 0px;
-  --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));
-  background: var(--columnpicker-background);
-  gap: var(--salt-spacing-300);
-  height: var(--vuuColumnPicker-height, 100%);
-  padding: var(--salt-spacing-300) 0;
-  flex-direction: column;
-  display: flex;
-  overflow: hidden;
-  container-type: inline-size;
-
   &.vuuColumnPicker-withCalculated {
     --label-margin-left: 8px;
   }
-
-  & .saltListBox {
-    background-color: inherit;
-  }
-
-  & .saltOption {
-    background-color: inherit;
-    border-bottom: var(--vuuColumnListItem-border, solid) 1px
-        var(--salt-separable-tertiary-borderColor);
-    align-items: center;
-    gap: var(--salt-spacing-200);
-    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
-
-    & .vuuIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-    }
-
-    & .vuuCalculatedColumnIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-      position: absolute;
-      top: 8px;
-      left: 32px;
-    }
-
-    & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
-      text-decoration: underline;
-    }
-
-    & .vuuColumnPicker-text {
-      margin-left: var(--label-margin-left);
-    }
-  }
-
-  & .vuuColumnPickerListItem-action {
-    visibility: hidden;
-    margin-left: auto;
-  }
-
-  & .saltOption:hover {
-    & .vuuColumnPickerListItem-action {
-      visibility: visible;
-    }
-  }
-
-  & .vuuColumnPicker-search {
-    --saltInput-paddingLeft: var(--salt-spacing-300);
-    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);
-  }
-
-  & .vuuColumnPicker-scrollContainer {
-    flex: 1 1 0;
-    overflow: auto;
-
-    & .vuuColumnPicker-sectionHeader {
-      background: var(--columnpicker-background);
-      height: 32px;
-      padding: 0 var(--salt-spacing-300);
-      z-index: 1;
-      align-items: center;
-      display: flex;
-      position: sticky;
-      top: 0;
-    }
-
-    & .vuuColumnPicker-availableHeader {
-      top: 32px;
-    }
-
-    & .vuuColumnPicker-availableList {
-      & .saltOption {
-        padding-left: var(--salt-spacing-300);
-      }
-    }
-  }
 }