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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.186-ds-v3.0",
+  "version": "0.20.187-ds-v3.0",
   "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
@@ -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

@@ -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
+                    }
                 }
             }
 
@@ -825,11 +832,15 @@ 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 +872,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 +1179,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',
@@ -1287,6 +1307,7 @@ export default defineComponent({
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
+
     & > * {
         flex-grow: 1;
     }
@@ -1322,13 +1343,16 @@ tr {
         /* 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 */