@dataloop-ai/components 0.18.53 → 0.18.55

package/package.json

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

package/src/components/basic/DlGrid/DlGrid.vue

@@ -9,14 +9,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
+import { Dictionary } from 'lodash'
 import {
-    getGridTemplate,
-    getElementAbove,
-    findIndexInMatrix,
-    swapElemensInMatrix,
-    isCustomEvent
-} from '../DlWidget/utils'
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    nextTick,
+    onMounted,
+    PropType,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
+import { getGridTemplate, swapElementsInMatrix } from './utils'
+import { isCustomEvent, getElementAbove } from '../utils'
+import { DlGridMode } from './types'
 
 export default defineComponent({
     model: {
@@ -25,7 +32,7 @@ export default defineComponent({
     },
     props: {
         modelValue: {
-            type: Array as PropType<number[][]>,
+            type: Array as PropType<(string | number)[][]>,
             default: null
         },
         rowGap: {
@@ -39,111 +46,147 @@ export default defineComponent({
         maxElementsPerRow: {
             type: Number,
             default: 3
+        },
+        mode: {
+            type: String as PropType<DlGridMode>,
+            default: DlGridMode.LAYOUT
         }
     },
     emits: ['update:model-value', 'layout-changed'],
-    computed: {
-        gridStyles(): object {
-            return {
-                '--row-gap': this.rowGap,
-                '--column-gap': this.columnGap
-            }
-        },
-        gridClass(): string {
-            return this.modelValue
+    setup(props, { emit }) {
+        const vm = getCurrentInstance()
+        const grid = ref<HTMLElement | null>(null)
+        const { modelValue, mode, rowGap, columnGap, maxElementsPerRow } =
+            toRefs(props)
+
+        const isLayoutMode = computed(() => mode.value == DlGridMode.LAYOUT)
+        const isGridMode = computed(() => mode.value == DlGridMode.GRID)
+        const isFlexMode = computed(() => mode.value == DlGridMode.FLEX)
+
+        const gridClass = computed(() =>
+            modelValue.value || !isFlexMode.value
                 ? 'dl-grid-wrapper__grid'
                 : 'dl-grid-wrapper__flex'
+        )
+
+        const gridStyles = computed(() => {
+            const gridStyles: Dictionary<string | number> = {
+                '--row-gap': rowGap.value,
+                '--column-gap': columnGap.value
+            }
+
+            if (!isGridMode.value) {
+                gridStyles['--element-per-row'] = maxElementsPerRow.value
+            }
+
+            return gridStyles
+        })
+
+        const layoutChanged = () => {
+            emit('layout-changed', modelValue.value)
         }
-    },
-    watch: {
-        modelValue: {
-            handler(val, oldVal) {
-                this.$nextTick(() => {
-                    if (val) {
-                        if (val.length !== oldVal?.length) {
-                            this.applyIndexesForChildren()
-                        }
-                        this.applyGridElementStyles()
-                    }
-                })
-            },
-            immediate: true
-        }
-    },
-    mounted() {
-        this.applyIndexesForChildren()
-    },
-    methods: {
-        applyGridElementStyles() {
-            if (!this.modelValue) return
-            const gridElements = Array.from(
-                (this.$refs.grid as HTMLElement).children
+
+        const changePosition = (e: CustomEvent) => {
+            if (!modelValue.value) {
+                return
+            }
+            const className = grid.value.children[0].classList[0]
+            const sourceEl = getElementAbove(e.detail.source, className)
+            const targetEl = getElementAbove(e.detail.target, className)
+
+            const newLayout: (string | number)[][] = swapElementsInMatrix(
+                modelValue.value,
+                sourceEl,
+                targetEl
             )
-            const gridTemplate = getGridTemplate(this.modelValue)
-            if (gridElements.length > gridTemplate.length) return
+            // Update modelValue is required to trigger visualization of the changes
+            emit('update:model-value', newLayout)
 
-            const order = this.modelValue.flat()
-            gridElements.forEach((element: Element, index: number) => {
-                const orderIndex =
-                    order.findIndex((nr: number) => nr === index + 1) + 1
+            // Force update is required to trigger the re-render of the grid
+            vm?.proxy?.$forceUpdate()
+
+            if (e.detail.endDragging) {
+                layoutChanged()
+            }
+        }
+
+        const applyGridElementStyles = () => {
+            const childrenElements = Array.from(grid.value.children)
+            const layoutOrder = modelValue.value?.flat() ?? []
+
+            // The check is needed to avoid errors and incorrect behavior
+            if (
+                !modelValue.value ||
+                childrenElements.length > layoutOrder.flat().length ||
+                isFlexMode.value
+            ) {
+                for (const element of childrenElements) {
+                    const htmlElement = element as HTMLElement
+                    htmlElement.style.flexGrow = '1'
+                }
+                return
+            }
+
+            let gridTemplate: string[]
+            if (isGridMode.value) {
+                gridTemplate = getGridTemplate(modelValue.value)
+            }
+            for (const element of childrenElements) {
                 const htmlElement = element as HTMLElement
+                const orderIndex: number = layoutOrder
+                    .flat()
+                    .findIndex((w) => w === htmlElement.dataset.id)
+                if (isGridMode.value) {
+                    htmlElement.style.gridColumn = gridTemplate[orderIndex]
+                }
                 htmlElement.style.order = `${orderIndex}`
-                htmlElement.style.gridColumn = gridTemplate[orderIndex - 1]
                 htmlElement.addEventListener('position-changing', (e) => {
                     if (!isCustomEvent(e)) return
-                    this.changePosition(e)
+                    changePosition(e)
                 })
-                htmlElement.addEventListener(
-                    'position-changed',
-                    this.layoutChanged.bind(this)
-                )
-            })
-        },
-        changePosition(e: CustomEvent) {
-            if (!this.modelValue) return
-            const side = e.detail.side
-            const className = (this.$refs.grid as HTMLElement).children[0]
-                .classList[0]
-            const sourceIndex =
-                parseInt(
-                    getElementAbove(e.detail.source, className).dataset.index
-                ) + 1
-            const targetIndex =
-                parseInt(
-                    getElementAbove(e.detail.target, className).dataset.index
-                ) + 1
-            const sourceMatrixIndex = findIndexInMatrix(
-                this.modelValue,
-                sourceIndex
-            )
-            const targetMatrixIndex = findIndexInMatrix(
-                this.modelValue,
-                targetIndex
-            )
+                htmlElement.addEventListener('position-changed', layoutChanged)
+            }
+        }
 
-            const newLayout = swapElemensInMatrix(
-                this.modelValue,
-                sourceMatrixIndex,
-                targetMatrixIndex,
-                side,
-                this.maxElementsPerRow
-            )
-            // Update modelValue is required to trigger visualization of the changes
-            this.$emit('update:model-value', newLayout)
-            if (e.detail.endDragging) {
-                this.layoutChanged()
+        const applyIndexesForChildren = () => {
+            if (!modelValue.value) {
+                return
             }
-        },
-        layoutChanged() {
-            this.$emit('layout-changed', this.modelValue)
-        },
-        applyIndexesForChildren() {
-            Array.from((this.$refs.grid as HTMLElement).children).forEach(
+            Array.from(grid.value.children).forEach(
                 (element: Element, index: number) => {
-                    (element as HTMLElement).dataset.index = `${index}`
+                    const el = element as HTMLElement
+                    el.dataset.id = `${modelValue.value.flat()[index]}`
                 }
             )
         }
+
+        watch(
+            modelValue,
+            (val, old) => {
+                nextTick(() => {
+                    if (val) {
+                        if (val.flat().length !== old?.flat().length) {
+                            applyIndexesForChildren()
+                        }
+                        applyGridElementStyles()
+                    }
+                })
+            },
+            { immediate: true }
+        )
+
+        onMounted(() => {
+            applyGridElementStyles()
+        })
+
+        return {
+            isLayoutMode,
+            isGridMode,
+            isFlexMode,
+            gridClass,
+            gridStyles,
+            grid
+        }
     }
 })
 </script>
@@ -154,9 +197,11 @@ export default defineComponent({
         display: grid;
         row-gap: var(--row-gap);
         column-gap: var(--column-gap);
+        grid-template-columns: repeat(var(--element-per-row), 1fr);
     }
     &__flex {
         display: flex;
+        gap: var(--row-gap);
         flex-wrap: wrap;
     }
 }

package/src/components/basic/DlGrid/types.ts

@@ -1,5 +1,10 @@
 export interface DlGridLayout {
     name: string
-    value: number[][]
+    value: (number | string)[][]
+}
+
+export enum DlGridMode {
+    GRID = 'grid',
+    FLEX = 'flex',
+    LAYOUT = 'layout'
 }
-export type DlGridSideType = 'left' | 'right'

package/src/components/basic/DlGrid/utils.ts

@@ -0,0 +1,69 @@
+import { cloneDeep } from 'lodash'
+
+function leastCommonMultiple(arr: number[]) {
+    if (!arr || !arr.length) {
+        return
+    }
+
+    const gcd = (a: number, b: number): number => (a ? gcd(b % a, a) : b)
+    const lcm = (a: number, b: number): number => (a * b) / gcd(a, b)
+    return arr.reduce(lcm)
+}
+
+function buildNewLayoutOrder(
+    layout: (string | number)[],
+    matrix: (string | number)[][]
+) {
+    const template: (string | number)[][] = []
+    let index = 0
+
+    for (const row of matrix) {
+        const templateRow: (string | number)[] = []
+        for (const cell of row) {
+            templateRow.push(layout[index])
+            index++
+        }
+        template.push(templateRow)
+    }
+
+    return template
+}
+
+export function getGridTemplate(layout: (string | number)[][]) {
+    if (!layout) {
+        return
+    }
+
+    const flatLayout = layout.map((el) => el.length)
+    const template = []
+    const lcm = leastCommonMultiple(flatLayout)
+    for (let i = 0; i < flatLayout.length; i++) {
+        const columns = flatLayout[i]
+        let columnTrack = 1
+        for (let j = 0; j < columns; j++) {
+            let gridSpan = lcm / columns
+            template.push(`${columnTrack} / ${gridSpan + columnTrack}`)
+            columnTrack += gridSpan
+            gridSpan += gridSpan
+        }
+    }
+    return template
+}
+
+export function swapElementsInMatrix(
+    oldLayout: (string | number)[][],
+    sourceEl: HTMLElement,
+    targetEl: HTMLElement
+) {
+    if (!sourceEl || !targetEl) {
+        return oldLayout
+    }
+    const newLayout = cloneDeep(oldLayout).flat(1)
+
+    const sourceIndex = newLayout.indexOf(sourceEl.dataset.id)
+    const targetIndex = newLayout.indexOf(targetEl.dataset.id)
+    newLayout.splice(sourceIndex, 1)
+    newLayout.splice(targetIndex, 0, sourceEl.dataset.id)
+
+    return buildNewLayoutOrder(newLayout, oldLayout)
+}

package/src/components/basic/DlWidget/DlWidget.vue

@@ -66,7 +66,7 @@
 import { v4 } from 'uuid'
 import { computed, defineComponent, ref, toRef, PropType } from 'vue-demi'
 import { DlIcon } from '../../essential'
-import { getElementAbove, addMouseEnter, removeMouseEnter } from './utils'
+import { getElementAbove, addMouseEnter, removeMouseEnter } from '../utils'
 import { DlEmptyStateProps } from '../DlEmptyState/types'
 import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 
@@ -77,7 +77,10 @@ export default defineComponent({
         DlEmptyState
     },
     props: {
-        isEmpty: Boolean,
+        isEmpty: {
+            type: Boolean,
+            default: false
+        },
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: null
@@ -126,6 +129,7 @@ export default defineComponent({
             if (draggedWidget.value && clone.value) {
                 clone.value.appendChild(draggedWidget.value.cloneNode(true))
                 clone.value.style.visibility = 'visible'
+                clone.value.style.position = 'fixed'
                 clone.value.style.width = `${draggedWidget.value.offsetWidth}px`
                 clone.value.style.height = `${draggedWidget.value.offsetHeight}px`
                 clone.value.style.backgroundColor = `var(--dl-color-bg)`

package/src/components/basic/utils.ts

@@ -0,0 +1,27 @@
+export function getElementAbove(el: HTMLElement, className: string) {
+    //@ts-ignore
+    for (; el && el !== document; el = el.parentNode) {
+        if (el.classList.contains(className)) {
+            return el
+        }
+    }
+}
+
+export function addMouseEnter(className: string, method: EventListenerObject) {
+    Array.from(document.getElementsByClassName(className)).forEach((widget) => {
+        widget.addEventListener('mouseenter', method)
+    })
+}
+
+export function removeMouseEnter(
+    className: string,
+    method: EventListenerObject
+) {
+    Array.from(document.getElementsByClassName(className)).forEach((widget) => {
+        widget.removeEventListener('mouseenter', method)
+    })
+}
+
+export function isCustomEvent(event: Event): event is CustomEvent {
+    return 'detail' in event
+}

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

@@ -550,7 +550,8 @@ import {
     getCurrentInstance,
     ComputedRef,
     onMounted,
-    toRef
+    toRef,
+    toRefs
 } from 'vue-demi'
 import { props } from './utils/props'
 import { emits } from './utils/emits'
@@ -608,8 +609,16 @@ export default defineComponent({
     emits,
     setup(props, { emit, slots }) {
         const vm = getCurrentInstance()
-
-        const rootRef = ref(null)
+        const {
+            tableStyle,
+            tableClass,
+            tableHeaderStyle,
+            tableHeaderClass,
+            dense,
+            draggable
+        } = toRefs(props)
+
+        const rootRef = ref<HTMLDivElement>(null)
         const virtScrollRef = ref(null)
         const hasVirtScroll = computed(() => props.virtualScroll === true)
 
@@ -691,10 +700,10 @@ export default defineComponent({
         })
 
         const hasDraggableRows = computed(() =>
-            ['rows', 'both'].includes(props.draggable)
+            ['rows', 'both'].includes(draggable.value)
         )
         const hasDraggableColumns = computed(() =>
-            ['columns', 'both'].includes(props.draggable)
+            ['columns', 'both'].includes(draggable.value)
         )
 
         let removeDraggableRows = () => {}
@@ -808,12 +817,13 @@ export default defineComponent({
         )
 
         watch(
-            () =>
-                (props.tableStyle as string) +
-                props.tableClass +
-                props.tableHeaderStyle +
-                props.tableHeaderClass +
-                __containerClass,
+            [
+                tableStyle,
+                tableClass,
+                tableHeaderStyle,
+                tableHeaderClass,
+                __containerClass
+            ],
             () => {
                 if (
                     hasVirtScroll.value === true &&
@@ -828,7 +838,7 @@ export default defineComponent({
             useTablePaginationState(vm, getCellValue)
 
         watch(
-            [computedPagination, () => props.dense],
+            [computedPagination, dense],
             () => {
                 if (tableEl && props.resizable && resizableManager) {
                     const tableHeight = tableEl.offsetHeight || 0
@@ -1075,7 +1085,7 @@ export default defineComponent({
             toIndex = parseInt(toIndex as string, 10)
             const rowEl = rootRef.value.querySelector(
                 `tbody tr:nth-of-type(${toIndex + 1})`
-            )
+            ) as HTMLElement
 
             if (rowEl !== null) {
                 const scrollTarget = rootRef.value.querySelector(