@castlabs/ui 7.21.2 → 7.23.0

package/dist/castlabs-ui.module.d.ts

@@ -43,20 +43,21 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
     order?: string,
     caseSensitive?: boolean
   ): object[]
-  export function clTableSorter (
+  export type ClTableSorter<Type> = {
+    col: number
+    order: 'ASC' | 'DESC' | 'NONE'
+    set: (col: number, order: string) => void
+    get: (col: number) => string
+    sorted: Type[]
+    sorter: () => any
+    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
+  }
+  export function clTableSorter<Type> (
     sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
     initialCol?: number,
     initialOrder?: string
-  ): any
-  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
-    col: number,
-    order: 'ASC' | 'DESC' | 'NONE',
-    set: (col: number, order: string) => void,
-    get: (col: number) => string,
-    sorted: Type[],
-    sorter: () => any,
-    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
-  }
+  ): ClTableSorter<Type>
+  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): ClTableSorter<Type>
   export function clDebounce (callback: any, ms?: number, key?: string): void
   export function clSanitizeId (id: string): string
 

package/dist/castlabs-ui.module.js

@@ -1,4 +1,4 @@
-/* @castlabs/ui v7.21.2 */
+/* @castlabs/ui v7.23.0 */
 
 /*!
   * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -216,9 +216,9 @@ function clMatomoSetup (siteId = 1, domain = 'castlabs.com') {
   })()
 }
 
-export function clTableSetupResize (id) {
+export function clTableSetupResize (id, auto = false) {
   document.querySelectorAll(`#${id} .cl-resizer`).forEach(resizer => {
-    clTableSetResizeListeners(resizer)
+    clTableSetResizeListeners(resizer, auto)
   })
 }
 
@@ -249,12 +249,15 @@ export function clTableSortStatic (id, col) {
 let lastX = 0
 let nextCol = null
 
-function clTableSetResizeListeners (resizer) {
+function clTableSetResizeListeners (resizer, auto = false) {
   lastX = 0
   nextCol = null
   resizer.addEventListener('mousedown', mousedown)
   document.addEventListener('mousemove', mousemove)
   document.addEventListener('mouseup', mouseup)
+  if (auto) {
+    document.addEventListener('click', mouseclick)
+  }
 }
 
 const mousedown = mousedown => {
@@ -269,28 +272,25 @@ const mousemove = mousemove => {
     const delta = mousemove.pageX - lastX
     lastX = mousemove.pageX
 
-    const colIndex = getColIndex(nextCol)
+    const colIndex = getColIndex(nextCol) - 1
     const id = mousemove.target?.closest('table')?.id ?? 'unknown'
     const nowrap = !!document.querySelector(`#${id}.cl-table-nowrap`) // are we in nowrap mode?
     if (nowrap) {
-      // in nowrap mode we only adjust the first col
-      document
-        .querySelectorAll(
-          `#${id} tr th:nth-child(${colIndex - 1})` // , #${id} tr td:nth-child(${colIndex - 1})
-        )
-        .forEach(cel => {
-          const width =
-            (cel.style.maxWidth === '' ? cel.offsetWidth : parseInt(cel.style.maxWidth)) + delta
-          cel.style.width = (width > 32 ? width : 32) + 'px'
-          cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
-        })
+      // in nowrap mode we only adjust the thead col
+      document.querySelectorAll(`#${id} tr th:nth-child(${colIndex})`).forEach(cel => {
+        const width =
+          (cel.style.maxWidth === '' ? cel.offsetWidth : parseInt(cel.style.maxWidth)) + delta
+        cel.style.width = (width > 32 ? width : 32) + 'px'
+        cel.style.maxWidth = (width > 32 ? width : 32) + 'px'
+        cel.clWidth = 0
+      })
     } else {
       // in regular mode we shrink one and enlarge the other col
-      document.querySelectorAll(`#${id} tr td:nth-child(${colIndex - 1})`).forEach(cel => {
+      document.querySelectorAll(`#${id} tr td:nth-child(${colIndex})`).forEach(cel => {
         const width = cel.offsetWidth + delta
         cel.style.width = (width > 32 ? width : 32) + 'px'
       })
-      document.querySelectorAll(`#${id} tr td:nth-child(${colIndex})`).forEach(cel => {
+      document.querySelectorAll(`#${id} tr td:nth-child(${colIndex + 1})`).forEach(cel => {
         const width = cel.offsetWidth - delta
         cel.style.width = (width > 32 ? width : 32) + 'px'
       })
@@ -306,8 +306,52 @@ const mouseup = mouseup => {
   }
 }
 
+const mouseclick = click => {
+  if (click.detail === 2) {
+    click.preventDefault()
+
+    const table = click.target?.closest('table')
+    const id = table?.id ?? 'unknown'
+    const th = click.target?.closest('th')
+    const colIndex = Array.from(th.parentElement.children).indexOf(th)
+
+    // set all to something small so scrollWidth is correct for all-smaller items (head only)
+    document.querySelectorAll(`#${id} th:nth-child(${colIndex})`).forEach(cel => {
+      cel.style.width = '1px'
+      cel.style.maxWidth = '1px'
+    })
+
+    // iterate over all rows and col index (thead + tbody), find max cel width
+    let maxCellWidth = 0
+    document
+      .querySelectorAll(`#${id} th:nth-child(${colIndex}), #${id} td:nth-child(${colIndex})`)
+      .forEach(cel => {
+        if ((cel.colSpan ?? 1) === 1) {
+          const cellWidth = cel.scrollWidth
+          maxCellWidth = cellWidth > maxCellWidth ? cellWidth : maxCellWidth
+        }
+      })
+
+    // set all outer width to inner (head only)
+    document.querySelectorAll(`#${id} th:nth-child(${colIndex})`).forEach(cel => {
+      if (cel.clWidth === maxCellWidth) {
+        // revert to un-maximized
+        cel.clWidth = 0
+        cel.style.removeProperty('width')
+        cel.style.removeProperty('max-width')
+      } else {
+        // maximize
+        const padding = 8 * 2
+        cel.clWidth = maxCellWidth
+        cel.style.width = `${cel.clWidth + padding}px`
+        cel.style.maxWidth = `${cel.clWidth + padding}px`
+      }
+    })
+  }
+}
+
 function getColIndex (col) {
-  // calculate index of a col in a row
+  // calculate index of a col in a row, 1-based
   let colNo = 0
   while (col) {
     colNo++