@dataloop-ai/components 0.20.186-ds-v3.0 → 0.20.186

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

@@ -161,7 +161,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -274,8 +274,8 @@
                                     isRowSelected(getRowKey(props.item))
                                         ? 'selected'
                                         : hasAnyAction
-                                            ? ' cursor-pointer'
-                                            : ''
+                                        ? ' cursor-pointer'
+                                        : ''
                                 "
                                 :no-hover="noHover"
                                 @click="
@@ -565,7 +565,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -674,8 +674,8 @@
                             <dl-top-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-top="
@@ -709,8 +709,8 @@
                                         isRowSelected(getRowKey(row))
                                             ? 'selected'
                                             : hasAnyAction
-                                                ? ' cursor-pointer'
-                                                : ''
+                                            ? ' cursor-pointer'
+                                            : ''
                                     "
                                     :no-hover="noHover"
                                     @click="onTrClick($event, row, pageIndex)"
@@ -845,8 +845,8 @@
                             <dl-bottom-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-bottom="
@@ -903,7 +903,7 @@
                     <div
                         v-if="
                             hasBottomSelectionBanner &&
-                                selectedRowsLabel(rowsSelectedNumber)
+                            selectedRowsLabel(rowsSelectedNumber)
                         "
                         class="dl-table__control"
                     >
@@ -1159,7 +1159,7 @@ export default defineComponent({
          */
         selectedRowsLabel: {
             type: Function,
-            default: (val: number) => null
+            default: (val: number): string | null => null
         },
         /**
          * Label visible when loading is active
@@ -2092,6 +2092,9 @@ export default defineComponent({
             group: props.isTreeTable ? 'nested' : tableUuid,
             animation: 150,
             fallbackOnBody: true,
+            forceFallback: true,
+            fallbackClass: 'dl-table-fallback-row',
+            ghostClass: 'dl-table-ghost-row',
             invertSwap: true,
             swapThreshold: 0.5,
             handle: '.draggable-icon'

package/src/components/compound/DlTable/hooks/use-sortable.ts

@@ -106,26 +106,169 @@ export function useSortable(vm: Record<string, any>) {
         }
 
         if (newRootRef) {
+            const DRAGGING_CLASS = 'dl-sortable--dragging'
+
+            const hasDocument = () =>
+                typeof document !== 'undefined' &&
+                !!document.documentElement &&
+                !!document.body
+
+            const applyGlobalDraggingState = (active: boolean) => {
+                if (!hasDocument()) return
+
+                document.documentElement.classList.toggle(
+                    DRAGGING_CLASS,
+                    active
+                )
+
+                document.documentElement.style.cursor = active ? 'grabbing' : ''
+                document.body.style.cursor = active ? 'grabbing' : ''
+            }
+
+            const stopDragging = () => {
+                if (!isDragging.value) return
+                isDragging.value = false
+                didSyncCloneWidths = false
+                applyGlobalDraggingState(false)
+                removeHardStopListeners()
+            }
+
+            const hardStop = () => {
+                stopDragging()
+            }
+
+            const onKeyDown = (e: KeyboardEvent) => {
+                if (e.key === 'Escape') hardStop()
+            }
+
+            const addHardStopListeners = () => {
+                if (!hasDocument()) return
+                window.addEventListener('mouseup', hardStop, true)
+                window.addEventListener('pointerup', hardStop, true)
+                window.addEventListener('touchend', hardStop, true)
+                window.addEventListener('dragend', hardStop, true)
+                window.addEventListener('drop', hardStop, true)
+                window.addEventListener('keydown', onKeyDown, true)
+            }
+
+            const removeHardStopListeners = () => {
+                if (!hasDocument()) return
+                window.removeEventListener('mouseup', hardStop, true)
+                window.removeEventListener('pointerup', hardStop, true)
+                window.removeEventListener('touchend', hardStop, true)
+                window.removeEventListener('dragend', hardStop, true)
+                window.removeEventListener('drop', hardStop, true)
+                window.removeEventListener('keydown', onKeyDown, true)
+            }
+
+            let didSyncCloneWidths = false
+
+            const _syncDraggingElementColumnWidths = (event: any) => {
+                if (didSyncCloneWidths) return
+                if (!hasDocument()) return
+
+                const pickRowEl = (
+                    el: HTMLElement
+                ): HTMLTableRowElement | null => {
+                    if (el.tagName === 'TR') return el as HTMLTableRowElement
+                    const tr = el.querySelector('tr')
+                    return (tr as HTMLTableRowElement) || null
+                }
+
+                const itemEl = event?.item as HTMLElement | null
+                const sourceRow = itemEl ? pickRowEl(itemEl) : null
+                if (!sourceRow) return
+
+                const sourceCells = Array.from(
+                    sourceRow.querySelectorAll('th,td')
+                ) as HTMLElement[]
+                if (sourceCells.length === 0) return
+
+                const sourceRowWidth = sourceRow.getBoundingClientRect().width
+                const widths = sourceCells.map(
+                    (cell) => cell.getBoundingClientRect().width
+                )
+
+                requestAnimationFrame(() => {
+                    const dragEl = document.body.querySelector(
+                        '.sortable-drag'
+                    ) as HTMLElement | null
+                    if (!dragEl) return
+
+                    const dragRow = pickRowEl(dragEl)
+                    if (!dragRow) return
+
+                    const dragRows =
+                        dragEl.tagName === 'TR'
+                            ? ([dragEl] as HTMLElement[])
+                            : (Array.from(
+                                  dragEl.querySelectorAll('tr')
+                              ) as HTMLElement[])
+                    if (dragRows.length === 0) return
+
+                    for (const row of dragRows) {
+                        const cells = Array.from(
+                            row.querySelectorAll('th,td')
+                        ) as HTMLElement[]
+                        if (cells.length === 0) continue
+
+                        const len = Math.min(widths.length, cells.length)
+                        for (let i = 0; i < len; i++) {
+                            const w = widths[i]
+                            const cell = cells[i]
+                            if (!w || !cell) continue
+                            const px = `${w}px`
+                            cell.style.width = px
+                            cell.style.minWidth = px
+                            cell.style.maxWidth = px
+                        }
+                    }
+
+                    const dragTable =
+                        (dragEl.tagName === 'TABLE'
+                            ? (dragEl as HTMLElement)
+                            : (dragRow.closest(
+                                  'table'
+                              ) as HTMLElement | null)) ||
+                        (dragEl.querySelector('table') as HTMLElement | null)
+                    if (dragTable && sourceRowWidth) {
+                        dragTable.style.width = `${sourceRowWidth}px`
+                    }
+
+                    if (dragEl.tagName === 'TR' && sourceRowWidth) {
+                        dragEl.style.width = `${sourceRowWidth}px`
+                        dragEl.style.minWidth = `${sourceRowWidth}px`
+                        dragEl.style.maxWidth = `${sourceRowWidth}px`
+                    }
+
+                    didSyncCloneWidths = true
+                })
+            }
+
             sortable.value = new Sortable(newRootRef, {
                 ...props.options,
                 onChoose: (event) => emit('choose', event),
                 onUnchoose: (event) => emit('unchoose', event),
                 onStart: (event) => {
                     isDragging.value = true
+                    applyGlobalDraggingState(true)
+                    addHardStopListeners()
+                    _syncDraggingElementColumnWidths(event)
                     emit('start', event)
                 },
                 onEnd: (event) => {
-                    setTimeout(() => {
-                        isDragging.value = false
-                        emit('end', event)
-                    })
+                    stopDragging()
+                    emit('end', event)
                 },
                 onAdd: (event) => emit('add', event),
                 onUpdate: (event) => emit('update', event),
                 onSort: (event) => emit('sort', event),
                 onRemove: (event) => emit('remove', event),
                 onFilter: (event) => emit('filter', event),
-                onClone: (event) => emit('clone', event),
+                onClone: (event) => {
+                    _syncDraggingElementColumnWidths(event)
+                    emit('clone', event)
+                },
                 onChange: (event) => emit('change', event)
             })
         }

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -266,11 +266,11 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: () =>
-                ({
-                    title: '',
-                    subtitle: 'No data to show yet',
-                    icon: 'icon-dl-dataset-filled'
-                } as unknown as PropType<DlEmptyStateProps>)
+            ({
+                title: '',
+                subtitle: 'No data to show yet',
+                icon: 'icon-dl-dataset-filled'
+            } as unknown as PropType<DlEmptyStateProps>)
         },
         /**
          * Custom icon class to use for expanded rows.
@@ -392,7 +392,7 @@ export default defineComponent({
             typeof props.rowKey === 'function'
                 ? props.rowKey
                 : (row: Record<string, any>) =>
-                      row[props.rowKey as string] ?? ''
+                    row[props.rowKey as string] ?? ''
         )
 
         const hasDraggableRows = computed(() =>
@@ -537,7 +537,7 @@ export default defineComponent({
         const onMultipleSelectionSet = (val: boolean) => {
             const value =
                 selectedData.value.length > 0 &&
-                selectedData.value.length === tableRows.value.length
+                    selectedData.value.length === tableRows.value.length
                     ? false
                     : val
 
@@ -754,6 +754,8 @@ export default defineComponent({
                                 group: 'nested',
                                 animation: 150,
                                 fallbackOnBody: true,
+                                forceFallback: true,
+                                fallbackClass: 'dl-tree-table-fallback-row',
                                 invertSwap: true,
                                 swapThreshold: 0.85,
                                 handle: '.draggable-icon',
@@ -787,15 +789,20 @@ export default defineComponent({
             let finalTarget = targetRow.value
             let shouldSkipValidation = false
 
-            if (storedValidTarget.value && targetRow.value) {
-                const isStoredTargetAncestor = isAncestor(
-                    storedValidTarget.value.id,
-                    targetRow.value.id,
-                    tableRows.value
-                )
-                if (isStoredTargetAncestor) {
+            if (storedValidTarget.value) {
+                if (!targetRow.value) {
                     finalTarget = storedValidTarget.value
                     shouldSkipValidation = true
+                } else {
+                    const isStoredTargetAncestor = isAncestor(
+                        storedValidTarget.value.id,
+                        targetRow.value.id,
+                        tableRows.value
+                    )
+                    if (isStoredTargetAncestor) {
+                        finalTarget = storedValidTarget.value
+                        shouldSkipValidation = true
+                    }
                 }
             }
 
@@ -804,9 +811,7 @@ export default defineComponent({
                 targetRow: finalTarget
             })
 
-            const isDragValid =
-                shouldSkipValidation ||
-                checkParentCondition(draggedRow.value, finalTarget)
+            const isDragValid = shouldSkipValidation || checkParentCondition(draggedRow.value, finalTarget)
             if (isDragValid) {
                 const smartSortingMovement = {
                     ...sortingMovement.value,
@@ -825,11 +830,16 @@ export default defineComponent({
         }
 
         const handleChangeEvent = (event: any) => {
-            const originalEvent = event.originalEvent
-            const passedElement = getElementAbove(
-                originalEvent.srcElement,
-                'dl-tr'
-            ) as HTMLElement
+            const originalEvent = event?.originalEvent
+            if (!originalEvent) {
+                return
+            }
+
+            const srcEl =
+                (originalEvent.srcElement ||
+                    originalEvent.target ||
+                    null) as HTMLElement | null
+            const passedElement = srcEl ? getElementAbove(srcEl, 'dl-tr') : null
             if (passedElement) {
                 const targetRowId = passedElement.dataset.id
                 const targetLevel = passedElement.getAttribute('data-level')
@@ -861,14 +871,21 @@ export default defineComponent({
                     targetRow: targetRow.value
                 })
             }
+
             const currentY = originalEvent.clientY
-            if (currentY > prevMouseY) {
-                sortingMovement.value.direction = 'down'
-            } else if (currentY < prevMouseY) {
-                sortingMovement.value.direction = 'up'
+            if (typeof currentY === 'number') {
+                if (currentY > prevMouseY) {
+                    sortingMovement.value.direction = 'down'
+                } else if (currentY < prevMouseY) {
+                    sortingMovement.value.direction = 'up'
+                }
+                prevMouseY = currentY
+            }
+
+            const lastId = passedElement?.dataset?.id
+            if (lastId) {
+                sortingMovement.value.lastId = lastId
             }
-            prevMouseY = currentY
-            sortingMovement.value.lastId = passedElement.dataset.id
         }
 
         const handleStartEvent = (event: any) => {
@@ -1161,6 +1178,8 @@ export default defineComponent({
                                     group: 'nested',
                                     animation: 150,
                                     fallbackOnBody: true,
+                                    forceFallback: true,
+                                    fallbackClass: 'dl-tree-table-fallback-row',
                                     invertSwap: true,
                                     swapThreshold: 0.85,
                                     handle: '.draggable-icon',
@@ -1224,7 +1243,7 @@ export default defineComponent({
         this.vue2h = vue2h
         const tableBodySlot = isVue2
             ? this.$slots['table-body'] &&
-              (() => (this.$slots['table-body'] as any)?.pop())
+            (() => (this.$slots['table-body'] as any)?.pop())
             : this.$slots['table-body']
         const tbody =
             tableBodySlot ?? (this.isDataEmpty ? null : this.renderTBody)
@@ -1287,7 +1306,8 @@ export default defineComponent({
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
-    & > * {
+
+    &>* {
         flex-grow: 1;
     }
 }
@@ -1316,23 +1336,27 @@ tr {
 }
 
 .sticky-header {
+
     ::v-deep .dl-table__top,
     ::v-deep .dl-table__bottom,
     ::v-deep thead tr:first-child th {
         /* bg color is important for th; just specify one */
         background-color: var(--dl-color-panel-background);
     }
+
     ::v-deep thead tr th {
         position: sticky !important;
         z-index: 1;
     }
+
     ::v-deep thead tr:first-child th {
         top: 0;
     }
+
     /* this is when the loading indicator appears */
     &.dl-table--loading thead tr:last-child th {
         /* height of all previous header rows */
         top: 40px;
     }
 }
-</style>
+</style>

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -16,7 +16,7 @@
             }`"
         >
             <dl-icon
-                v-if="hasDraggableRows && !row.disableDraggable"
+               v-if="hasDraggableRows && !row.disableDraggable"
                 class="draggable-icon"
                 icon="icon-dl-drag"
                 size="12px"

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -7,14 +7,12 @@
         }`"
     >
         <label
-            v-if="hasLeftLabel"
+            v-if="!!leftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="left-label">
-                {{ leftLabel }}
-            </slot>
+            {{ leftLabel }}
         </label>
         <span
             class="dl-switch-container"
@@ -37,14 +35,12 @@
             />
         </span>
         <label
-            v-if="hasRightLabel"
+            v-if="!!rightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="right-label">
-                {{ rightLabel }}
-            </slot>
+            {{ rightLabel }}
         </label>
     </div>
 </template>
@@ -147,12 +143,6 @@ export default defineComponent({
                 ? this.index === -1
                 : toRaw(this.modelValue) === toRaw(this.falseValue)
         },
-        hasLeftLabel(): boolean {
-            return !!this.leftLabel || !!this.$slots['left-label']
-        },
-        hasRightLabel(): boolean {
-            return !!this.rightLabel || !!this.$slots['right-label']
-        },
         cssVars(): Record<string, string> {
             return {
                 '--dl-checkbox-height': `${this.size}px`,

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -124,9 +124,7 @@ export default defineComponent({
 
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
-        const scrollSizeItem: Ref<number> = ref(
-            virtualScrollItemSize.value || 40
-        )
+        const scrollSizeItem: Ref<number> = ref(40)
 
         const isDefined = (v: any) => v !== undefined && v !== null
 

package/src/demos/DlDateTimeRangeDemo.vue

@@ -176,26 +176,6 @@
                 @change="handleModelValueUpdate"
             />
         </div>
-        <div style="width: 500px; margin-top: 30px">
-            <div style="margin-bottom: 10px; font-weight: bold">
-                Inline Mode
-            </div>
-            <dl-date-time-range
-                v-model="date"
-                :type="type"
-                width="100%"
-                :available-range="range ? availableRange : null"
-                :mode="mode"
-                :show-time="showTime"
-                :auto-close="autoClose"
-                :including-current-month="includesCurrentMonthEnd"
-                :should-clear-select-first-option="shouldClearSelectFirstOption"
-                :disabled-type="type === 'day' ? 'month' : 'day'"
-                view-mode="inline"
-                @set-type="handleSetType"
-                @change="handleModelValueUpdate"
-            />
-        </div>
     </div>
 </template>
 <script lang="ts">

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -42,7 +42,6 @@
 
         <dl-smart-search-input
             v-model="queryObject"
-            no-tooltip
             :aliases="aliases"
             :schema="schema"
             :color-schema="colorSchema"