@dataloop-ai/components 0.18.145 → 0.19.0

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

@@ -1,18 +1,15 @@
 <template>
     <td
+        ref="tableTd"
         :class="classes"
         :style="styles"
+        :data-col-index="colIndex"
     >
-        <div
-            ref="tableTd"
-            class="dl-table-cell-inner-div"
-        >
-            <slot name="icon" />
-            <dl-tooltip v-if="hasEllipsis">
-                <slot />
-            </dl-tooltip>
+        <slot name="icon" />
+        <dl-tooltip v-if="hasEllipsis">
             <slot />
-        </div>
+        </dl-tooltip>
+        <slot />
     </td>
 </template>
 
@@ -38,6 +35,10 @@ export default defineComponent({
         bgColor: {
             type: String,
             default: ''
+        },
+        colIndex: {
+            type: Number,
+            default: null
         }
     },
     setup(props) {

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

@@ -1,6 +1,8 @@
 <template>
     <tr
         ref="dlTrTreeRef"
+        :data-level="props.row.level"
+        :data-id="props.row.id"
         :class="trClasses"
         v-bind="$attrs"
         v-on="listeners"
@@ -11,6 +13,7 @@
 
 <script lang="ts">
 import { defineComponent, isVue2 } from 'vue-demi'
+import { DlTableRow } from '../../types'
 
 export default defineComponent({
     name: 'DlTrTree',
@@ -54,7 +57,17 @@ export default defineComponent({
             return classes
         }
     },
+
     watch: {
+        'props.row': {
+            handler(row: DlTableRow) {
+                (this.$refs.dlTrTreeRef as any).setAttribute(
+                    'data-is-visible',
+                    row.isExpandedParent || row.level === 1
+                )
+            },
+            deep: true
+        },
         childrenComputed(value) {
             (this.$refs.dlTrTreeRef as any).setAttribute(
                 'data-children',

package/src/components/compound/DlTreeTable/emits.ts

@@ -5,10 +5,10 @@ export const emits = [
     'request',
     'virtual-scroll',
     'row-reorder',
-    'col-reorder',
+    'col-update',
     'row-click',
     'th-click',
-    'row-dblclick',
+    'row-double-click',
     'row-contextmenu',
     'update-visible-columns',
     ...useTableRowExpandEmits,

package/src/components/compound/DlTreeTable/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './convertToNestedObject'
+export * from '././getFromChildren'
+export * from './getRowKey'
+export * from './moveNestedRow'
+export * from './trSpacing'
+export * from './treeTableRowSelection'

package/src/components/compound/DlTreeTable/utils/moveNestedRow.ts

@@ -0,0 +1,95 @@
+import { SortableEvent } from 'sortablejs'
+import { SortingMovement } from '../../types'
+
+interface NestedObject {
+    id: string
+    children?: NestedObject[]
+    [key: string]: any
+}
+
+export function moveNestedRow(
+    rows: any[],
+    event: SortableEvent,
+    sortingMovement: SortingMovement
+) {
+    const sourceId = event.item.querySelector('tr').dataset.id
+    const { lastId, direction } = sortingMovement
+    return moveItem(rows, sourceId, lastId, direction)
+}
+
+function moveItem(
+    objects: NestedObject[],
+    sourceId: string,
+    targetId: string,
+    direction: 'up' | 'down'
+): NestedObject[] {
+    const findItemAndParent = (
+        items: NestedObject[],
+        id: string,
+        parent: NestedObject | null = null
+    ): { item: NestedObject | null; parent: NestedObject | null } => {
+        for (const item of items) {
+            if (item.id === id) {
+                return { item, parent }
+            }
+            if (item.children) {
+                const result = findItemAndParent(item.children, id, item)
+                if (result.item) {
+                    return result
+                }
+            }
+        }
+        return { item: null, parent }
+    }
+
+    const cloneObjects = (objectsToClone: NestedObject[]): NestedObject[] => {
+        return objectsToClone.map((obj) => ({ ...obj }))
+    }
+
+    const rootObjects = cloneObjects(objects)
+    const { item: sourceItem, parent: sourceParent } = findItemAndParent(
+        rootObjects,
+        sourceId
+    )
+    const { item: targetItem, parent: targetParent } = findItemAndParent(
+        rootObjects,
+        targetId
+    )
+
+    if (!sourceItem || !targetItem) {
+        return rootObjects
+    }
+
+    if (sourceItem === targetItem) {
+        return rootObjects
+    }
+
+    if (sourceParent) {
+        const sourceIndex = sourceParent.children!.findIndex(
+            (child) => child.id === sourceId
+        )
+        if (sourceIndex !== -1) {
+            sourceParent.children!.splice(sourceIndex, 1)
+        }
+    } else {
+        const sourceIndex = rootObjects.findIndex(
+            (item) => item.id === sourceId
+        )
+        if (sourceIndex !== -1) {
+            rootObjects.splice(sourceIndex, 1)
+        }
+    }
+    const targetIndex = targetParent
+        ? targetParent.children!.findIndex((child) => child.id === targetId)
+        : rootObjects.findIndex((item) => item.id === targetId)
+
+    const insertIndex = direction === 'up' ? targetIndex : targetIndex + 1
+
+    if (targetParent) {
+        targetParent.children!.splice(insertIndex, 0, sourceItem)
+    } else {
+        rootObjects.splice(insertIndex, 0, sourceItem)
+    }
+
+    return rootObjects
+}

package/src/components/compound/DlTreeTable/utils/trSpacing.ts

@@ -10,4 +10,15 @@ const setTrSpacing = (item: Record<string, any>) => {
     return `padding-left: ${paddingLeft}px;`
 }
 
-export { setTrSpacing }
+const setTrPadding = (level = 1, hasChildren = false, colIndex = 0) => {
+    let paddingLeft = 0
+
+    if (colIndex == 0) {
+        paddingLeft = (level - 1) * 16
+        return paddingLeft
+    }
+
+    return paddingLeft
+}
+
+export { setTrSpacing, setTrPadding }

package/src/components/compound/DlTreeTable/utils/treeTableRowSelection.ts

@@ -16,7 +16,7 @@ export const useTreeTableRowSelectionProps = {
     }
 }
 
-export const useTreeTableRowSelectionEmits = ['selection', 'selectedItems']
+export const useTreeTableRowSelectionEmits = ['selection', 'selected-iitems']
 
 export function useTreeTableRowSelection(
     props: DlTableProps,
@@ -49,21 +49,23 @@ export function useTreeTableRowSelection(
         return props.selection === 'multiple'
     })
 
-    const allRowsSelected = computed(
-        () =>
+    const allRowsSelected = computed(() => {
+        return (
             computedRows.value.length > 0 &&
             computedRows.value.every(
                 (row) => selectedKeys.value[getRowKey.value(row)] === true
             )
-    )
+        )
+    })
 
-    const someRowsSelected = computed(
-        () =>
+    const someRowsSelected = computed(() => {
+        return (
             allRowsSelected.value !== true &&
             computedRows.value.some(
                 (row) => selectedKeys.value[getRowKey.value(row)] === true
             )
-    )
+        )
+    })
 
     const rowsSelectedNumber = computed(() => selectedRows.value.length)
 
@@ -82,6 +84,7 @@ export function useTreeTableRowSelection(
         evt?: (event: string, val: any) => void
     ) {
         emit('selection', { rows, added, keys, evt })
+
         /*
         const payload =
             singleSelection.value === true

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

@@ -1,20 +1,32 @@
 <template>
     <DlTrTree
-        v-show="row.isExpandedParent || row.level === 1"
         :class="rowClass"
         :no-hover="noHover"
         :children="childrenCount"
+        :props="{ row }"
         @click="emitRowClick($event, row, rowIndex)"
         @dblclick="onTrDoubleClick($event, row, rowIndex)"
         @contextmenu="onTrContextMenu($event, row, rowIndex)"
+        @mouseenter="isDragIconVisible = true"
+        @mouseleave="isDragIconVisible = false"
     >
-        <td v-if="hasDraggableRows">
+        <td
+            v-if="hasDraggableRows"
+            :style="`width: 25px; opacity: ${isDragIconVisible ? '1' : '0'}`"
+        >
             <dl-icon
                 class="draggable-icon"
                 icon="icon-dl-drag"
                 size="12px"
             />
         </td>
+        <td class="chevron-icon">
+            <DlIcon
+                v-if="(row.children || []).length > 0"
+                :icon="`icon-dl-${row.isExpanded ? 'down' : 'right'}-chevron`"
+                @click="emitUpdateExpandedRow"
+            />
+        </td>
         <td
             v-if="hasSelectionMode"
             class="dl-table--col-auto-with"
@@ -40,16 +52,18 @@
             v-for="(col, colIndex) in computedCols"
             :key="colIndex"
             :class="col.tdClass(row)"
-            :style="col.tdStyle(row) + getTdStyles(row, colIndex)"
+            :style="
+                col.tdStyle(row) +
+                    `padding-left: ${
+                        setTrPadding(
+                            level,
+                            (row.children || []).length > 0,
+                            colIndex
+                        ) + 1
+                    }px;`
+            "
+            :col-index="colIndex"
         >
-            <template #icon="{}">
-                <DlIcon
-                    v-if="(row.children || []).length > 0 && colIndex === 0"
-                    style="margin-right: 5px"
-                    :icon="`icon-dl-${row.expanded ? 'down' : 'right'}-chevron`"
-                    @click="emitUpdateExpandedRow"
-                />
-            </template>
             <template v-if="!hasSlotByName(`body-cell-${col.name}`)">
                 {{ getCellValue(col, row) }}
             </template>
@@ -70,7 +84,8 @@ import {
     onMounted,
     ref,
     toRefs,
-    watch
+    watch,
+    getCurrentInstance
 } from 'vue-demi'
 import DlTrTree from '../components/DlTrTree.vue'
 import DlTdTree from '../components/DlTdTree.vue'
@@ -78,7 +93,8 @@ import DlIcon from '../../../essential/DlIcon/DlIcon.vue'
 import DlCheckbox from '../../../essential/DlCheckbox/DlCheckbox.vue'
 import { getRowKey } from '../utils/getRowKey'
 import { DlTableRow } from '../../DlTable/types'
-import { setTrSpacing } from '../utils/trSpacing'
+import { setTrPadding } from '../utils/trSpacing'
+import { getCellValue } from '../../DlTable/utils/getCellValue'
 
 export default defineComponent({
     name: 'DlTrTreeView',
@@ -108,6 +124,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        level: {
+            type: Number,
+            default: 1
+        },
         rowIndex: {
             type: Number,
             required: true
@@ -139,35 +159,22 @@ export default defineComponent({
         modelValue: {
             type: [String, Boolean],
             default: null
-        },
-        slotName: {
-            type: String,
-            default: null
-        },
-        computedRows: {
-            type: Array as PropType<DlTableRow[]>,
-            default: () => [] as DlTableRow[]
-        },
-        cellValue: {
-            type: String,
-            default: null
-        },
-        slotsProps: {
-            type: Object as PropType<Record<string, any>>,
-            default: () => ({})
         }
     },
-    emit: [
+    emits: [
         'rowClick',
-        'rowDblClick',
+        'rowDoubleClick',
         'rowContextMenu',
         'update:model-value',
         'updateExpandedRow'
     ],
     setup(props, context) {
-        const visibleChildren = ref(1)
-        const childrenCount = ref(1)
+        const visibleChildren = ref(0)
+        const childrenCount = ref(0)
         const { row } = toRefs(props)
+        const isDragIconVisible = ref(false)
+
+        const vm = getCurrentInstance()
 
         watch(
             row,
@@ -208,19 +215,10 @@ export default defineComponent({
             context.emit('update:model-value', adding, evt)
         }
 
-        const getTdStyles = (
-            row: (typeof props.computedRows)[number],
-            colIndex: number
-        ) => {
+        const getTdStyles = (row: any, colIndex: number) => {
             let styles = ''
             if (colIndex === 0) {
                 styles = 'max-width: 100px; box-sizing: border-box;'
-                styles =
-                    styles +
-                    setTrSpacing({
-                        ...row,
-                        colIndex
-                    })
             }
 
             return styles
@@ -228,19 +226,6 @@ export default defineComponent({
         const emitUpdateExpandedRow = () => {
             context.emit('updateExpandedRow')
         }
-        const getCellValue = (
-            col: Record<string, any>,
-            row: Record<string, any>
-        ) => {
-            if (!col) {
-                return
-            }
-            const val =
-                typeof col?.field === 'function'
-                    ? col.field(row)
-                    : row[col.field]
-            return col?.format !== void 0 ? col.format(val, row) : val
-        }
 
         const hasSlotByName = (name: string) => !!context.slots[name]
 
@@ -258,7 +243,7 @@ export default defineComponent({
                 return ' cursor-pointer'
             }
 
-            return ''
+            return 'dl-tr'
         }
 
         const getExpandedvisibleChildren = (): void => {
@@ -320,12 +305,14 @@ export default defineComponent({
         return {
             visibleChildren,
             childrenCount,
+            isDragIconVisible,
             getRowKey,
             emitRowClick,
             onTrDoubleClick,
             onTrContextMenu,
             emitUpdateModelValue,
             getTdStyles,
+            setTrPadding,
             emitUpdateExpandedRow,
             getCellValue,
             hasSlotByName,
@@ -338,4 +325,11 @@ export default defineComponent({
 })
 </script>
 
-<style scoped src="../../DlTable/styles/dl-table-styles.scss" lang="scss" />
+<style scoped lang="scss">
+@import '../../DlTable/styles/dl-table-styles.scss';
+.chevron-icon {
+    cursor: pointer;
+    width: 25px;
+    padding: 5px;
+}
+</style>

package/src/components/essential/DlMenu/DlMenu.vue

@@ -210,6 +210,8 @@ export default defineComponent({
                 (props.square === true ? ' dl-menu--square' : '')
         )
 
+        const isInitialized = ref(false)
+
         const { hide } = useModelToggle({
             showing,
             canShow,
@@ -356,6 +358,8 @@ export default defineComponent({
             conditionalHandler(!hiding, () => {
                 refocusTarget = null
             })
+
+            isInitialized.value = false
         }
 
         function configureScrollTarget() {
@@ -396,6 +400,27 @@ export default defineComponent({
                 return
             }
 
+            if ((vm.parent.proxy as any).draggable) {
+                if (!isInitialized.value) {
+                    isInitialized.value = true
+                    setPosition({
+                        el,
+                        offset: props.offset as number[],
+                        anchorEl: anchorEl.value as HTMLElement,
+                        anchorOrigin: anchorOrigin.value,
+                        selfOrigin: selfOrigin.value,
+                        absoluteOffset,
+                        fitContainer: props.fitContainer,
+                        fitContent: props.fitContent,
+                        cover: props.cover,
+                        maxHeight: props.maxHeight,
+                        maxWidth: props.maxWidth
+                    })
+                }
+
+                return
+            }
+
             const isAnchorElVisible = await CheckAnchorElVisibility(
                 anchorEl.value,
                 {

package/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './shared'
 export * from './essential'
 export * from './basic'
 export * from './compound'
+export * from './blocks'

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

@@ -255,7 +255,8 @@ export default defineComponent({
             )
 
             if (isDefined(slots.before)) {
-                child = slots.before().concat(child)
+                const before = slots.before()
+                child = before ? before.concat(child) : child
             }
 
             return mergeSlot(slots.after, child)

package/src/components/shared/DlVirtualScroll/styles/dl-virtual-scroll-styles.scss

@@ -1,52 +1,73 @@
 .dl-virtual-scroll {
     &:focus {
-      outline: 0;
+        outline: 0;
     }
     &__content {
-      outline: none;
-      contain: content;
-  
-      & > * {
-        overflow-anchor: none;
-      }
-     & > [data-dl-vs-anchor] {
-        overflow-anchor: auto;
-      }
+        outline: none;
+        contain: content;
+
+        & > * {
+            overflow-anchor: none;
+        }
+        & > [data-dl-vs-anchor] {
+            overflow-anchor: auto;
+        }
     }
     &__padding {
-      background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"};
-      background-size: var(--dl-virtual-scroll-item-width, 100%) var(--dl-virtual-scroll-item-height, 50px) #{"/* rtl:ignore */"};
-  
-      .dl-table & {
-        tr {
-          height: 0 !important;
-        }
-        td {
-          padding: 0 !important;
+        background: linear-gradient(
+                rgba(255, 255, 255, 0),
+                rgba(255, 255, 255, 0) 20%,
+                rgba(128, 128, 128, 0.03) 20%,
+                rgba(128, 128, 128, 0.08) 50%,
+                rgba(128, 128, 128, 0.03) 80%,
+                rgba(255, 255, 255, 0) 80%,
+                rgba(255, 255, 255, 0)
+            )
+            #{'/* rtl:ignore */'};
+        background-size: var(--dl-virtual-scroll-item-width, 100%)
+            var(--dl-virtual-scroll-item-height, 50px) #{'/* rtl:ignore */'};
+
+        .dl-table & {
+            tr {
+                height: 0 !important;
+            }
+            td {
+                padding: 0 !important;
+            }
         }
-      }
     }
     &--horizontal {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: stretch;
-  
-      .dl-virtual-scroll {
-        &__content {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-        }
-        &__padding,
-        &__content,
-        &__content > * {
-          flex: 0 0 auto;
-        }
-        &__padding {
-          background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"};
-          background-size: var(--dl-virtual-scroll-item-width, 50px) var(--dl-virtual-scroll-item-height, 100%) #{"/* rtl:ignore */"};
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+
+        .dl-virtual-scroll {
+            &__content {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+            }
+            &__padding,
+            &__content,
+            &__content > * {
+                flex: 0 0 auto;
+            }
+            &__padding {
+                background: linear-gradient(
+                        to left,
+                        rgba(255, 255, 255, 0),
+                        rgba(255, 255, 255, 0) 20%,
+                        rgba(128, 128, 128, 0.03) 20%,
+                        rgba(128, 128, 128, 0.08) 50%,
+                        rgba(128, 128, 128, 0.03) 80%,
+                        rgba(255, 255, 255, 0) 80%,
+                        rgba(255, 255, 255, 0)
+                    )
+                    #{'/* rtl:ignore */'};
+                background-size: var(--dl-virtual-scroll-item-width, 50px)
+                    var(--dl-virtual-scroll-item-height, 100%) #{'/* rtl:ignore */'};
+            }
         }
-      }
     }
-  }
+}

package/src/components/types.ts

@@ -2,6 +2,7 @@ export * from './shared/types'
 export * from './essential/types'
 export * from './basic/types'
 export * from './compound/types'
+export * from './blocks/types'
 
 import { TInputSizes as DlInputSizes } from '../utils/input-sizes'
 export type { DlInputSizes }