@perspective-dev/viewer-datagrid 4.3.0 → 4.4.0

package/dist/esm/style_handlers/table_cell/datetime.d.ts

@@ -1,3 +1,7 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
-import type { DatagridModel, ColumnConfig } from "../../types.js";
-export declare function cell_style_datetime(this: DatagridModel, plugin: ColumnConfig, td: HTMLElement, metadata: CellMetadata): void;
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+interface PluginWithColor extends Omit<ColumnConfig, "color"> {
+    color?: ColorRecord;
+}
+export declare function cell_style_datetime(this: DatagridModel, plugin: PluginWithColor, td: HTMLElement, metadata: CellMetadata): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -35,7 +35,7 @@
     "regular-table": "=0.8.3"
   },
   "devDependencies": {
-    "@prospective.co/procss": "0.1.18",
+    "lightningcss": "^1.29.0",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
     "@types/chroma-js": "^3.1.2",

package/src/css/mitered-headers.css

@@ -0,0 +1,64 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-header-group {
+    /* bottom */
+    box-shadow: 0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-is-top {
+    /* top-miter-right */
+    box-shadow: 5px 4px 0px -4px var(--psp-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(--psp-inactive--border-color, #8b868045),
+        0px 10px 0 -9px var(--psp-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(--psp-inactive--border-color, #8b868045),
+            0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045);
+    }
+}
+
+perspective-viewer[settings]
+    tr.rt-autosize
+    .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+    box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045);
+}
+
+:host-context(perspective-viewer[settings])
+    tr.rt-autosize
+    .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+    box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-header-leaf.psp-header-border {
+    /* bottom-miter-right */
+    box-shadow: 5px -4px 0px -4px var(--psp-inactive--border-color, #8b868045);
+}
+
+tr:only-child th {
+    box-shadow: none !important;
+}

package/src/css/perspective-viewer-datagrid.css

@@ -0,0 +1,6 @@
+@import "./pro.css";
+@import "./mitered-headers.css";
+@import "./row-hover.css";
+@import "./sub-cell-scroll.css";
+@import "./scrollbar.css";
+@import "./regular_table.css";

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

@@ -1,22 +1,21 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@row-height: 19px;
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 regular-table {
     padding: 0;
     margin: 12px 0 0 12px;
     font-family: inherit;
-    --rt-hover--border-color: var(--inactive--color, #c5c9d080);
+    --psp-datagrid--hover--border-color: var(--psp-inactive--color, #c5c9d080);
 
     div[tabindex] {
         outline: none;
@@ -35,7 +34,7 @@ regular-table {
         text-align: center;
     }
 
-    // Header groups should overflow and not contribute to auto-sizing.
+    /* Header groups should overflow and not contribute to auto-sizing. */
     thead tr:not(.rt-autosize) th {
         overflow: hidden;
         max-width: 0px;
@@ -70,7 +69,7 @@ regular-table {
         text-align: left;
     }
 
-    // frozen rows
+    /* frozen rows */
 
     thead tr:last-child th {
         border-bottom: 1px solid #8b868045;
@@ -95,12 +94,11 @@ regular-table {
     td,
     th {
         white-space: nowrap;
-        font-size: 12px;
         padding-right: 5px;
         padding-left: 5px;
         padding-top: 0px;
         padding-bottom: 0px;
-        height: @row-height;
+        height: var(--psp-datagrid--row--height, 19px);
     }
 
     table * {
@@ -116,7 +114,7 @@ regular-table {
     span.rt-row-header-icon {
         color: #aaa;
         padding-right: 4px;
-        font-family: var(--button--font-family);
+        font-family: var(--psp-button--font-family);
     }
 
     span.rt-column-header-icon {
@@ -124,7 +122,7 @@ regular-table {
         padding-left: 3px;
         display: inline-block;
         width: 10px;
-        font-family: var(--button--font-family);
+        font-family: var(--psp-button--font-family);
     }
 
     span.rt-row-header-icon:hover {
@@ -141,17 +139,17 @@ regular-table {
         text-overflow: ellipsis;
     }
 
-    // OPTIONAL zebra striping
+    /* OPTIONAL zebra striping */
 
-    // @zebra-stripe-color: rgb(238,238,238);
+    /* @zebra-stripe-color: rgb(238,238,238); */
 
-    // tbody tr:nth-child(even) td:not(.rt-group-header) {
-    //     background: @zebra-stripe-color;
-    // }
+    /* tbody tr:nth-child(even) td:not(.rt-group-header) { */
+    /*     background: @zebra-stripe-color; */
+    /* } */
 
-    // tbody tr:nth-child(even) span.rt-group-name {
-    //     background: @zebra-stripe-color;
-    // }
+    /* tbody tr:nth-child(even) span.rt-group-name { */
+    /*     background: @zebra-stripe-color; */
+    /* } */
 
     td span.rt-group-name,
     th span.rt-group-name {
@@ -182,15 +180,18 @@ regular-table {
     }
 
     a {
-        color: var(--rt-pos-cell--color);
+        color: var(--psp-datagrid--pos-cell--color);
     }
 
     a:visited {
-        color: var(--active--color);
+        color: var(--psp-active--color);
     }
 
     td.psp-null:after,
     th.psp-null:after {
-        content: var(--null--content, "-");
+        content: var(--psp-label--null--content, "-");
+        color: var(--psp-label--null--color, inherit);
+        font-size: var(--psp-label--null--font-size, inherit);
+        vertical-align: middle;
     }
 }