@toolbox-web/grid 2.13.1 → 2.14.1

package/lib/plugins/visibility/types.d.ts

@@ -9,19 +9,14 @@
  * Controls the visibility sidebar panel that lets users show/hide individual columns.
  * The sidebar is toggled via a button in the grid toolbar or programmatically.
  *
- * @example
- * ```typescript
- * new VisibilityPlugin({ allowHideAll: false })
- * ```
+ * Currently has no configurable options — reserved as an extension point for
+ * future flags (e.g. default open state, panel title). The grid always keeps
+ * at least one column visible; columns flagged with `lockVisible: true` are
+ * un-hideable individually.
+ *
  * @since 0.1.1
  */
 export interface VisibilityConfig {
-    /**
-     * Whether users are allowed to hide every column.
-     * When `false`, the last visible column's toggle is disabled to prevent an empty grid.
-     * @default false
-     */
-    allowHideAll?: boolean;
 }
 /** Internal state managed by the visibility plugin */
 export interface VisibilityState {

package/lib/plugins/visibility/visibility.d.ts

@@ -9,15 +9,17 @@ import { ColumnConfig } from '../../core/types';
 export declare function filterVisibleColumns<TRow = unknown>(columns: ColumnConfig<TRow>[], hidden: Set<string>): ColumnConfig<TRow>[];
 /**
  * Check if a column can be hidden.
- * Respects lockVisible property and allowHideAll setting.
+ *
+ * Mirrors the invariant enforced by the grid core (`config-manager.setColumnVisible`):
+ * a column cannot be hidden if it is flagged `lockVisible`, or if hiding it would
+ * leave zero visible columns.
  *
  * @param columns - All column configurations
  * @param field - Field to check
  * @param hidden - Currently hidden field names
- * @param allowHideAll - Whether hiding all columns is allowed
  * @returns True if the column can be hidden
  */
-export declare function canHideColumn<TRow = unknown>(columns: ColumnConfig<TRow>[], field: string, hidden: Set<string>, allowHideAll: boolean): boolean;
+export declare function canHideColumn<TRow = unknown>(columns: ColumnConfig<TRow>[], field: string, hidden: Set<string>): boolean;
 /**
  * Toggle column visibility state.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid",
-  "version": "2.13.1",
+  "version": "2.14.1",
   "description": "Zero-dependency, framework-agnostic data grid web component with virtualization, sorting, filtering, editing, and 20+ plugins. Works in vanilla JS, React, Vue, Angular, and any framework.",
   "type": "module",
   "main": "./index.js",

package/themes/dg-theme-bootstrap.css

@@ -4,7 +4,7 @@
  * https://getbootstrap.com/docs/5.3/content/tables/
  */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     /* ========== Core Palette ========== */
     --tbw-color-bg: light-dark(#ffffff, #212529);
     --tbw-color-panel-bg: light-dark(#f8f9fa, #2b3035);
@@ -154,7 +154,7 @@
     }
   }
 
-  tbw-grid,
+  [data-tbw-grid],
   .tbw-filter-panel {
     /* ========== Bootstrap 5 Checkboxes ========== */
     /* Matches Bootstrap's .form-check-input styling */

package/themes/dg-theme-contrast.css

@@ -1,6 +1,6 @@
 /* High contrast accessibility-focused theme */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     --tbw-color-bg: light-dark(#ffffff, #000000);
     --tbw-color-fg: light-dark(#000000, #ffffff);
     --tbw-color-fg-muted: light-dark(#222222, #dddddd);

package/themes/dg-theme-large.css

@@ -10,7 +10,7 @@
    - Slightly higher contrast for muted fg & borders (within WCAG AA)
 */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     /* Reuse core color tokens from standard theme with a few tweaks */
     --tbw-color-bg: light-dark(#ffffff, #1f2125);
     --tbw-color-fg: light-dark(#1b1e23, #e7e9ed); /* a bit darker/lighter */

package/themes/dg-theme-material.css

@@ -5,7 +5,7 @@
  * https://m3.material.io/
  */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     /* ========== Core Palette ========== */
     /* M3 surface colors with subtle tonal variation */
     --tbw-color-bg: light-dark(#fffbff, #1c1b1f);
@@ -180,7 +180,7 @@
     --tbw-editing-row-outline-width: 2px;
   }
 
-  tbw-grid,
+  [data-tbw-grid],
   .tbw-filter-panel {
     /* ========== M3 Checkboxes ========== */
     /* Material Design 3 styled checkboxes for all grid & filter panel checkboxes */

package/themes/dg-theme-standard.css

@@ -4,7 +4,7 @@
  * Clean lines, subtle depth, and professional aesthetics.
  */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     /* ========== Core Palette ========== */
     --tbw-color-bg: light-dark(#ffffff, #1a1c20);
     --tbw-color-panel-bg: light-dark(#f8f9fa, #232528);

package/themes/dg-theme-vibrant.css

@@ -4,7 +4,7 @@
  * Features subtle gradients, glowing accents, and polished transitions.
  */
 @layer tbw-theme {
-  tbw-grid {
+  [data-tbw-grid] {
     /* ========== Core Palette ========== */
     --tbw-color-bg: light-dark(#fafaff, #12141c);
     --tbw-color-panel-bg: light-dark(#f0f0ff, #1a1d28);