@dataloop-ai/components 0.19.64 → 0.19.66

package/package.json

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

package/src/components/compound/DlInput/DlInput.vue

@@ -100,11 +100,7 @@
                                         'placeholder-string': showPlaceholder,
                                         'placeholder-string--disabled': disabled
                                     }"
-                                >{{
-                                    showPlaceholder
-                                        ? placeholder
-                                        : modelValue
-                                }}</span>
+                                >{{ spanText }}</span>
                             </div>
                             <div
                                 v-if="
@@ -336,14 +332,14 @@
 </template>
 
 <script lang="ts">
-import { debounce, cloneDeep } from 'lodash'
+import { debounce as debounceFunc, cloneDeep } from 'lodash'
 import {
     computed,
     defineComponent,
-    onMounted,
     PropType,
     ref,
     toRefs,
+    nextTick,
     watch
 } from 'vue-demi'
 import { DlInfoErrorMessage, DlTooltip } from '../../shared'
@@ -397,7 +393,7 @@ export default defineComponent({
          */
         modelValue: {
             type: [String, Number],
-            default: null
+            default: null as string
         },
         /**
          * An array of InputFile objects contained and modeled in the input
@@ -637,6 +633,20 @@ export default defineComponent({
         debounce: {
             type: Number,
             default: 100
+        },
+        /**
+         * Auto trim input value after debounce time
+         */
+        autoTrim: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Debounce time for input
+         */
+        trimDebounce: {
+            type: Number,
+            default: 500
         }
     },
     emits: [
@@ -658,15 +668,23 @@ export default defineComponent({
             autoSuggestItems,
             maxLength,
             files,
-            syntaxHighlightColor
+            syntaxHighlightColor,
+            placeholder,
+            readonly,
+            disabled,
+            autoTrim,
+            debounce,
+            trimDebounce
         } = toRefs(props)
 
+        const isInternalChange = ref(false)
+
         const suggestItems = computed<DlInputSuggestion[]>(() => {
             if (!modelValue.value) return []
             return getSuggestItems(
                 autoSuggestItems.value,
                 modelValue.value?.toString()
-            )
+            ) as DlInputSuggestion[]
         })
         const input = ref(null)
 
@@ -676,6 +694,48 @@ export default defineComponent({
         const handleSelectedItem = (value: any) => {
             onAutoSuggestClick(null, value)
         }
+
+        const handleValueTrim = () => {
+            nextTick(() => {
+                const trimmed = String(modelValue.value).trim()
+                if (trimmed !== String(modelValue.value)) {
+                    isInternalChange.value = true
+
+                    input.value.innerHTML = trimmed
+                        .toString()
+                        .replace(/ /g, '&nbsp;')
+                    updateSyntax()
+                    setCaretAtTheEnd(input.value)
+
+                    emit('input', trimmed)
+                    emit('update:model-value', trimmed)
+                }
+            })
+        }
+
+        const debouncedHandleValueTrim = computed<Function>(() => {
+            if (stateManager.disableDebounce) {
+                return handleValueTrim.bind(this)
+            }
+            const debounced = debounceFunc(
+                handleValueTrim.bind(this),
+                trimDebounce.value ?? 50
+            )
+            return debounced
+        })
+
+        const onChange = (e: KeyboardEvent | Event) => {
+            isInternalChange.value = true
+            isMenuOpen.value = true
+            updateSyntax()
+            const target = e.target as HTMLElement
+            emit('input', target.innerText, e)
+            emit('update:model-value', target.innerText)
+            if (autoTrim.value) {
+                debouncedHandleValueTrim.value()
+            }
+        }
+
         const onAutoSuggestClick = (e: Event, item: string): void => {
             const newValue = clearSuggestion(modelValue.value.toString(), item)
             if (!maxLength.value || newValue.length < maxLength.value) {
@@ -735,26 +795,42 @@ export default defineComponent({
             () => !modelValue.value || !String(modelValue.value)?.length
         )
 
-        watch(modelValue, () => {
-            if (String(modelValue.value ?? '').length) {
-                if (input.value.innerHTML !== modelValue.value) {
-                    input.value.innerHTML = modelValue.value
-                }
-            } else {
-                input.value.innerHTML = ''
+        const spanText = computed<string>(() => {
+            if (showPlaceholder.value) {
+                return placeholder.value
             }
+            return modelValue.value?.toString()
         })
 
-        onMounted(() => {
-            if (String(modelValue.value ?? '').length) {
-                input.value.innerHTML = modelValue.value
-            }
-        })
+        watch(
+            modelValue,
+            (val) => {
+                nextTick(() => {
+                    if (
+                        !isInternalChange.value &&
+                        val !== null &&
+                        val !== undefined
+                    ) {
+                        if (readonly.value || disabled.value) {
+                            return
+                        }
+
+                        input.value.innerHTML = val
+                            .toString()
+                            .replace(/ /g, '&nbsp;')
+                    } else {
+                        isInternalChange.value = false
+                    }
+                })
+            },
+            { immediate: true }
+        )
 
         return {
             suggestItems,
             highlightedIndex,
             onAutoSuggestClick,
+            onChange,
             isMenuOpen,
             setHighlightedIndex,
             handleSelectedItem,
@@ -764,7 +840,10 @@ export default defineComponent({
             emitRemoveFile,
             updateSyntax,
             stringSuggestions,
-            showPlaceholder
+            showPlaceholder,
+            spanText,
+            handleValueTrim,
+            debouncedHandleValueTrim
         }
     },
     data() {
@@ -910,7 +989,7 @@ export default defineComponent({
             if (stateManager.disableDebounce) {
                 return this.onBlur.bind(this)
             }
-            const debounced = debounce(
+            const debounced = debounceFunc(
                 this.onBlur.bind(this),
                 this.debounce ?? 50
             )
@@ -963,13 +1042,6 @@ export default defineComponent({
         onClick(e: Event, item: DlInputSuggestion) {
             this.onAutoSuggestClick(e, item.suggestion)
         },
-        onChange(e: Event): void {
-            this.isMenuOpen = true
-            this.updateSyntax()
-            const target = e.target as HTMLElement
-            this.$emit('input', target.innerText, e)
-            this.$emit('update:model-value', target.innerText)
-        },
         async handlePaste() {
             const content = await readClipboard()
 
@@ -1014,6 +1086,7 @@ export default defineComponent({
             inputRef.focus()
         },
         onFocus(e: InputEvent): void {
+            this.handleValueTrim()
             const el = e.target as HTMLElement
             if (this.modelValue) {
                 el.scroll(el.scrollWidth, 0)
@@ -1030,6 +1103,7 @@ export default defineComponent({
             el.scroll(0, 0)
             this.focused = false
             this.$emit('blur', e)
+            this.handleValueTrim()
         },
         onEnterPress(e: any): void {
             this.$emit('enter', e.target.innerText, e)

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -13,7 +13,8 @@ import {
     PropType,
     ref,
     toRefs,
-    watch
+    watch,
+    nextTick
 } from 'vue-demi'
 import {
     Content,
@@ -26,7 +27,6 @@ import {
 } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../StateManager'
-import { nextTick } from 'process'
 
 export default defineComponent({
     model: {

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

@@ -58,19 +58,19 @@
         <!-- Virtual scroll  -->
         <DlVirtualScroll
             v-if="hasVirtScroll"
+            v-bind="virtProps"
             ref="virtScrollRef"
             type="__dltable"
-            :class="tableClass"
+            :class="tableClass + additionalClasses"
             :style="tableStyle"
             :table-colspan="colspanWithActionsRow"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
             :scroll-debounce="scrollDebounce"
-            v-bind="virtProps"
             @virtual-scroll="onVScroll"
         >
             <template #before>
-                <thead>
+                <thead :colspan="columns.length">
                     <slot
                         v-if="!hideHeader"
                         name="header"
@@ -81,14 +81,15 @@
                                 v-if="hasDraggableRows"
                                 class="dl-table--col-auto-with empty-col"
                                 :data-resizable="false"
-                                style="width: 25px; padding: 5px"
+                                style="width: 25px"
                                 @mousedown="stopAndPrevent"
                             />
                             <th
                                 v-if="singleSelection"
-                                class="dl-table--col-auto-width"
+                                class="dl-table--col-auto-with dl-table--col-checkbox-wrapper"
                                 @mousedown="stopAndPrevent"
                             />
+
                             <th
                                 v-else-if="multipleSelection"
                                 class="dl-table--col-auto-with dl-table--col-checkbox-wrapper"
@@ -102,9 +103,7 @@
                                     <DlCheckbox
                                         :color="color"
                                         :model-value="headerSelectedValue"
-                                        :indeterminate-value="
-                                            selectionCheckboxIndeterminateVal
-                                        "
+                                        :indeterminate-value="true"
                                         @update:model-value="
                                             onMultipleSelectionSet
                                         "
@@ -120,14 +119,14 @@
 
                             <th
                                 v-if="isTreeTable"
-                                class="dl-table--col-auto-with empty-col chevron-header"
+                                class="dl-table--col-auto-with empty-col"
                                 :data-resizable="false"
-                                style="width: 25px"
+                                style="width: 25px; padding: 5px"
                             />
 
                             <slot
                                 v-for="(col, colIndex) in computedCols"
-                                v-bind="getHeaderScope({ col })"
+                                v-bind="getHeaderScope({ col, onThClick })"
                                 :name="
                                     hasSlotByName(`header-cell-${col.name}`)
                                         ? `header-cell-${col.name}`
@@ -139,13 +138,20 @@
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
                                     :pagination="computedPagination"
+                                    @click="onThClick($event, col.name)"
                                 >
-                                    <span class="inner-th">
+                                    <span
+                                        class="inner-th"
+                                        :style="
+                                            col.width && {
+                                                maxWidth: 'calc(100% - 15px)'
+                                            }
+                                        "
+                                    >
                                         {{ col.label }}
                                     </span>
                                 </DlTh>
                             </slot>
-
                             <DlTh
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
@@ -517,7 +523,14 @@
                                     :pagination="computedPagination"
                                     @click="onThClick($event, col.name)"
                                 >
-                                    <span class="inner-th">
+                                    <span
+                                        class="inner-th"
+                                        :style="
+                                            col.width && {
+                                                maxWidth: 'calc(100% - 15px)'
+                                            }
+                                        "
+                                    >
                                         {{ col.label }}
                                     </span>
                                 </DlTh>
@@ -1368,15 +1381,14 @@ export default defineComponent({
         onMounted(() => {
             tableEl =
                 tableRef.value ||
+                virtScrollRef.value.rootRef.querySelector('table') ||
                 (document.querySelector('table.dl-table') as HTMLTableElement)
+
             nextTick(() => {
-                setAllColumnWidths(
-                    tableEl,
-                    columns.value as DlTableColumn[],
-                    fitAllColumns.value
-                )
+                setAllColumnWidths(tableEl, columns.value as DlTableColumn[])
             })
-            if (resizable.value === true) {
+            if (visibleColumns.value) return
+            if (resizable.value) {
                 applyResizableColumns(tableEl, vm)
             }
             if (hasDraggableColumns.value === true) {
@@ -1391,22 +1403,24 @@ export default defineComponent({
         watch(
             hasVirtScroll,
             () => {
-                tableEl = (rootRef.value as HTMLDivElement).querySelector(
-                    'table.dl-table'
-                ) as HTMLTableElement
-
-                if (resizable.value) {
-                    applyResizableColumns(tableEl, vm)
-                }
+                tableEl =
+                    tableRef.value ||
+                    virtScrollRef.value.rootRef.querySelector('table') ||
+                    (document.querySelector(
+                        'table.dl-table'
+                    ) as HTMLTableElement)
 
                 nextTick(() => {
                     setAllColumnWidths(
-                        tableRef.value,
-                        props.columns as DlTableColumn[],
-                        props.fitAllColumns
+                        tableEl,
+                        props.columns as DlTableColumn[]
                     )
                 })
+                if (visibleColumns.value) return
 
+                if (resizable.value) {
+                    applyResizableColumns(tableEl, vm)
+                }
                 if (hasDraggableColumns.value === true) {
                     applyDraggableColumns(
                         tableEl,
@@ -1421,17 +1435,23 @@ export default defineComponent({
         )
 
         watch(resizable, () => {
+            if (visibleColumns.value) return
             applyResizableColumns(tableEl, vm)
         })
 
         watch(
             columns,
             (newColumns) => {
+                tableEl =
+                    tableRef.value ||
+                    virtScrollRef.value.rootRef.querySelector('table') ||
+                    (document.querySelector(
+                        'table.dl-table'
+                    ) as HTMLTableElement)
                 nextTick(() => {
                     setAllColumnWidths(
                         tableRef.value,
-                        newColumns as DlTableColumn[],
-                        props.fitAllColumns
+                        newColumns as DlTableColumn[]
                     )
                 })
             },
@@ -1451,7 +1471,7 @@ export default defineComponent({
         watch(
             draggable,
             () => {
-                if (tableEl) {
+                if (tableEl && !visibleColumns.value) {
                     if (hasDraggableColumns.value === true) {
                         applyDraggableColumns(
                             tableEl,

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

@@ -24,21 +24,10 @@
         <slot />
         <span
             class="th-icons"
-            :style="{ top: isDense ? '5px' : '10px' }"
+            :style="{ top: isDense ? '5px' : '12px' }"
         >
-            <dl-icon
-                v-if="hasHint"
-                icon="icon-dl-info"
-                size="10px"
-                style="max-width: 30%"
-            >
-                <dl-tooltip>
-                    {{ props.col.hint }}
-                </dl-tooltip>
-            </dl-icon>
             <dl-icon
                 v-if="isSortable && ['left', 'center'].includes(align)"
-                style="margin-top: 2px"
                 :class="iconClass"
                 :icon="computedSortIcon"
                 :style="
@@ -47,6 +36,16 @@
                         : ''
                 "
             />
+            <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>
     </th>
 </template>

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

@@ -16,7 +16,6 @@
     }
     .th-icons {
         display: flex;
-        align-items: center;
         right: 0;
         position: absolute;
     }
@@ -132,8 +131,6 @@
                 opacity: 0.64 !important;
             }
         }
-
-
     }
 
     thead,

package/src/demos/DlInputDemo.vue

@@ -2,7 +2,6 @@
     <div>
         <div>
             <input v-model="textVal">
-
             <div>This is to test v-model reactivity</div>
             <dl-input
                 v-model="textVal"
@@ -21,7 +20,15 @@
                 v-model="textVal"
                 readonly
             />
-            <dl-input v-model="trimmedValue" />
+        </div>
+
+        <div>
+            <div>With auto trim</div>
+
+            <dl-input
+                v-model="trimmedValue"
+                auto-trim
+            />
         </div>
 
         <dl-input
@@ -293,15 +300,7 @@ export default defineComponent({
 
         const textVal = ref<string>('test me')
 
-        const val = ref('')
-        const trimmedValue = computed<string>({
-            get: () => {
-                return textVal.value.trim()
-            },
-            set: (value: string) => {
-                textVal.value = value
-            }
-        })
+        const trimmedValue = ref('')
 
         return {
             log: console.log,

package/src/demos/DlTableDemo.vue

@@ -348,6 +348,7 @@
                         row-key="index"
                         virtual-scroll
                         @virtual-scroll="onScroll"
+                        @col-update="updateColumns"
                     />
                 </div>
             </div>

package/src/utils/draggable-table.ts

@@ -3,12 +3,10 @@ import { removeAllChildNodes } from './remove-child-nodes'
 import {
     calculateColIndexOffset,
     getColIndex,
-    getTableColumn,
     getTreeTableColumn,
     justifyMouseInsideTargetCell,
     removeTableVerticalBorders,
-    swapTableColumns,
-    swapTreeTableColumns
+    swapTableColumns
 } from './table-columns'
 import { isVue2, watch } from 'vue-demi'
 
@@ -17,7 +15,6 @@ export function applyDraggableColumns(
     vm?: any,
     draggableClone?: HTMLDivElement
 ) {
-    const isTreeTable = vm.props.isTreeTable
     let originalColIndex: number = null
     let sourceColIndex: number = null
     let targetColIndex: number = null
@@ -93,11 +90,7 @@ export function applyDraggableColumns(
             newTargetColIndex !== targetColIndex &&
             newTargetColIndex !== sourceColIndex
         ) {
-            if (isTreeTable) {
-                swapTreeTableColumns(table, sourceColIndex, newTargetColIndex)
-            } else {
-                swapTableColumns(table, sourceColIndex, newTargetColIndex)
-            }
+            swapTableColumns(table, sourceColIndex, newTargetColIndex)
             sourceColIndex = newTargetColIndex
             targetColIndex = newTargetColIndex
         }
@@ -108,8 +101,6 @@ export function applyDraggableColumns(
         const colIndex = getColIndex(targetTh)
         sourceColIndex = colIndex
         originalColIndex = colIndex
-        return isTreeTable
-            ? getTreeTableColumn(table, sourceColIndex)
-            : getTableColumn(table, sourceColIndex)
+        return getTreeTableColumn(table, sourceColIndex)
     }
 }

package/src/utils/table-columns.ts

@@ -3,8 +3,6 @@ import { DlTableColumn } from '../types'
 import { browseNestedNodes } from './browse-nested-nodes'
 import { swapNodes } from './swap-nodes'
 
-const DEFAULT_COL_WIDTH = 'fit-content'
-
 export function setColumnVerticalBorder(
     table: HTMLTableElement,
     index: string
@@ -45,38 +43,6 @@ export function getColIndex(el: Node) {
     return Array.from(el.parentElement.children).indexOf(el as HTMLElement)
 }
 
-export function getTableColumn(
-    table: HTMLTableElement,
-    columnIndex: number
-): HTMLTableElement {
-    const rowCount = table.rows.length
-
-    const originalColumnWidth = table.rows[0].cells[columnIndex].offsetWidth
-    const originalColumnHeight = table.rows[0].offsetHeight
-
-    const columnTable: HTMLTableElement = document.createElement('table')
-    const columnTbody: HTMLTableSectionElement = document.createElement('tbody')
-    columnTable.appendChild(columnTbody)
-
-    for (let i = 0; i < rowCount; i++) {
-        const row = table.rows[i]
-        if (row.cells.length > columnIndex) {
-            const columnRow: HTMLTableRowElement = document.createElement('tr')
-            const cell: HTMLTableCellElement = row.cells[columnIndex].cloneNode(
-                true
-            ) as HTMLTableCellElement
-
-            cell.style.width = originalColumnWidth + 'px'
-            columnRow.style.height = originalColumnHeight + 'px'
-
-            columnRow.appendChild(cell)
-            columnTbody.appendChild(columnRow)
-        }
-    }
-
-    return columnTable
-}
-
 export function getTreeTableColumn(
     table: HTMLTableElement,
     columnIndex: number
@@ -89,7 +55,9 @@ export function getTreeTableColumn(
     const width = th.getBoundingClientRect().width
     browseNestedNodes(
         newTable,
-        (el) => el.dataset.colIndex && el.dataset.colIndex !== thColIndex, // if
+        (el) =>
+            (el.dataset.colIndex && el.dataset.colIndex !== thColIndex) ||
+            el.classList.contains('dl-virtual-scroll__padding'), // if
         (el) => {
             el.parentNode?.removeChild(el) // then
         },
@@ -105,29 +73,6 @@ export function getTreeTableColumn(
 }
 
 export function swapTableColumns(
-    table: HTMLTableElement,
-    sourceIndex: number,
-    targetIndex: number
-): void {
-    const rows = table.rows
-
-    for (let i = 0; i < rows.length; i++) {
-        const row = rows[i]
-        const cells = row.cells
-
-        const tempCell = cells[sourceIndex].cloneNode(true) as HTMLElement
-        cells[sourceIndex].parentNode!.replaceChild(
-            cells[targetIndex].cloneNode(true),
-            cells[sourceIndex]
-        )
-        cells[targetIndex].parentNode!.replaceChild(
-            tempCell,
-            cells[targetIndex]
-        )
-    }
-}
-
-export function swapTreeTableColumns(
     table: HTMLTableElement,
     sourceIndex: number,
     targeIndex: number
@@ -171,14 +116,18 @@ export function justifyMouseInsideTargetCell(
     )
 }
 
+function getIconWidth(el: HTMLElement) {
+    const iconEl = el.querySelector('.th-icons')
+    return iconEl?.scrollWidth
+}
+
 export function setAllColumnWidths(
     table: HTMLElement,
-    columns: DlTableColumn[],
-    fitAllColumns: boolean
+    columns: DlTableColumn[]
 ) {
     const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
     if (!hasWidth) return
-    // table.style.tableLayout = fitAllColumns ? 'auto' : 'fixed'
+    table.style.tableLayout = 'fixed'
     columns.forEach((col, i) => {
         browseNestedNodes(
             table,
@@ -186,9 +135,11 @@ export function setAllColumnWidths(
                 (el.tagName === 'TH' || el.tagName === 'TD') &&
                 parseInt(el.dataset.colIndex) === i,
             (targetEl) => {
-                targetEl.style.width = col.width
-                    ? `${col.width}px`
-                    : DEFAULT_COL_WIDTH
+                const width =
+                    (col.width ?? targetEl.scrollWidth) +
+                    getIconWidth(targetEl) +
+                    15
+                targetEl.style.width = `${width}px`
                 // then
             }
         )