@coreui/data-grid 0.1.0-rc.0 → 0.2.0-rc.0

package/scss/data-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * CoreUI PRO data-grid.scss v0.1.0
+ * CoreUI PRO data-grid.scss v0.2.0
  * License (https://coreui.io/pro/license/)
  */
 
@@ -7,12 +7,23 @@
   // The column menu is positioned against the grid root (it must escape the
   // viewport's overflow while staying inside the token scope).
   position: relative;
+  // A column so that a root given an explicit height actually constrains the
+  // scroller: the viewport takes what the toolbar and pagination leave, and
+  // min-height: 0 lets it shrink below its content instead of overflowing the
+  // root. With no height set, this changes nothing — the viewport is sized by
+  // its content up to the max-height token.
+  display: flex;
+  flex-direction: column;
 
   // Component tokens. Everything resolves through CoreUI semantic variables,
   // so light/dark theming via [data-coreui-theme] works with no extra rules.
   --cui-data-grid-viewport-max-height: 30rem;
   --cui-data-grid-header-bg: var(--cui-body-bg, #fff);
   --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);
+  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), .12);
+  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);
+  --cui-data-grid-cell-selected-border-width: 1px;
+  --cui-data-grid-row-handle-width: 2rem;
   --cui-data-grid-select-cell-width: 2.5rem;
   --cui-data-grid-sorter-margin: .25rem;
   --cui-data-grid-sorter-opacity: .3;
@@ -24,6 +35,7 @@
   --cui-data-grid-pinned-border-width: var(--cui-border-width);
   --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);
   --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);
+  --cui-data-grid-drag-transition: .15s ease;
   --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);
   --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);
   --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
@@ -56,6 +68,8 @@
 
   .data-grid-viewport {
     position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
     max-height: var(--cui-data-grid-viewport-max-height);
     overflow-y: auto;
     // Windowed rendering resizes the spacer rows and recycles row elements on
@@ -303,12 +317,127 @@
     background-color: var(--cui-data-grid-menu-border-color);
   }
 
-  .data-grid-header .data-grid-dragging {
+  .data-grid-dragging {
     opacity: .5;
   }
 
-  .data-grid-header .data-grid-drop-target {
-    box-shadow: inset .125rem 0 0 var(--cui-data-grid-drop-indicator);
+  // While a drag is live the whole grid keeps the grabbing cursor and stops
+  // painting a text selection under the pointer.
+  &.data-grid-drag-active {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  // Both overlays are position: fixed (placed from viewport coordinates in JS)
+  // so they escape the viewport's overflow, like the tooltip.
+  .data-grid-drag-ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1080;
+    display: flex;
+    align-items: center;
+    max-width: 16rem;
+    padding: 0 var(--cui-data-grid-cell-padding-x, .5rem);
+    overflow: hidden;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    background-color: var(--cui-data-grid-pinned-bg);
+    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);
+    border-radius: var(--cui-border-radius, .375rem);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+    transform: translate(-9999px, -9999px);
+    opacity: .9;
+  }
+
+  // The settling ghost: on release it flies from the pointer to the slot the
+  // item landed in (or back home on cancel) and fades out there.
+  .data-grid-drag-ghost-settle {
+    transition: transform var(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);
+  }
+
+  .data-grid-drop-indicator {
+    position: fixed;
+    z-index: 1080;
+    pointer-events: none;
+    background-color: var(--cui-data-grid-drop-indicator);
+    transition: top var(--cui-data-grid-drag-transition), left var(--cui-data-grid-drag-transition);
+  }
+
+  // The live reorder preview: cells slide to the layout the drop will produce.
+  // Transform only, so nothing reflows and the real order still changes once.
+  .data-grid-drag-preview {
+    transition: transform var(--cui-data-grid-drag-transition);
+  }
+
+  // Someone who asked the OS to stop moving things still gets the preview —
+  // it snaps to the final layout instead of gliding there.
+  @media (prefers-reduced-motion: reduce) {
+    :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {
+      transition: none;
+    }
+  }
+
+  // The line is 2px across its short axis and spans the grid along the other;
+  // JS sets the spanning size, the axis class sets the thickness.
+  .data-grid-drop-indicator-x {
+    width: .125rem;
+  }
+
+  .data-grid-drop-indicator-y {
+    height: .125rem;
+  }
+
+  // Cell selection: a tinted fill on every selected cell, plus an outline
+  // drawn only on the sides that sit on the selection's boundary — so a
+  // rectangle reads as one region instead of a grid of boxes. The outline is
+  // an overlay rather than a border: a border on a table cell would shift the
+  // whole row's layout the moment a range is selected.
+  .data-grid-cell-selected {
+    position: relative;
+    background-color: var(--cui-data-grid-cell-selected-bg);
+  }
+
+  .data-grid-cell-selected::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: 0 solid var(--cui-data-grid-cell-selected-border-color);
+  }
+
+  .data-grid-cell-selected-top::after {
+    border-top-width: var(--cui-data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-right::after {
+    border-right-width: var(--cui-data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-bottom::after {
+    border-bottom-width: var(--cui-data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-left::after {
+    border-left-width: var(--cui-data-grid-cell-selected-border-width);
+  }
+
+  // The reorder column: as narrow as the grip, and the grip itself is the only
+  // thing that starts a row drag (a row is full of interactive content that a
+  // whole-row handle would swallow).
+  .data-grid-row-handle-cell {
+    width: var(--cui-data-grid-row-handle-width);
+    padding-inline: 0;
+    text-align: center;
+  }
+
+  .data-grid-row-handle {
+    display: inline-flex;
+    color: var(--cui-data-grid-resizer-grip-color-hover);
+    cursor: grab;
+    touch-action: none;
   }
 
   .data-grid-select-cell {
@@ -368,7 +497,11 @@
   // fixed-height virtualizer (wrapping would desync `estimateSize`). Pinned cells
   // are excluded so their shadow pseudo-element (painted outside the box via a
   // translate) isn't clipped; the select cell holds only a checkbox.
-  .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+  //
+  // Auto row height is the deliberate exception: there the virtualizer measures
+  // each row, so cells are free to wrap. Scoping the rule out is what keeps the
+  // two modes from fighting over specificity.
+  &:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -392,7 +525,7 @@
 
   // A pinned th is already sticky (a positioned containing block for the
   // resizer), so only non-pinned header cells need explicit relative here.
-  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
     position: relative;
   }
 
@@ -403,22 +536,22 @@
     border-spacing: 0;
   }
 
-  .data-grid-cell-pinned-left,
-  .data-grid-cell-pinned-right {
+  .data-grid-cell-pinned-start,
+  .data-grid-cell-pinned-end {
     position: sticky;
     z-index: 1;
     background-color: var(--cui-data-grid-pinned-bg);
   }
 
-  .data-grid-header .data-grid-cell-pinned-left,
-  .data-grid-header .data-grid-cell-pinned-right {
+  .data-grid-header .data-grid-cell-pinned-start,
+  .data-grid-header .data-grid-cell-pinned-end {
     z-index: 3;
   }
 
   // Edge cells cast a shadow over the scrolling content. A pseudo-element is
   // used because the cell's own box-shadow carries the table striping accent.
-  .data-grid-cell-pinned-left-last,
-  .data-grid-cell-pinned-right-first {
+  .data-grid-cell-pinned-start-last,
+  .data-grid-cell-pinned-end-first {
     position: sticky;
 
     &::after {
@@ -431,13 +564,13 @@
     }
   }
 
-  .data-grid-cell-pinned-left-last::after {
-    right: 0;
+  .data-grid-cell-pinned-start-last::after {
+    inset-inline-end: 0;
     background: var(--cui-data-grid-pinned-border-color);
   }
 
-  .data-grid-cell-pinned-right-first::after {
-    left: 0;
+  .data-grid-cell-pinned-end-first::after {
+    inset-inline-start: 0;
     background: var(--cui-data-grid-pinned-border-color);
   }
 
@@ -504,6 +637,19 @@
     background-color: var(--cui-data-grid-loading-bg);
   }
 
+  // Infinite scroll's "next page arriving" strip. Sticky, not an overlay: the
+  // rows already loaded stay readable while the grid appends to them.
+  .data-grid-loading-more {
+    position: sticky;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    padding: var(--cui-data-grid-spacing);
+    background-color: var(--cui-data-grid-loading-bg);
+  }
+
   // Shared icon-button tooltip. position: fixed (set in JS) so it escapes the
   // viewport overflow; theme-inverted like CoreUI's own tooltip.
   .data-grid-tooltip {
@@ -557,3 +703,45 @@
     }
   }
 }
+
+// Print: the grid renders a plain, complete table into the document (see
+// util/print.ts) and hides everything else, so a virtualized grid prints all
+// its rows instead of the twenty in the window.
+@media print {
+  .data-grid-print-root {
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: 2000;
+    background-color: #fff;
+
+    h1 {
+      margin-bottom: 1rem;
+      font-size: 1.25rem;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    :is(th, td) {
+      padding: .25rem .5rem;
+      text-align: start;
+      border: 1px solid #000;
+    }
+
+    thead {
+      display: table-header-group;
+    }
+
+    tr {
+      break-inside: avoid;
+    }
+  }
+
+  // :has() is inside the browser floor (.browserslistrc), and scoping to the
+  // body's own children keeps the clone's ancestors from being hidden.
+  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {
+    display: none !important;
+  }
+}

package/src/{base-component.js → base-component.ts}

@@ -1,17 +1,17 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/base-component.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/base-component.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI base-component.js
+ * CoreUI base-component.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This component is a modified version of the Bootstrap's base-component.js
+ * This component is a modified version of the Bootstrap's base-component.ts
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
 import Data from './dom/data.js'
 import EventHandler from './dom/event-handler.js'
-import Config from './util/config.js'
+import Config, { type ComponentConfig } from './util/config.js'
 import { executeAfterTransition, getElement } from './util/index.js'
 
 /**
@@ -25,7 +25,11 @@ const VERSION = '0.1.0'
  */
 
 class BaseComponent extends Config {
-  constructor(element, config) {
+  declare ['constructor']: typeof BaseComponent
+  protected declare _element: HTMLElement
+  protected declare _config: ComponentConfig
+
+  constructor(element?: string | Element | null, config?: ComponentConfig | null) {
     super()
 
     element = getElement(element)
@@ -33,28 +37,28 @@ class BaseComponent extends Config {
       return
     }
 
-    this._element = element
+    this._element = element as HTMLElement
     this._config = this._getConfig(config)
 
     Data.set(this._element, this.constructor.DATA_KEY, this)
   }
 
   // Public
-  dispose() {
+  dispose(): void {
     Data.remove(this._element, this.constructor.DATA_KEY)
     EventHandler.off(this._element, this.constructor.EVENT_KEY)
 
     for (const propertyName of Object.getOwnPropertyNames(this)) {
-      this[propertyName] = null
+      (this as Record<string, any>)[propertyName] = null
     }
   }
 
   // Private
-  _queueCallback(callback, element, isAnimated = true) {
+  _queueCallback(callback: () => void, element: Element, isAnimated = true): void {
     executeAfterTransition(callback, element, isAnimated)
   }
 
-  _getConfig(config) {
+  override _getConfig(config?: ComponentConfig | null): ComponentConfig {
     config = this._mergeConfigObj(config, this._element)
     config = this._configAfterMerge(config)
     this._typeCheckConfig(config)
@@ -62,27 +66,27 @@ class BaseComponent extends Config {
   }
 
   // Static
-  static getInstance(element) {
+  static getInstance<T extends typeof BaseComponent>(this: T, element?: string | Element | null): InstanceType<T> | null {
     return Data.get(getElement(element), this.DATA_KEY)
   }
 
-  static getOrCreateInstance(element, config = {}) {
-    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
+  static getOrCreateInstance<T extends typeof BaseComponent>(this: T, element?: string | Element | null, config: ComponentConfig | null = {}): InstanceType<T> {
+    return this.getInstance(element) || (new this(element, typeof config === 'object' ? config : null) as InstanceType<T>)
   }
 
-  static get VERSION() {
+  static get VERSION(): string {
     return VERSION
   }
 
-  static get DATA_KEY() {
+  static get DATA_KEY(): string {
     return `coreui.${this.NAME}`
   }
 
-  static get EVENT_KEY() {
+  static get EVENT_KEY(): string {
     return `.${this.DATA_KEY}`
   }
 
-  static eventName(name) {
+  static eventName(name: string): string {
     return `${name}${this.EVENT_KEY}`
   }
 }