@schukai/monster 4.41.0 → 4.42.1

package/source/components/datatable/datatable.mjs

@@ -187,6 +187,12 @@ class DataTable extends CustomElement {
    * @property {boolean} features.doubleClickCopyToClipboard Double click copy to clipboard feature
    * @property {boolean} features.copyAll Copy all feature
    * @property {boolean} features.help Help feature
+   * @property {boolean} features.resizeable Columns are resizable
+   * @property {Object} copy Copy configuration
+   * @property {string} copy.delimiter Delimiter character
+   * @property {string} copy.quoteOpen Quote open character
+   * @property {string} copy.quoteClose Quote close character
+   * @property {string} copy.rowBreak Row break character
    * @property {Object} templateMapping Template mapping
    * @property {string} templateMapping.row-key Row key
    * @property {string} templateMapping.filter-id Filter id
@@ -203,7 +209,7 @@ class DataTable extends CustomElement {
 
         datasource: {
           selector: null,
-          orderDelimiter: ",", // look at  initOptionsFromArguments()
+          orderDelimiter: ",", // see initOptionsFromArguments()
         },
 
         mapping: {
@@ -232,6 +238,7 @@ class DataTable extends CustomElement {
           doubleClickCopyToClipboard: true,
           copyAll: true,
           help: true,
+          resizable: true,
         },
 
         copy: {
@@ -431,7 +438,9 @@ class DataTable extends CustomElement {
         const selectAll = this[gridHeadersElementSymbol].querySelector(
           `[data-monster-role="select-all"]`,
         );
-        selectAll.checked = false;
+        if (selectAll instanceof HTMLInputElement) {
+          selectAll.checked = false;
+        }
 
         getSlottedElements
           .call(this, "[data-monster-role=row-action-button]", "bar")
@@ -750,27 +759,107 @@ function updateConfigColumnBar() {
 function initEventHandler() {
   const self = this;
 
+  // --- Column resizing state ---
+  let isResizing = false;
+  let resizingColumnIndex = -1;
+  let startX = 0;
+  let startWidth = 0;
+
+  // --- Pointer-based resize handlers (robust for mouse/touch/stylus) ---
+  const onPointerDown = (event) => {
+    // Important: Call helper with (attrName, value) – not with CSS selector
+    const resizeHandle = findTargetElementFromEvent(
+      event,
+      "data-monster-role",
+      "resize-handle",
+    );
+    if (!resizeHandle) return;
+
+    event.preventDefault();
+    isResizing = true;
+
+    const headerCell = resizeHandle.closest("[data-monster-index]");
+    resizingColumnIndex = parseInt(
+      headerCell.getAttribute("data-monster-index"),
+      10,
+    );
+    startX = event.clientX;
+    startWidth = headerCell.offsetWidth;
+
+    // Capture to prevent losing events during fast dragging
+    event.target.setPointerCapture?.(event.pointerId);
+
+    getWindow().addEventListener("pointermove", onPointerMove);
+    getWindow().addEventListener("pointerup", onPointerUp);
+
+    // Global cursor styling during resizing
+    self.shadowRoot.host.classList.add("is-resizing");
+  };
+
+  const onPointerMove = (event) => {
+    if (!isResizing) return;
+
+    const deltaX = event.clientX - startX;
+    let newWidth = startWidth + deltaX;
+
+    const headers = self.getOption("headers");
+    const resizingHeader = headers[resizingColumnIndex];
+
+    const minWidth = 50; 
+
+    const visibleHeaders = headers.filter(
+      (h) => h.getInternal("mode") !== ATTRIBUTE_DATATABLE_MODE_HIDDEN,
+    );
+    const numOtherVisibleColumns =
+      visibleHeaders.length > 1 ? visibleHeaders.length - 1 : 0;
+
+    const reservedSpaceForOthers = numOtherVisibleColumns * 50;
+    const tableContainerWidth = self[gridElementSymbol].clientWidth;
+    const maxWidth = tableContainerWidth - reservedSpaceForOthers;
+
+    newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+
+    resizingHeader.setInternal("grid", `${newWidth}px`);
+
+    updateGrid.call(self);
+  };
+
+  const onPointerUp = () => {
+    if (!isResizing) return;
+
+    isResizing = false;
+    getWindow().removeEventListener("pointermove", onPointerMove);
+    getWindow().removeEventListener("pointerup", onPointerUp);
+
+    self.shadowRoot.host.classList.remove("is-resizing");
+  };
+
+  // Use pointer events instead of mouse: more resilient
+  this[gridHeadersElementSymbol].addEventListener("pointerdown", onPointerDown);
+
+  // --- Copy configuration ---
   const quoteOpenChar = this.getOption("copy.quoteOpen");
   const quoteCloseChar = this.getOption("copy.quoteClose");
   const delimiterChar = this.getOption("copy.delimiter");
   const rowBreak = this.getOption("copy.rowBreak");
 
-  self[columnBarElementSymbol].attachObserver(
-    new Observer((e) => {
-      updateHeaderFromColumnBar.call(self);
-      updateGrid.call(self);
-      updateConfigColumnBar.call(self);
-    }),
-  );
+  // --- Column-Bar -> Header visibility & persistence ---
+  if (self[columnBarElementSymbol]) {
+    self[columnBarElementSymbol].attachObserver(
+      new Observer(() => {
+        updateHeaderFromColumnBar.call(self);
+        updateGrid.call(self);
+        updateConfigColumnBar.call(self);
+      }),
+    );
+  }
 
+  // --- Sorting (click on header link) ---
   self[gridHeadersElementSymbol].addEventListener("click", function (event) {
-    let element = null;
     const datasource = self[datasourceLinkedElementSymbol];
-    if (!datasource) {
-      return;
-    }
+    if (!datasource) return;
 
-    element = findTargetElementFromEvent(event, ATTRIBUTE_DATATABLE_SORTABLE);
+    const element = findTargetElementFromEvent(event, "data-monster-sortable");
     if (element instanceof HTMLElement) {
       const index = element.parentNode?.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
       const headers = self.getOption("headers");
@@ -780,7 +869,6 @@ function initEventHandler() {
       headers[index].changeDirection();
 
       queueMicrotask(function () {
-        /** hotfix, normally this should be done via the updater, no idea why this is not possible. */
         element.setAttribute(
           ATTRIBUTE_DATATABLE_SORTABLE,
           `${headers[index].field} ${headers[index].direction}`,
@@ -791,57 +879,57 @@ function initEventHandler() {
     }
   });
 
+  // --- Double-Click Copy (column or entire row with Shift) ---
   const eventHandlerDoubleClickCopyToClipboard = (event) => {
-    const element = findTargetElementFromEvent(event, "data-monster-head");
-    if (element) {
-      let text = "";
-
-      if (event.shiftKey) {
-        const index = element.getAttribute("data-monster-insert-reference");
-        if (index) {
-          const cols = self.getGridElements(
-            `[data-monster-insert-reference="${index}"]`,
-          );
-
-          const colTexts = [];
-          for (let i = 0; i < cols.length; i++) {
-            const col = cols[i];
-
-            if (
-              col.querySelector("monster-button-bar") ||
-              col.querySelector("monster-button")
-            ) {
-              continue;
-            }
+    const headCell = findTargetElementFromEvent(event, "data-monster-head");
+    if (!headCell) return;
 
-            if (col.textContent) {
-              colTexts.push(
-                quoteOpenChar + col.textContent.trim() + quoteCloseChar,
-              );
-            }
+    let text = "";
+
+    if (event.shiftKey) {
+      const index = headCell.getAttribute("data-monster-insert-reference");
+      if (index) {
+        const cols = self.getGridElements(
+          `[data-monster-insert-reference="${index}"]`,
+        );
+
+        const colTexts = [];
+        for (let i = 0; i < cols.length; i++) {
+          const col = cols[i];
+
+          if (
+            col.querySelector("monster-button-bar") ||
+            col.querySelector("monster-button")
+          ) {
+            continue;
           }
 
-          text = colTexts.join(delimiterChar);
-        }
-      } else {
-        if (
-          element.querySelector("monster-button-bar") ||
-          element.querySelector("monster-button")
-        ) {
-          return;
+          if (col.textContent) {
+            colTexts.push(
+              quoteOpenChar + col.textContent.trim() + quoteCloseChar,
+            );
+          }
         }
 
-        text = element.textContent.trim();
+        text = colTexts.join(delimiterChar);
       }
-
-      if (getWindow().navigator.clipboard && text) {
-        getWindow()
-          .navigator.clipboard.writeText(text)
-          .then(
-            () => {},
-            (err) => {},
-          );
+    } else {
+      if (
+        headCell.querySelector("monster-button-bar") ||
+        headCell.querySelector("monster-button")
+      ) {
+        return;
       }
+      text = headCell.textContent.trim();
+    }
+
+    if (getWindow().navigator.clipboard && text) {
+      getWindow()
+        .navigator.clipboard.writeText(text)
+        .then(
+          () => {},
+          () => {},
+        );
     }
   };
 
@@ -852,13 +940,13 @@ function initEventHandler() {
     );
   }
 
+  // --- Copy All ---
   if (self.getOption("features.copyAll") && this[copyAllElementSymbol]) {
     this[copyAllElementSymbol].addEventListener("click", (event) => {
       event.preventDefault();
 
       const table = [];
       let currentRow = [];
-      let currentIndex = null;
 
       const cols = self.getGridElements(`[data-monster-insert-reference]`);
       const rowIndexes = new Map();
@@ -867,13 +955,13 @@ function initEventHandler() {
         rowIndexes.set(index, true);
       });
 
-      rowIndexes.forEach((value, key) => {
-        const cols = self.getGridElements(
+      rowIndexes.forEach((_, key) => {
+        const rowCols = self.getGridElements(
           `[data-monster-insert-reference="${key}"]`,
         );
 
-        for (let i = 0; i < cols.length; i++) {
-          const col = cols[i];
+        for (let i = 0; i < rowCols.length; i++) {
+          const col = rowCols[i];
 
           if (
             col.querySelector("monster-button-bar") ||
@@ -902,114 +990,93 @@ function initEventHandler() {
             .navigator.clipboard.writeText(text)
             .then(
               () => {},
-              (err) => {},
+              () => {},
             );
         }
       }
     });
   }
 
+  // --- Row Selection (single) ---
   const selectRowCallback = (event) => {
-    const element = findTargetElementFromEvent(
+    const checkbox = findTargetElementFromEvent(
       event,
       "data-monster-role",
       "select-row",
     );
 
-    if (!(element instanceof HTMLInputElement)) {
-      return;
-    }
-
-    const parentNode = element.parentNode;
-    if (!(parentNode instanceof HTMLDivElement)) {
-      return;
-    }
+    if (!(checkbox instanceof HTMLInputElement)) return;
 
-    const key = element.parentNode.getAttribute(
-      "data-monster-insert-reference",
-    );
+    const parentNode = checkbox.parentNode;
+    if (!(parentNode instanceof HTMLDivElement)) return;
 
+    const key = parentNode.getAttribute("data-monster-insert-reference");
     const row = self.getGridElements(
       `[data-monster-insert-reference="${key}"]`,
     );
-
     const index = key.split("-").pop();
 
-    if (element.checked) {
-      row.forEach((col) => {
-        col.classList.add("selected");
-      });
-
-      fireCustomEvent(self, "monster-datatable-row-selected", {
-        index: index,
-      });
+    if (checkbox.checked) {
+      row.forEach((col) => col.classList.add("selected"));
+      fireCustomEvent(self, "monster-datatable-row-selected", { index });
     } else {
-      row.forEach((col) => {
-        col.classList.remove("selected");
-      });
-
-      fireCustomEvent(self, "monster-datatable-row-deselected", {
-        index: index,
-      });
+      row.forEach((col) => col.classList.remove("selected"));
+      fireCustomEvent(self, "monster-datatable-row-deselected", { index });
     }
 
     fireCustomEvent(this, "monster-datatable-selection-changed", {});
 
     const rows = self.getGridElements(`[data-monster-role="select-row"]`);
-    const allSelected = Array.from(rows).every((row) => row.checked);
+    const allSelected = Array.from(rows).every((r) => r.checked);
 
     const selectAll = this[gridHeadersElementSymbol].querySelector(
       `[data-monster-role="select-all"]`,
     );
 
+    // Row-Action-Buttons visible/invisible depending on selection
     getSlottedElements
       .call(this, "[data-monster-role=row-action-button]", "bar")
       .forEach((i, e) => {
         const selected = self.getSelectedRows();
         const mode = selected.length === 0 ? "hidden" : "visible";
-        if (e instanceof HTMLElement) {
-          e.style.visibility = mode;
-        }
+        if (e instanceof HTMLElement) e.style.visibility = mode;
       });
 
-    if (selectAll) {
-      selectAll.checked = allSelected;
-    }
+    if (selectAll) selectAll.checked = allSelected;
   };
 
   this[gridElementSymbol].addEventListener("click", selectRowCallback);
   this[gridElementSymbol].addEventListener("touch", selectRowCallback);
 
+  // --- Row Selection (all) ---
   const selectAllCallback = (event) => {
-    const element = findTargetElementFromEvent(
+    const toggle = findTargetElementFromEvent(
       event,
       "data-monster-role",
       "select-all",
     );
-    if (element) {
-      const mode = element.checked;
+    if (!toggle) return;
 
-      const rows = this.getGridElements(`[data-monster-role="select-row"]`);
-      rows.forEach((row) => {
-        row.checked = mode;
-      });
+    const mode = toggle.checked;
+    const rows = this.getGridElements(`[data-monster-role="select-row"]`);
+    rows.forEach((row) => {
+      row.checked = mode;
+    });
 
-      if (mode) {
-        fireCustomEvent(this, "monster-datatable-all-rows-selected", {});
-      } else {
-        fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
-      }
+    if (mode) {
+      fireCustomEvent(this, "monster-datatable-all-rows-selected", {});
+    } else {
+      fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
+    }
 
-      getSlottedElements
-        .call(this, "[data-monster-role=row-action-button]", "bar")
-        .forEach((i, e) => {
-          if (e instanceof HTMLElement) {
-            e.style.visibility = mode ? "visible" : "hidden";
-          }
-        });
+    getSlottedElements
+      .call(this, "[data-monster-role=row-action-button]", "bar")
+      .forEach((i, e) => {
+        if (e instanceof HTMLElement)
+          e.style.visibility = mode ? "visible" : "hidden";
+      });
 
-      fireCustomEvent(this, "monster-datatable-selection-changed", {});
-    }
+    fireCustomEvent(this, "monster-datatable-selection-changed", {});
   };
 
   this[gridHeadersElementSymbol].addEventListener("click", selectAllCallback);
@@ -1156,6 +1223,7 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
       orderTemplate = row.getAttribute("data-monster-order-template");
     }
 
+    const isResizable = this.getOption("features.resizable");
     const header = new Header();
     header.setInternals({
       field: field,
@@ -1168,14 +1236,26 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
       direction: direction,
       features: features,
       orderTemplate: orderTemplate,
+      resizable: isResizable,
     });
 
     headers.push(header);
   }
 
   this.setOption("headers", headers);
-  queueMicrotask(() => {
+  requestAnimationFrame(() => {
     storeOrderStatement.call(this, this.getOption("features.autoInit"));
+
+    const headerElements = this[gridHeadersElementSymbol].querySelectorAll(
+      "[data-monster-index]",
+    );
+    headerElements.forEach((cell) => {
+      const index = parseInt(cell.getAttribute("data-monster-index"), 10);
+      if (headers[index]) {
+        console.log("store initial width for header", index, cell.offsetWidth);
+        headers[index].setInternal("initialWidth", cell.offsetWidth);
+      }
+    });
   });
 }
 

package/source/components/datatable/style/datatable.pcss

@@ -50,7 +50,6 @@
         align-items: center;
         gap: 2rem;
     }
-
 }
 
 :host {
@@ -58,6 +57,12 @@
     margin: 0;
 }
 
+
+:host(.is-resizing) {
+    cursor: col-resize;
+    user-select: none;
+}
+
 ::slotted(.monster-button-group) {
     margin: 0 !important;
     flex-grow: 2;
@@ -81,7 +86,6 @@
         line-height: 1.2;
         border-bottom: 1px dashed var(--monster-theme-control-border-color);
         box-sizing: border-box;
-
         min-width: 0;
         overflow: auto;
 
@@ -129,13 +133,11 @@
     }
 
     @for $i from 0 to 500 {
-        &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)
-
-    ] {
-        color: var(--monster-theme-control-hover-color);
-        background-color: var(--monster-theme-control-hover-bg-color);
-        box-sizing: border-box;
-    }
+        &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)] {
+            color: var(--monster-theme-control-hover-color);
+            background-color: var(--monster-theme-control-hover-bg-color);
+            box-sizing: border-box;
+        }
     }
 
     & .monster-form {
@@ -143,7 +145,6 @@
         flex-direction: column;
         gap: 0.5rem;
     }
-
 }
 
 
@@ -162,7 +163,6 @@
             display: none;
         }
     }
-
 }
 
 [data-monster-role=datatable-headers] {
@@ -172,13 +172,19 @@
         @mixin text;
         font-weight: bold;
         padding: 0.3rem 0.2rem;
+        position: relative;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 100%;
+        justify-content: flex-start; 
+        overflow: visible; 
+        padding-right: 28px;
+
+        & a[data-monster-sortable] {
+            flex-grow: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
         & a[data-monster-sortable]:after {
             content: "";
@@ -212,8 +218,38 @@
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
             mask-size: cover;
         }
+        
+      & .resize-handle {
+      position: absolute;
+      right: 0;               
+      top: 0;
+      bottom: 0;
+      width: 20px;           
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      opacity: 1; 
+      transition: opacity 0.15s ease-in-out, transform 0.05s ease-in-out;
+      pointer-events: auto;
     }
 
+    & .resize-handle svg {
+      width: 14px;        
+      height: 20px;
+      pointer-events: none; 
+      transform: scale(1.4);
+    }
+
+    &:hover .resize-handle {
+      opacity: 1;
+    }
+
+    & .resize-handle:active {
+      transform: scale(1.05);
+    }
+    }
 
     & .flex-start {
         justify-content: flex-start;
@@ -226,7 +262,6 @@
     & .flex-center {
         justify-content: center;
     }
-
 }
 
 a[data-monster-role="copy-all"] {
@@ -271,7 +306,6 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
 [data-monster-role="control"].small {
 
-
     & [data-monster-role="datatable-headers"] {
         display: none;
     }
@@ -292,12 +326,9 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         }
 
         @for $i from 0 to 500 {
-            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
-
-        ] {
-            /*background-color: var(--monster-bg-color-selection-2);*/
-            box-sizing: border-box;
-        }
+            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)] {
+                box-sizing: border-box;
+            }
         }
     }
 
@@ -305,10 +336,8 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         display: flex;
         flex-direction: column !important;
     }
-
 }
 
-
 [data-monster-role=control].small {
 
     ::slotted(.monster-button-group) {
@@ -331,16 +360,5 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         &.center {
             justify-content: flex-start;
         }
-
     }
-
-}
-
-
-
-
-
-
-
-
-
+}