@dataloop-ai/components 0.19.211 → 0.19.213

package/package.json

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

package/src/assets/globals.scss

@@ -58,7 +58,7 @@ body {
     }
 }
 
-/* Inserting a collapsed row between two flex items will make 
+/* Inserting a collapsed row between two flex items will make
  * the flex item that comes after it break to a new row */
 .break {
     flex-basis: 100%;
@@ -73,6 +73,19 @@ body {
 
 .scroll {
     overflow: auto;
+    scrollbar-color: transparent transparent; /* For Firefox */
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
+
+.scroll:hover {
+    scrollbar-color: var(--dl-color-lighter);
+}
+
+.scroll:hover::-webkit-scrollbar-thumb {
+    background-color: var(--dl-color-lighter);
 }
 
 .scroll,

package/src/components/basic/DlChip/DlChip.vue

@@ -196,7 +196,7 @@ export default defineComponent({
     vertical-align: middle;
     font-size: var(--dl-font-size-body);
     line-height: 12px;
-    border-radius: 2px;
+    border-radius: 2px !important;
     padding: var(--dl-chip-padding);
     outline: 0;
     min-width: 18px;

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

@@ -17,7 +17,7 @@
                                 ? defaultIconColor
                                 : statusIconColor || defaultIconColor
                         "
-                        size="16px"
+                        size="12px"
                         :inline="false"
                     />
                 </div>
@@ -52,25 +52,24 @@
                 </div>
                 <dl-tooltip
                     v-if="!focused"
-                    :style="`
-                        background-color: var(--dl-color-panel-background);
-                        border: 1px solid var(--dl-color-separator);
-                        color: var(--dl-color-darker);
-                        padding: 16px;
-                    `"
+                    border="1px solid var(--dl-color-separator)"
+                    background-color="dl-color-panel-background"
+                    color="dl-color-darker"
                     max-width="340px"
                     anchor="bottom left"
                     self="top left"
                 >
-                    <div class="tooltip-title">
-                        <dl-icon :icon="defaultIcon" />
-                        Smart Search Query
-                    </div>
-                    <div class="tooltip-subtitle">
-                        A powerful and flexible search. Allows users to
-                        construct queries based on specific field selection
-                        following schema rules. Does not enable free text
-                        search.
+                    <div style="padding: 10px">
+                        <div class="tooltip-title">
+                            <dl-icon :icon="defaultIcon" />
+                            Smart Search Query
+                        </div>
+                        <div class="tooltip-subtitle">
+                            A powerful and flexible search. Allows users to
+                            construct queries based on specific field selection
+                            following schema rules. Does not enable free text
+                            search.
+                        </div>
                     </div>
                 </dl-tooltip>
             </div>
@@ -1161,8 +1160,8 @@ export default defineComponent({
     &__status-icon-wrapper {
         display: flex;
         line-height: 15px;
-        margin: 6px 8px 0px 0px;
-        align-items: flex-start;
+        margin: 3px 8px 0px 0px;
+        align-items: center;
         div:first-child {
             display: flex;
             align-items: center;

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

@@ -49,7 +49,10 @@
             @virtual-scroll="onVScroll"
         >
             <template #before>
-                <thead :colspan="colspanWithExpandableRow">
+                <thead
+                    :colspan="colspanWithExpandableRow"
+                    style="position: relative; z-index: 100"
+                >
                     <slot
                         v-if="!hideHeader"
                         name="header"
@@ -117,6 +120,7 @@
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
                                     :pagination="computedPagination"
+                                    :padding="`0 ${columnSpacing}`"
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span
@@ -337,6 +341,7 @@
                                     :style="col.tdStyle(props.item)"
                                     :no-hover="noHover"
                                     :col-index="colIndex"
+                                    :padding="`0 ${columnSpacing}`"
                                 >
                                     <slot
                                         v-bind="
@@ -379,7 +384,9 @@
                                                 ? `body-cell-row-actions`
                                                 : 'body-cell'
                                         "
-                                    />
+                                    >
+                                        <div style="width: 15px"></div>
+                                    </slot>
                                 </DlTd>
                             </DlTr>
                             <tr
@@ -426,7 +433,10 @@
 
         <div v-else ref="tableScroll" class="dl-table__middle scroll">
             <table ref="tableRef" class="dl-table" :class="additionalClasses">
-                <thead :colspan="colspanWithExpandableRow">
+                <thead
+                    :colspan="colspanWithExpandableRow"
+                    style="position: relative; z-index: 100"
+                >
                     <slot
                         v-if="!hideHeader"
                         name="header"
@@ -494,7 +504,9 @@
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
                                     :pagination="computedPagination"
-                                    :padding="isTreeTable ? '0' : '0 10px'"
+                                    :padding="
+                                        isTreeTable ? '0' : `0 ${columnSpacing}`
+                                    "
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span
@@ -516,7 +528,9 @@
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
                                 no-tooltip
-                                :padding="isTreeTable ? '0' : '0 10px'"
+                                :padding="
+                                    isTreeTable ? '0' : `0 ${columnSpacing}`
+                                "
                             >
                                 <slot
                                     name="header-cell-visible-columns-button"
@@ -617,6 +631,7 @@
                         ref="tbody"
                         tag="tbody"
                         class="nested-table dl-virtual-scroll__content"
+                        style="position: relative; z-index: 90"
                         v-bind="{
                             onEnd: handleSortableEvent
                         }"
@@ -732,6 +747,7 @@
                                         :style="col.tdStyle(row)"
                                         :col-index="colIndex"
                                         :no-tooltip="col.ignoreTooltip"
+                                        :padding="`0 ${columnSpacing}`"
                                     >
                                         <slot
                                             v-bind="
@@ -758,6 +774,7 @@
                                         key="visibleColumnsSlot"
                                         class="visible-columns-justify-end"
                                         no-tooltip
+                                        :padding="`0 ${columnSpacing}`"
                                     >
                                         <slot
                                             v-bind="
@@ -774,7 +791,9 @@
                                                     ? `body-cell-row-actions`
                                                     : 'body-cell'
                                             "
-                                        />
+                                        >
+                                            <div style="width: 15px"></div>
+                                        </slot>
                                     </DlTd>
                                 </DlTr>
                                 <tr
@@ -1180,6 +1199,14 @@ export default defineComponent({
             type: Array as PropType<DlTableColumn[]>,
             default: (): [] => []
         },
+        /**
+         * Padding of TD and TH elements
+         */
+        columnSpacing: {
+            type: String,
+            default: '10px',
+            required: false
+        },
         /**
          * Props for the empty state component
          */
@@ -1397,13 +1424,18 @@ export default defineComponent({
                 tableRef.value ||
                 virtScrollRef.value.rootRef.querySelector('table') ||
                 (document.querySelector('table.dl-table') as HTMLTableElement)
-
+            const cols = getVisibleColumnsState()
+                ? props.columns.filter((col: any) =>
+                      getVisibleColumnsState().includes(col.name)
+                  )
+                : props.columns
             nextTick(() => {
                 setAllColumnWidths(
                     tableEl,
-                    columns.value as DlTableColumn[],
+                    cols as DlTableColumn[],
                     props.stickyColumns,
-                    props.fitAllColumns
+                    props.fitAllColumns,
+                    !!props.visibleColumns
                 )
             })
             return tableEl
@@ -1415,7 +1447,6 @@ export default defineComponent({
                 'virtual-scroll-content-update',
                 updateTableSizing
             )
-            if (visibleColumns.value) return
             if (resizable.value) {
                 applyResizableColumns(tableEl, vm)
             }
@@ -1443,16 +1474,20 @@ export default defineComponent({
                     (document.querySelector(
                         'table.dl-table'
                     ) as HTMLTableElement)
-
+                const cols = getVisibleColumnsState()
+                    ? props.columns.filter((col: any) =>
+                          getVisibleColumnsState().includes(col.name)
+                      )
+                    : props.columns
                 nextTick(() => {
                     setAllColumnWidths(
                         tableEl,
-                        props.columns as DlTableColumn[],
+                        cols as DlTableColumn[],
                         props.stickyColumns,
-                        props.fitAllColumns
+                        props.fitAllColumns,
+                        !!props.visibleColumns
                     )
                 })
-                if (visibleColumns.value) return
 
                 if (resizable.value) {
                     applyResizableColumns(tableEl, vm)
@@ -1471,7 +1506,6 @@ export default defineComponent({
         )
 
         watch(resizable, () => {
-            if (visibleColumns.value) return
             applyResizableColumns(tableEl, vm)
         })
 

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

@@ -71,7 +71,12 @@ export default defineComponent({
 
             if (props.bgColor) {
                 styles = styles.concat(
-                    `background: ${getColor(props.bgColor, '')}`
+                    `background: ${getColor(props.bgColor, '')};`
+                )
+            }
+            if (vm.vnode.key === 'visibleColumnsSlot') {
+                styles = styles.concat(
+                    'position: sticky; right: 0; z-index: 101;'
                 )
             }
             return styles

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

@@ -136,8 +136,11 @@ export default defineComponent({
 
         if (!column.value || colIndex.value === -1) {
             return {
-                headerStyle: '',
-                thClasses: '',
+                headerStyle:
+                    vm.vnode.key === 'visibleColumnsSlot'
+                        ? [{ position: 'sticky', right: 0, zIndex: 101 }]
+                        : null,
+                thClasses: null,
                 isSortable: false,
                 hasEllipsis: false,
                 onClick: onClickFn,

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

@@ -199,6 +199,7 @@
     }
 
     .dl-td {
+        background-color: var(--dl-color-panel-background);
         &--no-hover {
             &:hover {
                 background-color: none !important;
@@ -211,7 +212,7 @@
     }
 
     tbody {
-        tr.selected {
+        tr.selected td {
             background-color: var(--dl-color-fill);
         }
 
@@ -336,6 +337,7 @@
 
     &__bottom--nodata {
         color: var(--dl-color-lighter);
+        padding: 25px;
 
         .dl-table__control {
             justify-content: center;

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -1,12 +1,6 @@
 <template>
-    <dl-teleport
-        v-if="portalIsActive"
-        :to="portalEl"
-    >
-        <transition
-            name="fade"
-            appear
-        >
+    <dl-teleport v-if="portalIsActive" :to="portalEl">
+        <transition name="fade" appear>
             <div
                 v-if="showing"
                 :id="uuid"
@@ -141,6 +135,10 @@ export default defineComponent({
         triggerPercentage: {
             type: Number,
             default: 1
+        },
+        border: {
+            type: String,
+            default: null
         }
     },
     setup(props, { emit, attrs }) {
@@ -360,7 +358,7 @@ export default defineComponent({
 
         function configureScrollTarget() {
             if (anchorEl.value !== null || props.scrollTarget) {
-                (localScrollTarget as Ref<any>).value = getScrollTarget(
+                ;(localScrollTarget as Ref<any>).value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget as Element
                 )
@@ -414,7 +412,8 @@ export default defineComponent({
                     '--dl-tooltip-text-align': props.textAlignment,
                     '--dl-tooltip-text-transform': props.capitalized
                         ? 'capitalize'
-                        : 'none'
+                        : 'none',
+                    '--dl-tooltip-border': props.border
                 }
             ] as any
         }
@@ -435,6 +434,7 @@ export default defineComponent({
     line-height: 16px;
     color: var(--dl-tooltip-color);
     background: var(--dl-tooltip-background);
+    border: var(--dl-tooltip-border);
     border-radius: 2px;
     text-transform: none;
     font-family: 'Roboto', sans-serif;

package/src/components/shared/DlVirtualScroll/styles/dl-virtual-scroll-styles.scss

@@ -7,6 +7,8 @@
     &__content {
         outline: none;
         contain: content;
+        position: relative;
+        z-index: 90;
 
         & > * {
             overflow-anchor: none;

package/src/utils/table-columns.ts

@@ -126,23 +126,29 @@ function addStickyPosition(
     element: HTMLElement,
     position: TableStickyPosition,
     index: number,
-    totalElements: number
+    totalElements: number,
+    hasEditableColumns?: boolean
 ) {
     if (position === 'both')
         position =
             index === 0 ? 'first' : index === totalElements - 1 ? 'last' : ''
     element.style.left = position === 'first' ? '0' : ''
-    element.style.right = position === 'last' ? '0' : ''
+    if (position === 'last') {
+        if (hasEditableColumns) {
+            element.style.right = '20px'
+        } else {
+            element.style.right = '0'
+        }
+    }
 }
 
 export function setAllColumnWidths(
     table: HTMLElement,
     columns: DlTableColumn[],
     stickyColumns: TableStickyPosition,
-    fitAllColumns: boolean
+    fitAllColumns: boolean,
+    hasEditableColumns?: boolean
 ) {
-    const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
-    if (!hasWidth) return
     columns.forEach((col, i) => {
         browseNestedNodes(
             table,
@@ -153,12 +159,11 @@ export function setAllColumnWidths(
                 if (!fitAllColumns && targetEl.tagName === 'TH') {
                     // Calculate the width for the column
                     const width =
-                        (col.width ??
-                            targetEl.querySelector('.inner-th').scrollWidth) +
+                        targetEl.querySelector('.inner-th').scrollWidth +
                         getIconWidth(targetEl) +
                         35
                     // Set the width of the column
-                    targetEl.style.width =
+                    targetEl.style.minWidth =
                         typeof col.width === 'number' || !col.width
                             ? `${width}px`
                             : col.width
@@ -177,7 +182,8 @@ export function setAllColumnWidths(
                         targetEl,
                         stickyColumns,
                         i,
-                        columns.length
+                        columns.length,
+                        hasEditableColumns
                     )
                 }
             }