@dataloop-ai/components 0.19.18 → 0.19.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.18",
+  "version": "0.19.20",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTable/DlTable.vue

@@ -414,6 +414,7 @@
             class="dl-table__middle scroll"
         >
             <table
+                ref="tableRef"
                 class="dl-table"
                 :class="additionalClasses"
             >
@@ -1190,6 +1191,7 @@ export default defineComponent({
         const getTableKey = () => tableKey.value
 
         const rootRef = ref<HTMLDivElement>(null)
+        const tableRef = ref<HTMLTableElement>(null)
         const virtScrollRef = ref(null)
         const hasVirtScroll = computed<boolean>(
             () => virtualScroll.value === true
@@ -1313,9 +1315,9 @@ export default defineComponent({
         })
 
         onMounted(() => {
-            tableEl = document.querySelector(
-                'table.dl-table'
-            ) as HTMLTableElement
+            tableEl =
+                tableRef.value ||
+                (document.querySelector('table.dl-table') as HTMLTableElement)
             nextTick(() => {
                 setAllColumnWidths(
                     tableEl,
@@ -1346,6 +1348,14 @@ export default defineComponent({
                     applyResizableColumns(tableEl, vm)
                 }
 
+                nextTick(() => {
+                    setAllColumnWidths(
+                        tableRef.value,
+                        props.columns as DlTableColumn[],
+                        props.fitAllColumns
+                    )
+                })
+
                 if (hasDraggableColumns.value === true) {
                     applyDraggableColumns(
                         tableEl,
@@ -1366,11 +1376,13 @@ export default defineComponent({
         watch(
             columns,
             (newColumns) => {
-                setAllColumnWidths(
-                    rootRef.value,
-                    newColumns as DlTableColumn[],
-                    props.fitAllColumns
-                )
+                nextTick(() => {
+                    setAllColumnWidths(
+                        tableRef.value,
+                        newColumns as DlTableColumn[],
+                        props.fitAllColumns
+                    )
+                })
             },
             {
                 flush: 'post'
@@ -1927,7 +1939,8 @@ export default defineComponent({
             handleVisibleColumnsUpdate,
             computedVisibleCols,
             totalItemsCount,
-            showRowActions
+            showRowActions,
+            tableRef
         }
     }
 })

package/src/components/compound/DlTable/components/DlTh.vue

@@ -15,7 +15,10 @@
             <slot />
         </dl-tooltip>
         <slot />
-        <span class="th-icons">
+        <span
+            class="th-icons"
+            :style="{ top: props?.dense ? '5px' : '10px' }"
+        >
             <dl-icon
                 v-if="hasHint"
                 icon="icon-dl-info"

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -9,7 +9,6 @@
     }
 
     .inner-th {
-        max-width: 70%;
         display: inline-block;
         overflow: hidden;
         margin-right: 5px;
@@ -18,7 +17,6 @@
     .th-icons {
         display: flex;
         align-items: center;
-        top: 10px;
         right: 0;
         position: absolute;
     }

package/src/demos/DlTableDemo.vue

@@ -477,7 +477,6 @@ const columns = [
         field: 'name',
         sortable: true,
         textTransform: 'uppercase',
-        width: 100,
         hint: 'test hint'
     },
     {

package/src/hooks/use-suggestions.ts

@@ -465,7 +465,8 @@ const isValidBoolean = (str: string) => {
 const isValidString = (str: string) => {
     const match = str.match(/(?<=\")(.*?)(?=\")|(?<=\')(.*?)(?=\')/)
     if (!match) return false
-    return match[0] === removeQuotes(str.trim())
+    const trimmed = str.trim()
+    return match[0] === trimmed.substring(1, trimmed.length - 1)
 }
 
 const getOperatorByDataType = (dataType: string) => {
@@ -595,12 +596,60 @@ const isNextCharSpace = (input: string, str: string) => {
 const matchStringEnd = (input: string, str: string) =>
     input.lastIndexOf(str + '" ') > -1 || input.lastIndexOf(str + "' ") > -1
 
-export const removeBrackets = (str: string) => {
+const removeAllBrackets = (str: string) => {
     return str.replace(/\(/g, '').replace(/\)/g, '')
 }
 
-const removeQuotes = (str: string) => {
-    return str.replaceAll('"', '').replaceAll("'", '')
+export const removeBrackets = (str: string) => {
+    const quotesAt = []
+    for (let i = 0; i < str.length; i++) {
+        if (/['"]/.test(str.charAt(i))) {
+            quotesAt.push(i)
+        }
+    }
+
+    let result = removeAllBrackets(str.substring(0, quotesAt[0]))
+
+    let skipFrom = 0;
+        let skipTo = 1
+    while (quotesAt[skipFrom] !== undefined) {
+        // skip as far as isValidString fails
+        while (
+            !isValidString(
+                str.substring(
+                    quotesAt[skipFrom],
+                    (quotesAt[skipTo] || str.length) + 1
+                )
+            )
+        ) {
+            skipTo++
+            if (!quotesAt[skipTo]) break
+        }
+
+        // this is either unifished invalid string or finished valid string - keep it as is
+        result += str.substring(
+            quotesAt[skipFrom],
+            (quotesAt[skipTo] || str.length) + 1
+        )
+
+        if (quotesAt[skipTo]) {
+            // there might still be something after the string
+            skipFrom = skipTo + 1
+            result += removeAllBrackets(
+                str.substring(
+                    quotesAt[skipTo] + 1,
+                    quotesAt[skipFrom] || str.length
+                )
+            )
+
+            skipTo = skipFrom + 1
+        } else {
+            // there is nothing left
+            break
+        }
+    }
+
+    return result
 }
 
 const getValueSuggestions = (dataType: string | string[], operator: string) => {

package/src/utils/table-columns.ts

@@ -3,7 +3,7 @@ import { DlTableColumn } from '../types'
 import { browseNestedNodes } from './browse-nested-nodes'
 import { swapNodes } from './swap-nodes'
 
-const DEFAULT_COL_WIDTH = 10
+const DEFAULT_COL_WIDTH = 'fit-content'
 
 export function setColumnVerticalBorder(
     table: HTMLTableElement,
@@ -171,16 +171,6 @@ export function justifyMouseInsideTargetCell(
     )
 }
 
-function fitWidthToContent(el: HTMLElement, colWidth: number) {
-    if (el.tagName !== 'TH') return colWidth
-    const textNode = Array.from(el.querySelector('.inner-th').childNodes).find(
-        (node) => node.nodeType === 3
-    )
-    const fontSize = parseInt(window.getComputedStyle(el).fontSize)
-    const width = (textNode.nodeValue.length * fontSize) / 2
-    return width > 100 ? width : 100
-}
-
 export function setAllColumnWidths(
     table: HTMLElement,
     columns: DlTableColumn[],
@@ -196,8 +186,10 @@ export function setAllColumnWidths(
                 (el.tagName === 'TH' || el.tagName === 'TD') &&
                 parseInt(el.dataset.colIndex) === i,
             (targetEl) => {
-                const width = fitWidthToContent(targetEl, col.width)
-                targetEl.style.width = `${width ?? DEFAULT_COL_WIDTH}px` // then
+                targetEl.style.width = col.width
+                    ? `${col.width}px`
+                    : DEFAULT_COL_WIDTH
+                // then
             }
         )
     })