@dataloop-ai/components 0.19.105 → 0.19.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.105",
+  "version": "0.19.107",
   "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/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -124,7 +124,9 @@ import {
     replaceJSDatesWithStringifiedDates,
     replaceStringifiedDatesWithJSDates,
     setAliases,
-    revertAliases
+    revertAliases,
+    setValueAliases,
+    revertValueAliases
 } from '../utils'
 import { v4 } from 'uuid'
 import {
@@ -569,7 +571,9 @@ export default defineComponent({
             const replacedDate = replaceStringifiedDatesWithJSDates(value)
             const json = parseSmartQuery(replacedDate ?? searchQuery.value)
 
-            return isValidJSON(json) ? json : searchQuery.value
+            return isValidJSON(json)
+                ? revertValueAliases(json, schema.value)
+                : searchQuery.value
         }
 
         const fromJSON = (value: { [key: string]: any }) => {
@@ -579,7 +583,9 @@ export default defineComponent({
                     dateKeys.value
                 )
 
-                const stringQuery = stringifySmartQuery(replacedDate)
+                const stringQuery = stringifySmartQuery(
+                    setValueAliases(replacedDate, schema.value)
+                )
                 const aliased = setAliases(stringQuery, aliases.value)
                 return aliased
             } catch (e) {

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -5,6 +5,7 @@ import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,
     Alias,
+    Data,
     datePattern,
     datePatternNoBrackets,
     removeBrackets
@@ -187,6 +188,62 @@ export function setAliases(str: string, aliases: Alias[]) {
     return str.replace(regex, replacement)
 }
 
+function valueAliases(schema: Data, field: string) {
+    let aliases: Data = {}
+    const type: any = schema[field]
+    if (Array.isArray(type)) {
+        for (const element of type) {
+            if (typeof element === 'object')
+                aliases = Object.assign(aliases, element)
+        }
+    } else {
+        if (typeof type === 'object') aliases = Object.assign(aliases, type)
+    }
+    return aliases
+}
+
+export function revertValueAliases(json: Data, schema: Data) {
+    const clone = cloneDeep(json)
+    const replaceAliases = (where: Data) => {
+        for (const key in where) {
+            if (typeof where[key] === 'object') {
+                replaceAliases(where[key])
+            } else {
+                const aliases = valueAliases(schema, key)
+                const value = aliases[where[key] as string]
+                if (value) {
+                    where[key] = value
+                }
+            }
+        }
+    }
+
+    replaceAliases(clone)
+    return clone
+}
+
+export function setValueAliases(json: Data, schema: Data) {
+    const clone = cloneDeep(json)
+    const replaceValues = (where: Data) => {
+        for (const key in where) {
+            if (typeof where[key] === 'object') {
+                replaceValues(where[key])
+            } else {
+                const aliases = valueAliases(schema, key)
+                for (const alias in aliases) {
+                    if (where[key] === aliases[alias]) {
+                        where[key] = alias
+                        break
+                    }
+                }
+            }
+        }
+    }
+
+    replaceValues(clone)
+    return clone
+}
+
 export function createColorSchema(
     colorSchema: ColorSchema,
     aliases: Alias[]

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/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -140,6 +140,13 @@ export default defineComponent({
             test2: ['true', 'false']
         }
         const schema2: any = {
+            value: [
+                'string',
+                {
+                    John: 'AB34',
+                    Connor: '42'
+                }
+            ],
             type: [
                 'class',
                 'point',

package/src/hooks/use-suggestions.ts

@@ -3,12 +3,16 @@ import { splitByQuotes } from '../utils/splitByQuotes'
 import { flatten } from 'flat'
 import { isObject } from 'lodash'
 
+export type Data = {
+    [key: string]: any
+}
+
 export type Schema = {
     [key: string]:
         | string
         | number
         | boolean
-        | (number | boolean | string)[]
+        | (number | boolean | string | Data)[]
         | Schema
 }
 
@@ -245,8 +249,10 @@ export const useSuggestions = (
 
             if (Array.isArray(dataType)) {
                 localSuggestions = dataType.filter(
-                    (type) => !knownDataTypes.includes(type)
-                )
+                    (type) =>
+                        typeof type === 'string' &&
+                        !knownDataTypes.includes(type)
+                ) as string[]
 
                 if (!value) continue
 
@@ -402,7 +408,7 @@ const getError = (
 
 const isValidByDataType = (
     str: string | string[],
-    dataType: string | string[],
+    dataType: string | (string | Data)[],
     operator: string
 ): boolean => {
     if (dataType === 'any') {
@@ -423,9 +429,16 @@ const isValidByDataType = (
      */
 
     if (Array.isArray(dataType)) {
-        let isOneOf = !!getValueMatch(dataType, str)
+        let isOneOf = !!getValueMatch(
+            dataType.filter((type) => typeof type !== 'object') as string[],
+            str
+        )
         for (const type of dataType) {
-            isOneOf = isOneOf || isValidByDataType(str, type, operator)
+            if (typeof type === 'object') {
+                isOneOf = isOneOf || !!getValueMatch(Object.keys(type), str)
+            } else {
+                isOneOf = isOneOf || isValidByDataType(str, type, operator)
+            }
         }
         return isOneOf
     }
@@ -507,7 +520,7 @@ const getDataType = (
     schema: Schema,
     aliases: Alias[],
     key: string
-): string | string[] | null => {
+): string | (string | Data)[] | null => {
     const aliasedKey = getAliasObjByAlias(aliases, key)?.key ?? key
 
     const nestedKey = aliasedKey.split('.').filter((el) => el)
@@ -529,7 +542,7 @@ const getDataType = (
         return 'object'
     }
 
-    return value as unknown as string | string[] | null
+    return value as unknown as string | (string | Data)[] | null
 }
 
 const getAliasObjByAlias = (aliases: Alias[], alias: string): Alias | null => {
@@ -666,13 +679,22 @@ export const removeLeadingExpression = (str: string) => {
     return str.match(/\s+(.*)$/)?.[1] || ''
 }
 
-const getValueSuggestions = (dataType: string | string[], operator: string) => {
-    const types: string[] = Array.isArray(dataType) ? dataType : [dataType]
+const getValueSuggestions = (
+    dataType: string | (string | Data)[],
+    operator: string
+) => {
+    const types: (string | Data)[] = Array.isArray(dataType)
+        ? dataType
+        : [dataType]
     const suggestion: string[] = []
 
     if (Array.isArray(dataType)) {
         suggestion.push(
-            ...dataType.filter((type) => !knownDataTypes.includes(type))
+            ...(dataType.filter(
+                (type) =>
+                    !knownDataTypes.includes(type as string) &&
+                    typeof type !== 'object'
+            ) as string[])
         )
     }
 
@@ -688,7 +710,10 @@ const getValueSuggestions = (dataType: string | string[], operator: string) => {
             case 'datetime':
                 suggestion.push(dateSuggestionPattern)
             default:
-                // do nothing
+                if (typeof type === 'object') {
+                    // value aliases: key is the alias, value is the actual value
+                    for (const key in type) suggestion.push(key)
+                }
                 break
         }
     }

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