@castlabs/ui 7.22.0 → 7.23.1

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

@@ -17,9 +17,9 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
 
   export function clFormReset (id: string, fields?: any[]): void
   export function clFormFieldReset (ref: any, oldValue: any): void
-  export function clFormIsValid (id: string): boolean
-  export function clFormIsValidAsync (id: string): Promise<boolean>
-  export function clFormFieldFocusFirstInvalid (id: string): void
+  export function clFormIsValid (id: string, moreSelectors?: string[], triggerSelectors?: string[]): boolean
+  export function clFormIsValidAsync (id: string, moreSelectors?: string[], triggerSelectors?: string[]): Promise<boolean>
+  export function clFormFieldFocusFirstInvalid (id: string, moreSelectors?: string[]): void
   export function clFormAutofocus (id: string): void
 
   export function clFormatFilesize (bytes: number): string
@@ -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.22.0 */
+/* @castlabs/ui v7.23.1 */
 
 /*!
   * 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) {
+    resizer.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,53 @@ const mouseup = mouseup => {
   }
 }
 
+const mouseclick = click => {
+  if (click.detail === 2) {
+    const table = click.target?.closest('table')
+    if (!table) return
+    click.preventDefault()
+
+    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++
@@ -1120,9 +1165,11 @@ export function clFormFieldReset (ref, oldValue) {
  * Will autofocus the first wrong input (if any).
  *
  * @param {string} id ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
+ * @param {string[]} moreTriggers Optional additional classes mark elements that should be focused & blurred to trigger validation.
  * @return {boolean} True if form is OK.
  */
-export function clFormIsValid (id) {
+export function clFormIsValid (id, moreSelectors = [], moreTriggers = []) {
   const form = document.querySelector(`#${id}`)
   if (!form) {
     // not a form at all
@@ -1133,16 +1180,18 @@ export function clFormIsValid (id) {
   // force trigger validation
   // as some inputs like the ace editor do custom validation based on events,
   // we fire various event/element/class combinations to make sure custom handlers run.
-  document.querySelectorAll(`#${id} input, #${id} .form-control`).forEach(input => {
-    input.focus()
-    input.blur()
-  })
+  document
+    .querySelectorAll(clSubselectorQuery(`#${id}`, ['input', '.form-control', ...moreTriggers]))
+    .forEach(input => {
+      input.focus()
+      input.blur()
+    })
 
   if (
     form.checkValidity() === false ||
-    document.querySelector(`#${id} :invalid, #${id} .invalid`)
+    document.querySelector(clSubselectorQuery(`#${id}`, [':invalid', '.invalid', ...moreSelectors]))
   ) {
-    clFormFieldFocusFirstInvalid(id)
+    clFormFieldFocusFirstInvalid(id, moreSelectors)
     return false
   }
 
@@ -1155,9 +1204,11 @@ export function clFormIsValid (id) {
  * Useful for complicated inputs like ACE editor.
  *
  * @param {string} id ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
+ * @param {string[]} moreTriggers Optional additional classes mark elements that should be focused & blurred to trigger validation.
  * @return {boolean} Promise of true if form is OK.
  */
-export async function clFormIsValidAsync (id) {
+export async function clFormIsValidAsync (id, moreSelectors = [], moreTriggers = []) {
   const form = document.getElementById(id)
   if (!form) {
     // not a form at all
@@ -1168,10 +1219,12 @@ export async function clFormIsValidAsync (id) {
   // force trigger validation
   // as some inputs like the ace editor do custom validation based on events,
   // we fire various event/element/class combinations to make sure custom handlers run.
-  document.querySelectorAll(`#${id} input, #${id} .form-control`).forEach(input => {
-    input.focus()
-    input.blur()
-  })
+  document
+    .querySelectorAll(clSubselectorQuery(`#${id}`, ['input', '.form-control', ...moreTriggers]))
+    .forEach(input => {
+      input.focus()
+      input.blur()
+    })
   document.querySelectorAll(`#${id} .ace_editor`).forEach(input => {
     input.click()
   })
@@ -1181,9 +1234,11 @@ export async function clFormIsValidAsync (id) {
     setTimeout(() => {
       if (
         form.checkValidity() === false ||
-        document.querySelector(`#${id} :invalid, #${id} .invalid`)
+        document.querySelector(
+          clSubselectorQuery(`#${id}`, [':invalid', '.invalid', ...moreSelectors])
+        )
       ) {
-        clFormFieldFocusFirstInvalid(id)
+        clFormFieldFocusFirstInvalid(id, moreSelectors)
         resolve(false)
         return
       }
@@ -1208,12 +1263,23 @@ export function clFormAutofocus (formId) {
  * Set the focus in the first invalid field of the given form (if any).
  *
  * @param {string} formId HTML ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
  */
-export function clFormFieldFocusFirstInvalid (formId) {
-  const invalid = document.querySelector(`#${formId} :invalid, #${formId} .invalid`)
+export function clFormFieldFocusFirstInvalid (formId, moreSelectors = []) {
+  const invalid = document.querySelector(
+    clSubselectorQuery(`#${formId}`, [':invalid', '.invalid', ...moreSelectors])
+  )
   invalid?.focus()
 }
 
+export function clSubselectorQuery (main, subselectors) {
+  const selectors = []
+  for (const subselector of subselectors) {
+    selectors.push(`${main} ${subselector}`)
+  }
+  return selectors.join(', ')
+}
+
 // -----------------------------------------------------------------------------
 // --- formatters --------------------------------------------------------------
 // -----------------------------------------------------------------------------