@dataloop-ai/components 0.19.19 → 0.19.21

package/package.json

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

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -601,6 +601,7 @@ export default defineComponent({
                 showDatePicker.value = false
                 showSuggestions.value = true
                 datePickerSelection.value = null
+                setInputValue(searchQuery.value + ' ', { noEmit: true })
                 setCaretAtTheEnd(input.value)
                 return
             }

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/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
             }
         )
     })