@dataloop-ai/components 0.19.136 → 0.19.138

package/package.json

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

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

@@ -75,6 +75,7 @@
             v-model="showDatePicker"
             :disabled="disabled"
             :offset="[0, 3]"
+            :toggle-key="'Escape'"
             @escapekey="onEscapeKey"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">

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

@@ -148,16 +148,16 @@
                                             }
                                         "
                                     >
-                                        <dl-ellipsis>
+                                        <dl-ellipsis v-if="fitAllColumns">
                                             {{ col.label }}
                                         </dl-ellipsis>
+                                        <span v-else> {{ col.label }} </span>
                                     </span>
                                 </DlTh>
                             </slot>
                             <DlTh
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
-                                :col-index="-1"
                                 no-tooltip
                                 padding="0"
                             >
@@ -390,7 +390,6 @@
                                     v-if="showRowActions"
                                     key="visibleColumnsSlot"
                                     class="visible-columns-justify-end"
-                                    :col-index="-1"
                                     no-tooltip
                                 >
                                     <slot
@@ -541,17 +540,18 @@
                                             }
                                         "
                                     >
-                                        <dl-ellipsis>
+                                        <dl-ellipsis v-if="fitAllColumns">
                                             {{ col.label }}
                                         </dl-ellipsis>
+                                        <span v-else> {{ col.label }} </span>
                                     </span>
                                 </DlTh>
                             </slot>
                             <DlTh
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
-                                :col-index="-1"
                                 no-tooltip
+                                style="width: 25px"
                                 :padding="isTreeTable ? '0' : '0 10px'"
                             >
                                 <slot
@@ -794,7 +794,6 @@
                                         v-if="showRowActions"
                                         key="visibleColumnsSlot"
                                         class="visible-columns-justify-end"
-                                        :col-index="-1"
                                         no-tooltip
                                     >
                                         <slot
@@ -884,10 +883,7 @@
                     v-bind="marginalsScope"
                 >
                     <div
-                        v-if="
-                            hasBotomSelectionBanner &&
-                                selectedRowsLabel(rowsSelectedNumber)
-                        "
+                        v-if="hasBotomSelectionBanner"
                         class="dl-table__control"
                     >
                         <div>
@@ -931,6 +927,7 @@ import {
     getCurrentInstance,
     ComputedRef,
     onMounted,
+    onBeforeUnmount,
     toRefs,
     nextTick,
     PropType
@@ -1246,7 +1243,7 @@ export default defineComponent({
             default: 'No data'
         },
         stickyColumns: {
-            type: Object as PropType<TableStickyPosition>,
+            type: String as PropType<TableStickyPosition>,
             default: null,
             validator: (value: string) =>
                 ['first', 'last', 'both'].includes(value)
@@ -1284,7 +1281,6 @@ export default defineComponent({
             noDataLabel,
             columns,
             fitAllColumns,
-            stickyColumns,
             resizable,
             hidePagination,
             hideSelectedBanner,
@@ -1417,7 +1413,7 @@ export default defineComponent({
             return computedPagination.value.rowsNumber || rows.value.length
         })
 
-        onMounted(() => {
+        const updateTableSizing = () => {
             tableEl =
                 tableRef.value ||
                 virtScrollRef.value.rootRef.querySelector('table') ||
@@ -1427,10 +1423,19 @@ export default defineComponent({
                 setAllColumnWidths(
                     tableEl,
                     columns.value as DlTableColumn[],
-                    stickyColumns.value,
-                    fitAllColumns.value
+                    props.stickyColumns,
+                    props.fitAllColumns
                 )
             })
+            return tableEl
+        }
+
+        onMounted(() => {
+            const tableEl = updateTableSizing()
+            window.addEventListener(
+                'virtual-scroll-content-update',
+                updateTableSizing
+            )
             if (visibleColumns.value) return
             if (resizable.value) {
                 applyResizableColumns(tableEl, vm)
@@ -1443,6 +1448,12 @@ export default defineComponent({
                 )
             }
         })
+        onBeforeUnmount(() => {
+            window.removeEventListener(
+                'virtual-scroll-content-update',
+                updateTableSizing
+            )
+        })
 
         watch(
             hasVirtScroll,
@@ -1458,8 +1469,8 @@ export default defineComponent({
                     setAllColumnWidths(
                         tableEl,
                         props.columns as DlTableColumn[],
-                        stickyColumns.value,
-                        fitAllColumns.value
+                        props.stickyColumns,
+                        props.fitAllColumns
                     )
                 })
                 if (visibleColumns.value) return
@@ -1498,8 +1509,8 @@ export default defineComponent({
                     setAllColumnWidths(
                         tableRef.value,
                         newColumns as DlTableColumn[],
-                        stickyColumns.value,
-                        fitAllColumns.value
+                        props.stickyColumns,
+                        props.fitAllColumns
                     )
                 })
             },

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

@@ -14,6 +14,14 @@
         z-index: 50;
     }
 
+    .dl-th {
+        z-index: 100;
+    }
+
+    .dl-th.sticky-col {
+        z-index: 101;
+    }
+
     .inner-th-wrapper {
         display: flex;
         align-items: center;
@@ -21,7 +29,13 @@
         gap: 6px;
         height: 34px;
         position: relative;
+        line-height: 34px;
+        &--left {
+            left: 0;
+            transform: none;
+        }
     }
+
     .inner-th {
         display: inline-block;
         flex: 0 1 auto;
@@ -31,11 +45,13 @@
         overflow: hidden;
         position: relative;
         line-height: 34px;
+
         &--left {
             left: 0;
             transform: none;
         }
     }
+
     .th-icons {
         display: flex;
         flex: 0 1 auto;
@@ -54,7 +70,7 @@
     border-collapse: separate;
     border-spacing: 0;
 
-    &__drag-icon > div {
+    &__drag-icon>div {
         transition: all ease-in 0.1s;
         opacity: 0;
     }
@@ -108,7 +124,7 @@
         height: 40px;
 
         &:not(.dl-tr--no-hover):hover {
-            .dl-table__drag-icon > div {
+            .dl-table__drag-icon>div {
                 opacity: 1;
             }
             td:not(.dl-td--no-hover) {
@@ -176,7 +192,7 @@
         }
     }
 
-    tbody > tr:not(.dl-tr--no-hover):hover > td:not(.dl-td--no-hover):before {
+    tbody>tr:not(.dl-tr--no-hover):hover>td:not(.dl-td--no-hover):before {
         content: '';
     }
 
@@ -206,6 +222,7 @@
     }
 
     &--no-wrap {
+
         th,
         td {
             white-space: nowrap;
@@ -215,12 +232,12 @@
     &__container {
         position: relative;
 
-        * > div:first-child {
+        *>div:first-child {
             border-top-left-radius: inherit;
             border-top-right-radius: inherit;
         }
 
-        * > div:last-child {
+        *>div:last-child {
             border-bottom-left-radius: inherit;
             border-bottom-right-radius: inherit;
         }
@@ -331,7 +348,7 @@
     td {
         border-color: var(--dl-color-separator);
 
-        & > label {
+        &>label {
             padding: 0;
         }
     }
@@ -465,6 +482,7 @@
     }
 
     .dl-table__select {
+
         .dl-field__control,
         .dl-field__native {
             min-height: 24px;
@@ -495,18 +513,20 @@
 
 .dl-table--horizontal-separator,
 .dl-table--cell-separator {
+
     thead th,
-    tbody tr:not(:last-child) > td {
+    tbody tr:not(:last-child)>td {
         border-bottom-width: 1px;
     }
 
-    tbody:not(:last-child) > tr > td {
+    tbody:not(:last-child)>tr>td {
         border-bottom-width: 1px;
     }
 }
 
 .dl-table--vertical-separator,
 .dl-table--cell-separator {
+
     td,
     th {
         border-left-width: 1px;

package/src/components/compound/DlTable/types.ts

@@ -44,7 +44,6 @@ export type DlTableColumn = {
     width?: number
     hint?: string
     sticky?: boolean
-    ignoreTooltip?: boolean
 }
 
 export type DlTableFilterMethod = (

package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts

@@ -846,6 +846,7 @@ export function useVirtualScroll({
             ['--dl-virtual-scroll-item-' + paddingSize]:
                 virtualScrollItemSizeComputed.value + 'px'
         }
+        const onUpdate = new Event('virtual-scroll-content-update')
 
         return [
             tag === 'tbody'
@@ -890,7 +891,10 @@ export function useVirtualScroll({
                     ref: styles ? 'grid' : contentRef,
                     tabindex: -1
                 },
-                content.flat()
+                (() => {
+                    window.dispatchEvent(onUpdate)
+                    return content.flat()
+                })()
             ),
 
             tag === 'tbody'

package/src/demos/DlTableDemo.vue

@@ -139,7 +139,6 @@
                     :virtual-scroll="vScroll"
                     style="height: 500px"
                     :rows-per-page-options="rowsPerPageOptions"
-                    :selected-rows-label="(val) => 'Selected rows ' + val"
                     @row-click="log"
                     @th-click="log"
                     @update:selected="updateSeleted"
@@ -257,10 +256,11 @@
             </div>
 
             <div style="margin-top: 100px">
-                With sticky columns: both
+                With sticky columns: both AND virtual scroll
                 <DlTable
                     :columns="[...tableColumns, ...tableColumns]"
                     sticky-columns="both"
+                    :virtual-scroll="true"
                     :rows="tableRows"
                     row-key="id"
                     style="height: 300px"
@@ -552,13 +552,8 @@
                     :visible-columns="
                         tableColumns.slice(0, -1).map((c) => c.name)
                     "
-                    loading
                     :resizable="true"
-                >
-                    <template #body-cell-row-actions>
-                        <dl-button label="ActionButton" />
-                    </template>
-                </DlTable>
+                />
             </div>
             <div>
                 <p>Virtual With editable columns</p>
@@ -753,7 +748,7 @@ const columns = [
         label: 'Calories',
         field: 'calories',
         sortable: true,
-        width: '50px'
+        width: '10%'
     },
     {
         name: 'fat',
@@ -1086,21 +1081,19 @@ export default defineComponent({
 
         const onScroll = ({ to, ref }: { to: number; ref: any }) => {
             const lastIndex = computedRows.value.length - 1
-
             if (
                 infiniteLoading.value !== true &&
                 nextPageNumber.value < lastPageNumber &&
                 to === lastIndex
             ) {
                 infiniteLoading.value = true
-
                 setTimeout(() => {
                     nextPageNumber.value++
                     nextTick(() => {
                         ref.refresh()
                         infiniteLoading.value = false
                     })
-                }, 500)
+                }, 1500)
             }
         }
 

package/src/utils/table-columns.ts

@@ -140,9 +140,6 @@ export function setAllColumnWidths(
     stickyColumns: TableStickyPosition,
     fitAllColumns: boolean
 ) {
-    const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
-    if (!hasWidth) return
-    table.style.tableLayout = 'fixed'
     columns.forEach((col, i) => {
         browseNestedNodes(
             table,
@@ -157,7 +154,6 @@ export function setAllColumnWidths(
                             targetEl.querySelector('.inner-th').scrollWidth) +
                         getIconWidth(targetEl) +
                         35
-
                     // Set the width of the column
                     targetEl.style.width =
                         typeof col.width === 'number' || !col.width