@perspective-dev/viewer-datagrid 4.3.0 → 4.4.0

package/src/{less/sub-cell-scroll.less → css/sub-cell-scroll.css}

@@ -1,17 +1,18 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Handles sub-cell scrolling via CSS transform offset by variables set during
-// rendering.
+/* Handles sub-cell scrolling via CSS transform offset by variables set during */
+/* rendering. */
 perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table,
 :host(:not(.sub-cell-scroll-disabled)) regular-table table {
     tbody td,

package/src/{less/toolbar.less → css/toolbar.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     position: relative;
@@ -42,9 +43,9 @@
 
     &:hover {
         box-shadow:
-            -4px 0 0 var(--icon--color),
-            4px 0 0 var(--icon--color);
-        background-color: var(--icon--color);
+            -4px 0 0 var(--psp--color),
+            4px 0 0 var(--psp--color);
+        background-color: var(--psp--color);
     }
 }
 
@@ -54,11 +55,11 @@
 }
 
 #scroll_lock.lock-scroll:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock-active--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock-active--content);
 }
 
 #scroll_lock:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock--content);
 }
 
 #select_mode:before {
@@ -70,69 +71,75 @@
 }
 
 #edit_mode[data-edit-mode="READ_ONLY"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--edit--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-edit--content);
 }
 
 :host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-row--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-column--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-column--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-region--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
 }
 
-// #edit_mode span:before {
-//     content: var(--edit-mode-toggle--content, "N/A");
-// }
+/* #edit_mode span:before { */
+/*     content: var(--edit-mode-toggle--content, "N/A"); */
+/* } */
 
 #edit_mode[data-edit-mode="READ_ONLY"] span:before {
-    content: var(--edit-mode--read-only--content, "Read Only");
+    content: var(--psp-label--edit-mode-read-only--content, "Read Only");
 }
 
 #edit_mode[data-edit-mode="EDIT"] span:before {
-    content: var(--edit-mode--edit--content, "Editable");
+    content: var(--psp-label--edit-mode-edit--content, "Editable");
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"] span:before {
-    content: var(--edit-mode--select-row--content, "Row Select");
+    content: var(--psp-label--edit-mode-select-row--content, "Row Select");
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"] span:before {
-    content: var(--edit-mode--select-column--content, "Column Select");
+    content: var(
+        --psp-label--edit-mode-select-column--content,
+        "Column Select"
+    );
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"] span:before {
-    content: var(--edit-mode--select-region--content, "Region Select");
+    content: var(
+        --psp-label--edit-mode-select-region--content,
+        "Region Select"
+    );
 }
 
 #scroll_lock span:before {
-    content: var(--scroll-lock-toggle--content, "Free Scroll");
+    content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
 }
 
 #scroll_lock.lock-scroll span:before {
-    content: var(--scroll-lock-alt-toggle--content, "Align Scroll");
+    content: var(--psp-label--scroll-lock-alt-toggle--content, "Align Scroll");
 }
 
-// The icon.
+/* The icon. */
 .button:before {
     width: 21px;
     height: 21px;
     content: "";
     -webkit-mask-size: cover;
     mask-size: cover;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
 }
 
 .button.editable:before,
@@ -167,8 +174,8 @@
 .hover-target:focus-within .button,
 .hover-target:hover .button {
     position: relative;
-    background-color: var(--icon--color);
-    color: var(--plugin--background);
+    background-color: var(--psp--color);
+    color: var(--psp--background-color);
     opacity: 1;
     display: flex;
     align-items: center;
@@ -177,10 +184,10 @@
 
 .hover-target:focus-within .button:before,
 .hover-target:hover .button:before {
-    background-color: var(--plugin--background);
+    background-color: var(--psp--background-color);
 }
 
-// The label.
+/* The label. */
 .hover-target:focus-within .button > span,
 .hover-target:hover .button > span {
     display: block;
@@ -194,7 +201,7 @@
     white-space: pre-wrap;
     line-height: 1;
     font-size: 9px;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
     width: 35px;
     text-align: center;
     border-radius: 0 0 3px 3px;

package/src/ts/model/create.ts

@@ -152,15 +152,15 @@ export async function createModel(
         ]);
 
     const _plugin_background = chroma(
-        get_rule(regular, "--plugin--background", "#FFFFFF"),
+        get_rule(regular, "--psp--background-color", "#FFFFFF"),
     ).rgb();
 
     const _pos_fg_color = make_color_record(
-        get_rule(regular, "--rt-pos-cell--color", "#338DCD"),
+        get_rule(regular, "--psp-datagrid--pos-cell--color", "#338DCD"),
     );
 
     const _neg_fg_color = make_color_record(
-        get_rule(regular, "--rt-neg-cell--color", "#FF5942"),
+        get_rule(regular, "--psp-datagrid--neg-cell--color", "#FF5942"),
     );
 
     const _pos_bg_color = make_color_record(
@@ -172,7 +172,7 @@ export async function createModel(
     );
 
     const _color = make_color_record(
-        get_rule(regular, "--active--color", "#ff0000"),
+        get_rule(regular, "--psp-active--color", "#ff0000"),
     );
 
     const _schema: Schema = {

package/src/ts/style_handlers/body.ts

@@ -65,18 +65,20 @@ export function applyBodyCellStyles(
 
         // Calculate aggregate depth visibility
         // @ts-ignore
-        metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
-            x === 0 || x === undefined
-                ? false
-                : x - 1 <
-                  Math.min(
-                      this._config.group_by.length,
-                      plugin?.aggregate_depth || 0,
-                  ))(
-            (metadata.row_header as unknown[] | undefined)?.filter(
-                (x) => x !== undefined,
-            )?.length,
-        );
+        metadata._is_hidden_by_aggregate_depth =
+            this._config.group_rollup_mode === "rollup" &&
+            ((x?: number) =>
+                x === 0 || x === undefined
+                    ? false
+                    : x - 1 <
+                      Math.min(
+                          this._config.group_by.length,
+                          plugin?.aggregate_depth || 0,
+                      ))(
+                (metadata.row_header as unknown[] | undefined)?.filter(
+                    (x) => x !== undefined,
+                )?.length,
+            );
 
         // Apply type-specific cell styling
         if (is_numeric) {
@@ -92,7 +94,7 @@ export function applyBodyCellStyles(
         } else if (type === "string") {
             cell_style_string.call(this, plugin as any, td, metadata as any);
         } else if (type === "date" || type === "datetime") {
-            cell_style_datetime.call(this, plugin as any, td, metadata as any);
+            cell_style_datetime.call(this, plugin as any, td, metadata);
         } else {
             td.style.backgroundColor = "";
             td.style.color = "";

package/src/ts/style_handlers/table_cell/datetime.ts

@@ -17,20 +17,23 @@ import {
 } from "../../color_utils.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
+interface PluginWithColor extends Omit<ColumnConfig, "color"> {
+    color?: ColorRecord;
+}
+
 export function cell_style_datetime(
     this: DatagridModel,
-    plugin: ColumnConfig,
+    plugin: PluginWithColor,
     td: HTMLElement,
     metadata: CellMetadata,
 ): void {
-    const colorRecord: ColorRecord = //(() => {
-        // if (plugin?.color !== undefined) {
-        //     return plugin.color;
-        // } else {
-        // return
-        this._color;
-    // }
-    //  })();
+    const colorRecord: ColorRecord = (() => {
+        if (plugin?.color !== undefined) {
+            return plugin.color;
+        } else {
+            return this._color;
+        }
+    })();
 
     const [hex, r, g, b] = colorRecord;
 

package/src/less/mitered-headers.less

@@ -1,65 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) {
-    // right
-    box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
-}
-
-.psp-header-group {
-    // bottom
-    box-shadow: 0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-}
-
-.psp-is-top {
-    // top-miter-right
-    box-shadow: 5px 4px 0px -4px var(--inactive--border-color, #8b868045);
-}
-
-.psp-is-top.psp-header-group:not(.psp-header-group-corner) {
-    // top-miter-right and bottom
-    box-shadow:
-        5px 4px 0px -4px var(--inactive--border-color, #8b868045),
-        0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-}
-
-.psp-header-border.psp-header-group {
-    &:not(.psp-is-top):not(.psp-header-group-corner) {
-        // right and bottom
-        box-shadow:
-            1px 0px var(--inactive--border-color, #8b868045),
-            0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-    }
-}
-
-@mixin disabled-menu-funky-box-shadow {
-    tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
-        box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
-    }
-}
-
-perspective-viewer[settings] {
-    @include disabled-menu-funky-box-shadow;
-}
-
-:host-context(perspective-viewer[settings]) {
-    @include disabled-menu-funky-box-shadow;
-}
-
-.psp-header-leaf.psp-header-border {
-    // bottom-miter-right
-    box-shadow: 5px -4px 0px -4px var(--inactive--border-color, #8b868045);
-}
-
-tr:only-child th {
-    box-shadow: none !important;
-}