@toolbox-web/grid 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "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/public.d.ts

@@ -96,6 +96,8 @@ export declare const DGEvents: {
     readonly CELL_CHANGE: "cell-change";
     readonly CELL_COMMIT: "cell-commit";
     readonly ROW_COMMIT: "row-commit";
+    readonly EDIT_OPEN: "edit-open";
+    readonly EDIT_CLOSE: "edit-close";
     readonly CHANGED_ROWS_RESET: "changed-rows-reset";
     readonly MOUNT_EXTERNAL_VIEW: "mount-external-view";
     readonly MOUNT_EXTERNAL_EDITOR: "mount-external-editor";

package/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../libs/grid/src/public.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../libs/grid/src/public.ts"],"names":[],"mappings":"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"}

package/themes/dg-theme-bootstrap.css

@@ -49,10 +49,11 @@
     --tbw-header-letter-spacing: normal;
 
     /* ========== Dimensions ========== */
-    --tbw-cell-padding: 8px 12px;
-    --tbw-cell-padding-header: 8px 12px;
-    --tbw-row-height: 44px;
-    --tbw-header-height: 48px;
+    /* Bootstrap .table uses 0.5rem cell padding */
+    --tbw-cell-padding: 0.5rem 0.75rem;
+    --tbw-cell-padding-header: 0.5rem 0.75rem;
+    --tbw-row-height: 37px;
+    --tbw-header-height: 41px;
 
     /* Bootstrap uses rectangular tables */
     --tbw-border-radius: 0.375rem;
@@ -64,10 +65,10 @@
     --tbw-animation-easing: ease-in-out;
 
     /* ========== Focus & Selection ========== */
-    /* Bootstrap's focus ring style */
-    --tbw-focus-outline: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 25%);
-    --tbw-focus-outline-offset: 0;
-    --tbw-focus-background: transparent;
+    /* Bootstrap's focus ring style (outline syntax, not box-shadow) */
+    --tbw-focus-outline: 3px solid rgba(from var(--tbw-color-accent) r g b / 40%);
+    --tbw-focus-outline-offset: -3px;
+    --tbw-focus-background: light-dark(rgba(13, 110, 253, 0.08), rgba(110, 168, 254, 0.12));
 
     --tbw-range-border-color: var(--tbw-color-accent);
     --tbw-range-selection-bg: rgba(from var(--tbw-color-accent) r g b / 12%);
@@ -96,5 +97,188 @@
 
     /* ========== Row Animations ========== */
     --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 20%);
+
+    /* ========== Header Icons ========== */
+    /* Scale icons to match Bootstrap's 1rem base font */
+    .header-row .cell > span[part~='sort-indicator'] {
+      font-size: 14px;
+    }
+
+    .header-row .cell .tbw-filter-btn {
+      font-size: 14px;
+
+      > * {
+        width: 1em;
+        height: 1em;
+      }
+    }
+
+    /* ========== Bootstrap 5 Form Inputs ========== */
+    /* Standard Bootstrap form-control styling for editing cells */
+    .data-grid-row > .cell.editing input:not([type='checkbox']),
+    .data-grid-row > .cell.editing select,
+    .data-grid-row > .cell.editing textarea {
+      background: var(--tbw-color-bg);
+      color: var(--tbw-color-fg);
+      border: 1px solid light-dark(#ced4da, #495057);
+      border-radius: 0.375rem;
+      padding: 0.375rem 0.75rem;
+      font-family: var(--tbw-font-family);
+      font-size: var(--tbw-font-size);
+      outline: none;
+      transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+
+      &:focus {
+        border-color: light-dark(#86b7fe, #6ea8fe);
+        box-shadow: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 25%);
+      }
+    }
+
+    /* Bootstrap select caret */
+    .data-grid-row > .cell.editing select {
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 16px 12px;
+      padding-right: 2.25rem;
+    }
+  }
+
+  tbw-grid,
+  .tbw-filter-panel {
+    /* ========== Bootstrap 5 Checkboxes ========== */
+    /* Matches Bootstrap's .form-check-input styling */
+    input[type='checkbox'] {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 1.125em;
+      height: 1.125em;
+      border: 1px solid light-dark(#dee2e6, #495057);
+      border-radius: 0.25em;
+      background-color: light-dark(#ffffff, #212529);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      cursor: pointer;
+      outline: none;
+      vertical-align: middle;
+      flex-shrink: 0;
+      transition:
+        background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+
+      &:checked {
+        background-color: var(--tbw-color-accent);
+        border-color: var(--tbw-color-accent);
+        /* Bootstrap SVG checkmark */
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
+      }
+
+      &:indeterminate {
+        background-color: var(--tbw-color-accent);
+        border-color: var(--tbw-color-accent);
+        /* Bootstrap SVG dash */
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E");
+      }
+
+      &:focus {
+        border-color: light-dark(#86b7fe, #6ea8fe);
+        box-shadow: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 25%);
+      }
+    }
+
+    /* ========== Bootstrap 5 Buttons ========== */
+    /* Standard Bootstrap .btn base styling */
+    button {
+      border-radius: 0.375rem;
+      font-weight: 400;
+      letter-spacing: normal;
+      transition:
+        color 0.15s ease-in-out,
+        background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+
+      &:focus-visible {
+        box-shadow: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 50%);
+      }
+    }
+  }
+
+  .tbw-filter-panel {
+    /* Provide --tbw-* values for filter panel (rendered outside tbw-grid) */
+    --tbw-color-accent: light-dark(#0d6efd, #6ea8fe);
+    --tbw-color-bg: light-dark(#ffffff, #212529);
+    --tbw-color-fg: light-dark(#212529, #dee2e6);
+    --tbw-color-border: light-dark(#dee2e6, #495057);
+    --tbw-color-border-strong: light-dark(#adb5bd, #6c757d);
+    --tbw-color-panel-bg: light-dark(#f8f9fa, #2b3035);
+    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.05));
+    --tbw-filter-item-height: 32px;
+
+    /* Bootstrap card-like panel */
+    border-radius: 0.375rem;
+    font-family:
+      system-ui,
+      -apple-system,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+    /* Bootstrap form-control inputs */
+    .tbw-filter-search-input,
+    .tbw-filter-range-input,
+    .tbw-filter-date-input {
+      background: var(--tbw-color-bg);
+      border: 1px solid var(--tbw-color-border);
+      border-radius: 0.375rem;
+      height: 32px;
+      padding: 0.25rem 0.5rem;
+      font-family: inherit;
+      font-size: 0.875rem;
+      transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+
+      &:focus {
+        border-color: light-dark(#86b7fe, #6ea8fe);
+        box-shadow: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 25%);
+      }
+    }
+
+    /* Value items with Bootstrap hover */
+    .tbw-filter-value-item {
+      border-radius: 0.25rem;
+      transition: background 0.15s ease-in-out;
+
+      &:hover {
+        background: var(--tbw-color-row-hover);
+      }
+    }
+
+    /* Bootstrap primary button (Apply) */
+    .tbw-filter-apply-btn {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+
+    /* Bootstrap outline button (Clear) */
+    .tbw-filter-clear-btn {
+      color: var(--tbw-color-accent);
+      border-color: var(--tbw-color-accent);
+
+      &:hover {
+        color: #fff;
+        background: var(--tbw-color-accent);
+      }
+    }
   }
 } /* End @layer tbw-theme */

package/themes/dg-theme-material.css

@@ -98,5 +98,248 @@
 
     /* ========== Row Animations ========== */
     --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 20%);
+
+    /* ========== M3 Header Icons ========== */
+    /* M3 uses larger, bolder icons (18px vs default 12px) */
+    --tbw-icon-size: 18px;
+    --tbw-icon-size-sm: 16px;
+
+    /* Sort indicator — larger for M3, works with any icon type */
+    .header-row .cell > span[part~='sort-indicator'] {
+      font-size: var(--tbw-icon-size-sm);
+
+      > * {
+        width: 1em;
+        height: 1em;
+      }
+    }
+
+    /* Filter button — larger for M3, works with any icon type */
+    .header-row .cell .tbw-filter-btn {
+      font-size: var(--tbw-icon-size-sm);
+
+      > * {
+        width: 1em;
+        height: 1em;
+      }
+    }
+
+    /* ========== M3 Filled Text Fields ========== */
+    /* Material Design 3 filled text field: tinted background, bottom border, accent on focus */
+    .data-grid-row > .cell.editing input:not([type='checkbox']),
+    .data-grid-row > .cell.editing select,
+    .data-grid-row > .cell.editing textarea {
+      background: var(--tbw-color-panel-bg);
+      color: var(--tbw-color-fg);
+      border: none;
+      border-bottom: 1px solid var(--tbw-color-border-strong);
+      border-radius: 4px 4px 0 0;
+      padding: 8px 12px;
+      font-family: var(--tbw-font-family);
+      font-size: var(--tbw-font-size);
+      caret-color: var(--tbw-color-accent);
+      outline: none;
+      transition: border-color 150ms var(--tbw-transition-ease);
+
+      &:focus {
+        border-bottom: 2px solid var(--tbw-color-accent);
+        padding-bottom: 7px; /* compensate for thicker border */
+      }
+    }
+
+    /* M3 select dropdown caret */
+    .data-grid-row > .cell.editing select {
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379747e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 28px;
+    }
+
+    /* ========== M3 Editing border override ========== */
+    --tbw-editing-border: none;
+    --tbw-editing-row-outline-width: 2px;
+  }
+
+  tbw-grid,
+  .tbw-filter-panel {
+    /* ========== M3 Checkboxes ========== */
+    /* Material Design 3 styled checkboxes for all grid & filter panel checkboxes */
+    input[type='checkbox'] {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--tbw-color-border-strong);
+      border-radius: 2px;
+      background: transparent;
+      position: relative;
+      transition:
+        background-color 100ms cubic-bezier(0.2, 0, 0, 1),
+        border-color 100ms cubic-bezier(0.2, 0, 0, 1);
+      cursor: pointer;
+      outline: none;
+      vertical-align: middle;
+      flex-shrink: 0;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: none;
+        left: 4px;
+        top: 0;
+        width: 5px;
+        height: 10px;
+        border: solid var(--tbw-color-accent-fg);
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+
+      &:checked {
+        background-color: var(--tbw-color-accent);
+        border-color: var(--tbw-color-accent);
+
+        &::after {
+          display: block;
+        }
+      }
+
+      &:indeterminate {
+        background-color: var(--tbw-color-accent);
+        border-color: var(--tbw-color-accent);
+
+        &::after {
+          display: block;
+          left: 3px;
+          top: 6px;
+          width: 8px;
+          height: 0;
+          border-width: 0 0 2px 0;
+          transform: none;
+        }
+      }
+
+      &:hover::before {
+        content: '';
+        position: absolute;
+        inset: -10px;
+        border-radius: 50%;
+        background: rgba(from var(--tbw-color-accent) r g b / 8%);
+      }
+
+      &:focus-visible::before {
+        content: '';
+        position: absolute;
+        inset: -10px;
+        border-radius: 50%;
+        background: rgba(from var(--tbw-color-accent) r g b / 12%);
+      }
+    }
+
+    /* ========== M3 Checkboxes ========== */
+    /* Material Design 3 buttons */
+    button {
+      font-weight: 500;
+      letter-spacing: 0.01em;
+      min-height: 36px;
+      border-radius: 20px;
+      transition:
+        filter 150ms var(--tbw-transition-ease),
+        box-shadow 150ms var(--tbw-transition-ease);
+    }
+  }
+
+  .tbw-filter-panel {
+    /* Provide --tbw-* values for filter panel (rendered outside tbw-grid) */
+    --tbw-color-accent: light-dark(#6750a4, #d0bcff);
+    --tbw-color-accent-fg: light-dark(#fff, #381e72);
+    --tbw-color-border-strong: light-dark(#79747e, #938f99);
+    --tbw-color-panel-bg: light-dark(#f7f2fa, #2b2930);
+    --tbw-color-row-hover: light-dark(rgba(103, 80, 164, 0.08), rgba(208, 188, 255, 0.08));
+    --tbw-transition-ease: cubic-bezier(0.2, 0, 0, 1);
+    --tbw-filter-item-height: 36px;
+
+    /* M3 surface container with tonal elevation */
+    border-radius: 12px;
+    font-family: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.3),
+      0 4px 8px 3px rgba(0, 0, 0, 0.15);
+
+    /* M3 filled text fields — shared base for all text inputs */
+    .tbw-filter-search-input,
+    .tbw-filter-range-input,
+    .tbw-filter-date-input {
+      background: var(--tbw-color-panel-bg);
+      border: none;
+      border-bottom: 1px solid var(--tbw-color-border-strong);
+      border-radius: 4px 4px 0 0;
+      height: 36px;
+      padding: 8px 12px;
+      font-family: inherit;
+      caret-color: var(--tbw-color-accent);
+      transition: border-color 150ms var(--tbw-transition-ease);
+
+      &:focus {
+        border-bottom: 2px solid var(--tbw-color-accent);
+        padding-bottom: 7px;
+        box-shadow: none;
+      }
+    }
+
+    /* M3 value items with ripple-like hover */
+    .tbw-filter-value-item {
+      border-radius: 8px;
+      transition: background 150ms var(--tbw-transition-ease);
+
+      &:hover {
+        background: var(--tbw-color-row-hover);
+      }
+    }
+
+    /* M3 buttons — shared base */
+
+    /* Filled button (Apply) */
+    .tbw-filter-apply-btn {
+      &:hover {
+        filter: brightness(1.08);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+      }
+    }
+
+    /* Outlined button (Clear) */
+    .tbw-filter-clear-btn {
+      color: var(--tbw-color-accent);
+      border-color: var(--tbw-color-border-strong);
+
+      &:hover {
+        background: var(--tbw-color-row-hover);
+      }
+    }
+
+    /* M3 range slider */
+    .tbw-filter-range-track,
+    .tbw-filter-range-fill {
+      height: 4px;
+      border-radius: 2px;
+    }
+
+    .tbw-filter-range-thumb::-webkit-slider-thumb {
+      width: 20px;
+      height: 20px;
+      border: none;
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.2),
+        0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .tbw-filter-range-thumb::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      border: none;
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.2),
+        0 1px 2px rgba(0, 0, 0, 0.1);
+    }
   }
 } /* End @layer tbw-theme */