@dataloop-ai/components 0.20.185 → 0.20.186

package/package.json

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

package/src/assets/globals.scss

@@ -1,4 +1,4 @@
-@import "./theme.css";
+@import './theme.css';
 
 body {
     & > * {
@@ -8,6 +8,231 @@ body {
     }
 }
 
+html.dl-sortable--dragging,
+html.dl-sortable--dragging * {
+    cursor: grabbing !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+.dl-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-fill-hover);
+}
+
+tr.dl-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+}
+
+tr.dl-table-fallback-row.sortable-drag > th,
+tr.dl-table-fallback-row.sortable-drag > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+    height: 40px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+tbody.dl-table-fallback-row.sortable-drag {
+    display: table-row-group !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-panel-background);
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+}
+
+tr.dl-tree-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-panel-background);
+}
+
+tr.dl-tree-table-fallback-row.sortable-drag > th,
+tr.dl-tree-table-fallback-row.sortable-drag > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+    height: 40px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+tbody.dl-tree-table-fallback-row.sortable-drag {
+    display: table-row-group !important;
+}
+
+.dl-table-fallback-row.sortable-drag > tr {
+    display: table-row;
+    height: 40px;
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr {
+    display: table-row;
+    height: 40px;
+    vertical-align: middle;
+}
+
+.dl-table-fallback-row.sortable-drag > tr > th,
+.dl-table-fallback-row.sortable-drag > tr > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr > th,
+.dl-tree-table-fallback-row.sortable-drag > tr > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr:first-child > th,
+.dl-tree-table-fallback-row.sortable-drag > tr:first-child > td {
+    background-color: var(--dl-color-fill-hover);
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) > th,
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) > td {
+    background-color: var(--dl-color-fill-hover);
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td:first-child,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.dl-table--col-auto-width,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container
+    *,
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) .chevron-icon,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    .chevron-icon
+    * {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td:first-child,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.dl-table--col-auto-width,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td:nth-child(-n + 3) {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr:not(:first-child)
+    > td:nth-child(-n + 3) {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container
+    *,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    .chevron-icon,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    .chevron-icon
+    * {
+    background-color: transparent !important;
+}
+
+.dl-table-fallback-row.sortable-drag .draggable-icon {
+    visibility: hidden !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag .draggable-icon {
+    visibility: hidden !important;
+}
+
+.dl-table-fallback-row.sortable-drag > tr:not(:first-child) {
+    display: none !important;
+}
+
 // tranform
 .rotate-180 {
     transform: rotate(180deg);
@@ -145,7 +370,6 @@ body {
 }
 
 .non-draggable {
-    user-drag: none;
     -webkit-user-drag: none;
     user-select: none;
     -moz-user-select: none;
@@ -185,7 +409,6 @@ body {
     height: 100%;
 }
 
-
 // scrollbar
 
 html {

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

@@ -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
@@ -1762,7 +1762,8 @@ export default defineComponent({
 
         const colspanForProgressBar = computed(() => {
             return (
-                colspanWithExpandableRow.value - (hasDraggableRows.value ? 0 : 1)
+                colspanWithExpandableRow.value -
+                (hasDraggableRows.value ? 0 : 1)
             )
         })
 
@@ -2091,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

@@ -100,33 +100,175 @@ export function useSortable(vm: Record<string, any>) {
     })
 
     watch(rootRef, (newRootRef) => {
-
         if (sortable.value) {
             sortable.value.destroy()
             sortable.value = null
         }
-        
+
         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
+                    }
                 }
             }
 
@@ -823,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')
@@ -859,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) => {
@@ -929,7 +948,7 @@ export default defineComponent({
             }
 
             const isValid = checkParentCondition(draggedRow.value, targetRow)
-            
+
             if (isValid) {
                 storedValidTarget.value = targetRow
             }
@@ -1159,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',
@@ -1222,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)
@@ -1285,7 +1306,8 @@ export default defineComponent({
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
-    & > * {
+
+    &>* {
         flex-grow: 1;
     }
 }
@@ -1314,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>