@dataloop-ai/components 0.19.104 → 0.19.106

package/package.json

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

package/src/assets/globals.scss

@@ -193,7 +193,7 @@ body {
     --dl-color-hover: #7b8cff;
     --dl-color-disabled: #b3b3b3;
     --dl-color-fill: #00000005;
-    --dl-color-fill-hover: #00000010;
+    --dl-color-fill-hover: #f8f8f8;
     --dl-color-separator: #e4e4e4;
     --dl-color-scrollbar: #e4e4e4;
     --dl-color-body-background: #eef1ff;
@@ -254,7 +254,7 @@ body {
     --dl-color-disabled: #ffffff40;
     --dl-color-fill: #ffffff05;
     --dl-color-fill-secondary: #f8f8f81a;
-    --dl-color-fill-hover: #ffffff10;
+    --dl-color-fill-hover: #454a50;
     --dl-color-separator: #ffffff26;
     --dl-color-body-background: #24282d;
     --dl-color-panel-background: #30363d;

package/src/components/basic/DlButton/DlButton.vue

@@ -536,6 +536,7 @@ export default defineComponent({
 .dl-button-container {
     display: inline-block;
     width: var(--dl-button-container-width);
+    height: fit-content;
 }
 
 .active-class {

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -75,7 +75,7 @@
         <dl-menu
             ref="menuRef"
             v-model="menuModel"
-            :class="contentClass"
+            :menu-class="contentClass"
             :style="contentStyle"
             :cover="cover"
             fit-container
@@ -136,7 +136,7 @@
         <dl-menu
             ref="menuRef"
             v-model="menuModel"
-            :class="contentClass"
+            :menu-class="contentClass"
             :style="contentStyle"
             :cover="cover"
             fit-container
@@ -551,6 +551,7 @@ export default defineComponent({
 </style>
 <style lang="scss">
 .dl-button-dropdown {
+    height: fit-content;
     .dl-button-content {
         line-height: unset;
     }

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

@@ -141,14 +141,16 @@
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span
-                                        class="inner-th"
+                                        :class="`inner-th ${`inner-th--${col.align}`}`"
                                         :style="
                                             col.width && {
                                                 maxWidth: 'calc(100% - 15px)'
                                             }
                                         "
                                     >
-                                        {{ col.label }}
+                                        <dl-ellipsis>
+                                            {{ col.label }}
+                                        </dl-ellipsis>
                                     </span>
                                 </DlTh>
                             </slot>
@@ -157,6 +159,7 @@
                                 key="visibleColumnsSlot"
                                 :col-index="-1"
                                 no-tooltip
+                                padding="0"
                             >
                                 <slot
                                     name="header-cell-visible-columns-button"
@@ -179,8 +182,8 @@
                                             flat
                                             icon="icon-dl-column"
                                             tooltip="Manage columns"
-                                            :disabled="isDataEmpty"
                                             padding="0"
+                                            :disabled="isDataEmpty"
                                         >
                                             <slot
                                                 name="header-cell-visible-columns-menu"
@@ -531,14 +534,16 @@
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span
-                                        class="inner-th"
+                                        :class="`inner-th ${`inner-th--${col.align}`}`"
                                         :style="
                                             col.width && {
                                                 maxWidth: 'calc(100% - 15px)'
                                             }
                                         "
                                     >
-                                        {{ col.label }}
+                                        <dl-ellipsis>
+                                            {{ col.label }}
+                                        </dl-ellipsis>
                                     </span>
                                 </DlTh>
                             </slot>
@@ -957,9 +962,20 @@ import {
 import { useTableActions, useTableActionsProps } from './hooks/tableActions'
 import { applyDraggableColumns, applyResizableColumns } from '../../../utils'
 import { injectProp } from '../../../utils/inject-object-prop'
-import { DlTableRow, DlTableProps, DlTableColumn } from './types'
+import {
+    DlTableRow,
+    DlTableProps,
+    DlTableColumn,
+    TableStickyPosition
+} from './types'
 import { DlPagination } from '../DlPagination'
-import { DlIcon, DlCheckbox, DlProgressBar, DlList } from '../../essential'
+import {
+    DlIcon,
+    DlCheckbox,
+    DlProgressBar,
+    DlList,
+    DlEllipsis
+} from '../../essential'
 import { DlButton, DlPopup } from '../../basic'
 import DlOptionGroup from '../DlOptionGroup/DlOptionGroup.vue'
 import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
@@ -994,7 +1010,8 @@ export default defineComponent({
         DlOptionGroup,
         DlPopup,
         DlList,
-        Sortable
+        Sortable,
+        DlEllipsis
     },
     props: {
         /**
@@ -1214,7 +1231,7 @@ export default defineComponent({
         },
         fitAllColumns: {
             type: Boolean,
-            default: true
+            default: false
         },
         expandableRows: {
             type: Boolean,
@@ -1224,6 +1241,12 @@ export default defineComponent({
             type: String,
             default: 'No data'
         },
+        stickyColumns: {
+            type: Object as PropType<TableStickyPosition>,
+            default: null,
+            validator: (value: string) =>
+                ['first', 'last', 'both'].includes(value)
+        },
         ...useTableActionsProps,
         ...commonVirtScrollProps,
         ...useTableRowExpandProps,
@@ -1396,7 +1419,12 @@ export default defineComponent({
                 (document.querySelector('table.dl-table') as HTMLTableElement)
 
             nextTick(() => {
-                setAllColumnWidths(tableEl, columns.value as DlTableColumn[])
+                setAllColumnWidths(
+                    tableEl,
+                    columns.value as DlTableColumn[],
+                    props.stickyColumns,
+                    props.fitAllColumns
+                )
             })
             if (visibleColumns.value) return
             if (resizable.value) {
@@ -1424,7 +1452,9 @@ export default defineComponent({
                 nextTick(() => {
                     setAllColumnWidths(
                         tableEl,
-                        props.columns as DlTableColumn[]
+                        props.columns as DlTableColumn[],
+                        props.stickyColumns,
+                        props.fitAllColumns
                     )
                 })
                 if (visibleColumns.value) return
@@ -1462,7 +1492,9 @@ export default defineComponent({
                 nextTick(() => {
                     setAllColumnWidths(
                         tableRef.value,
-                        newColumns as DlTableColumn[]
+                        newColumns as DlTableColumn[],
+                        props.stickyColumns,
+                        props.fitAllColumns
                     )
                 })
             },

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

@@ -8,26 +8,9 @@
         @mouseenter="iconHover = true"
         @mouseleave="iconHover = false"
     >
-        <dl-icon
-            v-if="isSortable && align === 'right'"
-            :class="iconClass"
-            :icon="computedSortIcon"
-            :style="
-                !isCurrentlySorted && !iconHover
-                    ? 'display: none !important;'
-                    : ''
-            "
-        />
-        <dl-tooltip v-if="hasEllipsis">
-            <slot />
-        </dl-tooltip>
-        <slot />
-        <span
-            class="th-icons"
-            :style="{ top: isDense ? '5px' : '12px' }"
-        >
+        <div class="inner-th-wrapper">
             <dl-icon
-                v-if="isSortable && ['left', 'center'].includes(align)"
+                v-if="isSortable && align === 'right'"
                 :class="iconClass"
                 :icon="computedSortIcon"
                 :style="
@@ -36,17 +19,34 @@
                         : ''
                 "
             />
-            <dl-icon
-                v-if="hasHint"
-                icon="icon-dl-info"
-                size="10px"
-                style="max-width: 30%"
-            >
-                <dl-tooltip>
-                    {{ props.col.hint }}
-                </dl-tooltip>
-            </dl-icon>
-        </span>
+            <dl-tooltip v-if="hasEllipsis">
+                <slot />
+            </dl-tooltip>
+            <slot />
+            <span class="th-icons">
+                <dl-icon
+                    v-if="hasHint"
+                    icon="icon-dl-info"
+                    size="10px"
+                    style="max-width: 30%; margin-top: 1px"
+                >
+                    <dl-tooltip>
+                        {{ props.col.hint }}
+                    </dl-tooltip>
+                </dl-icon>
+                <dl-icon
+                    v-if="isSortable && ['left', 'center'].includes(align)"
+                    :class="iconClass"
+                    :icon="computedSortIcon"
+                    size="16px"
+                    :style="
+                        !isCurrentlySorted && !iconHover
+                            ? 'opacity: 0 !important;'
+                            : ''
+                    "
+                />
+            </span>
+        </div>
     </th>
 </template>
 

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

@@ -8,16 +8,40 @@
         border-right: 1px solid var(--dl-color-separator);
     }
 
+    .sticky-col {
+        position: sticky;
+        background-color: var(--dl-color-panel-background);
+        z-index: 50;
+    }
+
+    .inner-th-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+        height: 34px;
+        position: relative;
+    }
     .inner-th {
         display: inline-block;
+        flex: 0 1 auto;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
         overflow: hidden;
-        margin-right: 5px;
         position: relative;
+        line-height: 34px;
+        &--left {
+            left: 0;
+            transform: none;
+        }
     }
     .th-icons {
         display: flex;
-        right: 0;
-        position: absolute;
+        flex: 0 1 auto;
+        margin-left: auto;
+        align-items: center;
+        justify-content: flex-end;
     }
 
     .expanded-row {
@@ -76,11 +100,6 @@
         padding-left: 8px;
     }
 
-    th:last-child,
-    td:last-child {
-        padding-right: 8px;
-    }
-
     thead tr {
         height: 34px;
     }
@@ -92,7 +111,6 @@
             .dl-table__drag-icon > div {
                 opacity: 1;
             }
-
             td:not(.dl-td--no-hover) {
                 background-color: var(--dl-color-fill-hover);
             }
@@ -425,8 +443,8 @@
 
     .dl-table {
         th {
-            font-size: 12px;
-            line-height: 12px;
+            font-size: 14px;
+            line-height: 14px;
         }
 
         thead tr {

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

@@ -1,5 +1,7 @@
 import { DlTextTransformOptions } from '../../shared/types'
 
+export type TableStickyPosition = 'first' | 'last' | 'both' | ''
+
 export interface SortingMovement {
     lastId: string
     direction: 'up' | 'down'
@@ -41,6 +43,7 @@ export type DlTableColumn = {
     textTransform?: DlTextTransformOptions
     width?: number
     hint?: string
+    sticky?: boolean
 }
 
 export type DlTableFilterMethod = (

package/src/demos/DlTableDemo.vue

@@ -117,6 +117,63 @@
                 @col-update="updateColumns"
                 @row-reorder="reorderRows"
             />
+            <div style="margin-top: 100px">
+                Fit table columns
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="tableColumns"
+                    fit-all-columns
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="tableRows"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @th-click="log"
+                    @update:selected="updateSeleted"
+                    @col-update="updateColumns"
+                    @row-reorder="reorderRows"
+                />
+
+                ALot of columns and fit
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="[...tableColumns, ...tableColumns]"
+                    fit-all-columns
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="tableRows"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @th-click="log"
+                    @update:selected="updateSeleted"
+                    @col-update="updateColumns"
+                    @row-reorder="reorderRows"
+                />
+            </div>
 
             <div style="margin-top: 100px">
                 Custom Slot row-body
@@ -198,6 +255,33 @@
                 </DlTable>
             </div>
 
+            <div style="margin-top: 100px">
+                With sticky columns: both
+                <DlTable
+                    :columns="[...tableColumns, ...tableColumns]"
+                    sticky-columns="both"
+                    :rows="tableRows"
+                    row-key="id"
+                    style="height: 300px"
+                />
+                With sticky columns: first
+                <DlTable
+                    :columns="[...tableColumns, ...tableColumns]"
+                    sticky-columns="first"
+                    :rows="tableRows"
+                    row-key="id"
+                    style="height: 300px"
+                />
+                With sticky columns: last
+                <DlTable
+                    :columns="[...tableColumns, ...tableColumns]"
+                    sticky-columns="last"
+                    :rows="tableRows"
+                    row-key="id"
+                    style="height: 300px"
+                />
+            </div>
+
             <div style="margin-top: 100px">
                 Loading WIth custom row
                 <DlTable
@@ -541,6 +625,7 @@
                 :rows="tableRows"
                 row-key="id"
                 style="height: 500px"
+                sticky-columns="last"
                 :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
                 @th-click="log"
@@ -625,7 +710,7 @@ const columns = [
         label: 'Calories',
         field: 'calories',
         sortable: true,
-        width: 100
+        width: '50px'
     },
     {
         name: 'fat',
@@ -1044,7 +1129,6 @@ export default defineComponent({
         }
 
         const updateColumns = (newColumns: any) => {
-            console.log(newColumns)
             tableColumns.value = newColumns
         }
 

package/src/utils/table-columns.ts

@@ -1,5 +1,5 @@
 import { cloneDeep } from 'lodash'
-import { DlTableColumn } from '../types'
+import { DlTableColumn, TableStickyPosition } from '../types'
 import { browseNestedNodes } from './browse-nested-nodes'
 import { swapNodes } from './swap-nodes'
 
@@ -121,9 +121,24 @@ function getIconWidth(el: HTMLElement) {
     return iconEl?.scrollWidth
 }
 
+function addStickyPosition(
+    element: HTMLElement,
+    position: TableStickyPosition,
+    index: number,
+    totalElements: number
+) {
+    if (position === 'both')
+        position =
+            index === 0 ? 'first' : index === totalElements - 1 ? 'last' : ''
+    element.style.left = position === 'first' ? '0' : ''
+    element.style.right = position === 'last' ? '0' : ''
+}
+
 export function setAllColumnWidths(
     table: HTMLElement,
-    columns: DlTableColumn[]
+    columns: DlTableColumn[],
+    stickyColumns: TableStickyPosition,
+    fitAllColumns: boolean
 ) {
     const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
     if (!hasWidth) return
@@ -135,12 +150,37 @@ export function setAllColumnWidths(
                 (el.tagName === 'TH' || el.tagName === 'TD') &&
                 parseInt(el.dataset.colIndex) === i,
             (targetEl) => {
-                const width =
-                    (col.width ?? targetEl.scrollWidth) +
-                    getIconWidth(targetEl) +
-                    15
-                targetEl.style.width = `${width}px`
-                // then
+                if (!fitAllColumns && targetEl.tagName === 'TH') {
+                    // Calculate the width for the column
+                    const width =
+                        (col.width ??
+                            targetEl.querySelector('.inner-th').scrollWidth) +
+                        getIconWidth(targetEl) +
+                        35
+
+                    // Set the width of the column
+                    targetEl.style.width =
+                        typeof col.width === 'number' || !col.width
+                            ? `${width}px`
+                            : col.width
+                } else if (targetEl.tagName === 'TH') {
+                    // Adjust the maximum width for TH elements
+                    const innerTh = targetEl.querySelector(
+                        '.inner-th'
+                    ) as HTMLElement
+                    innerTh.style.maxWidth = '80%'
+                }
+
+                if (stickyColumns && (i === 0 || i === columns.length - 1)) {
+                    // Add sticky column class and position for sticky columns
+                    targetEl.classList.add('sticky-col')
+                    addStickyPosition(
+                        targetEl,
+                        stickyColumns,
+                        i,
+                        columns.length
+                    )
+                }
             }
         )
     })