@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -6,36 +6,55 @@
         <div
             :id="uuid"
             ref="widget"
-            :class="widgetStyles"
+            :class="widgetClasses"
+            @mouseenter="handleVisibleDragIcon(true)"
+            @mouseleave="handleVisibleDragIcon(false)"
         >
-            <div
-                class="dl-widget__header"
-                @mouseenter="visibleDragIcon = true"
-                @mouseleave="visibleDragIcon = false"
-            >
-                <div class="dl-widget__header--titles">
-                    <slot name="header" />
+            <dl-icon
+                v-if="draggable"
+                :style="iconStyles"
+                class="dl-widget__drag-icon"
+                icon="icon-dl-drag"
+                color="dl-color-medium"
+                size="15px"
+                @mousedown="startDragging"
+            />
+            <slot>
+                <div class="dl-widget__header">
+                    <div class="dl-widget__header--titles">
+                        <slot name="header" />
+                    </div>
+                    <slot name="menu" />
                 </div>
-                <dl-icon
-                    :style="`visibility: ${
-                        visibleDragIcon ? 'visible' : 'hidden'
-                    }`"
-                    class="dl-widget__header--drag-icon"
-                    icon="icon-dl-drag"
-                    color="dl-color-medium"
-                    size="15px"
-                    @mousedown="startDragging"
-                />
-                <slot name="menu" />
-            </div>
-
-            <div class="dl-widget__content">
-                <slot name="content" />
-            </div>
-
-            <div class="dl-widget__description">
-                <slot name="description" />
-            </div>
+
+                <div class="dl-widget__content">
+                    <dl-empty-state
+                        v-if="isEmpty"
+                        v-bind="emptyStateProps"
+                    >
+                        <template
+                            v-for="(_, slot) in $slots"
+                            #[slot]="props"
+                        >
+                            <slot
+                                :name="slot"
+                                v-bind="props"
+                            />
+                        </template>
+                    </dl-empty-state>
+                    <slot
+                        v-if="!isEmpty"
+                        name="content"
+                    />
+                </div>
+
+                <div
+                    v-if="!isEmpty"
+                    class="dl-widget__description"
+                >
+                    <slot name="description" />
+                </div>
+            </slot>
         </div>
         <div
             ref="clone"
@@ -45,143 +64,232 @@
 </template>
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
+import { computed, defineComponent, ref, toRef, PropType } from 'vue-demi'
 import { DlIcon } from '../../essential'
-import {
-    getElementAbove,
-    addMouseEnter,
-    removeMouseEnter,
-    setFlexBasis,
-    insertAfter
-} from './utils'
-import { swapNodes } from '../../../utils/swapNodes'
+import { getElementAbove, addMouseEnter, removeMouseEnter } from './utils'
+import { DlEmptyStateProps } from '../DlEmptyState/types'
+import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 
 export default defineComponent({
     name: 'DlWidget',
     components: {
-        DlIcon
+        DlIcon,
+        DlEmptyState
     },
-    data() {
-        return {
-            uuid: `dl-widget-${v4()}`,
-            draggedWidget: null,
-            hoveredWidget: null,
-            isLeftSide: false,
-            flexBasis: null,
-            isDragging: false,
-            timer: null,
-            visibleDragIcon: false
-        }
-    },
-    computed: {
-        widgetStyles() {
-            return `${this.isDragging ? 'dl-widget__drag' : 'dl-widget'}`
+    props: {
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        },
+        draggable: {
+            type: Boolean,
+            default: true
         }
     },
-    mounted() {
-        setFlexBasis()
-    },
-    methods: {
-        startDragging(e: MouseEvent) {
-            this.isDragging = true
-            this.draggedWidget = getElementAbove(
+    setup(props) {
+        const uuid = ref(`dl-widget-${v4()}`)
+        const draggedWidget = ref<HTMLElement>(null)
+        const hoveredWidget = ref(null)
+        const isLeftSide = ref(false)
+        const flexBasis = ref(null)
+        const isDragging = ref(false)
+        const timer = ref(null)
+        const visibleDragIcon = ref(false)
+        const wrapper = ref<HTMLDivElement>(null)
+        const widget = ref<HTMLDivElement>(null)
+        const clone = ref<HTMLDivElement>(null)
+        const draggableRef = toRef(props, 'draggable')
+
+        const widgetClasses = computed(() => {
+            return `${isDragging.value ? 'dl-widget__drag' : 'dl-widget'}`
+        })
+        const iconStyles = computed(() => {
+            return {
+                '--dl-widget-drag-icon-left': `${
+                    (widget.value as HTMLElement)?.offsetWidth / 2
+                }px`,
+                visibility:
+                    visibleDragIcon.value && !isDragging.value
+                        ? 'visible'
+                        : 'hidden'
+            }
+        })
+
+        const startDragging = (e: MouseEvent) => {
+            isDragging.value = true
+            document.body.style.cursor = 'grabbing'
+            draggedWidget.value = getElementAbove(
                 e.target as HTMLElement,
                 'dl-widget'
             )
-            if (this.draggedWidget) {
-                (this.$refs.clone as HTMLElement).appendChild(
-                    this.draggedWidget.cloneNode(true)
-                )
+            if (draggedWidget.value && clone.value) {
+                clone.value.appendChild(draggedWidget.value.cloneNode(true))
+                clone.value.style.visibility = 'visible'
+                clone.value.style.width = `${draggedWidget.value.offsetWidth}px`
+                clone.value.style.height = `${draggedWidget.value.offsetHeight}px`
+                clone.value.style.backgroundColor = `var(--dl-color-bg)`
             }
 
-            const sourceCanvas = this.draggedWidget?.querySelector('canvas')
-            if (sourceCanvas) {
-                const targetCanvasCtx = (this.$refs.clone as HTMLElement)
+            const sourceCanvas = draggedWidget.value?.querySelector('canvas')
+            if (sourceCanvas && clone.value) {
+                const targetCanvasCtx = clone.value
                     .querySelector('canvas')
                     .getContext('2d')
 
                 targetCanvasCtx.drawImage(sourceCanvas, 0, 0)
             }
 
-            this.moveClone(e as MouseEvent)
+            moveClone(e as MouseEvent)
 
-            addMouseEnter('dl-widget', this.handleMouseEnter as any)
+            addMouseEnter('dl-widget', handleMouseEnter as any)
 
-            window.addEventListener('mousemove', this.moveClone)
-            window.addEventListener('mouseup', this.stopDragging)
-        },
-        moveClone(e: MouseEvent) {
-            if (!this.isDragging) return
-            const clone = this.$refs.clone as HTMLElement
-            clone.style.left = `${e.pageX - clone.offsetWidth / 2 - 5}px`
-            clone.style.top = `${e.pageY + 10}px`
-        },
-        stopDragging(e: MouseEvent) {
-            this.isDragging = false
-            ;(this.$refs.clone as HTMLElement).innerHTML = ''
+            window.addEventListener('mousemove', moveClone)
+            window.addEventListener('mouseup', stopDragging)
+        }
+
+        const moveClone = (e: MouseEvent) => {
+            if (!isDragging.value || !clone.value) return
+            clone.value.style.left = `${
+                e.pageX - clone.value.offsetWidth / 2 - 5
+            }px`
+            clone.value.style.top = `${e.pageY + 10}px`
+        }
+
+        const stopDragging = (e: MouseEvent) => {
+            isDragging.value = false
+            document.body.style.cursor = 'default'
+            if (!clone.value || !draggedWidget.value || !wrapper.value) {
+                return
+            }
+            clone.value.style.visibility = 'hidden'
+            clone.value.innerHTML = ''
             const target = getElementAbove(e.target as HTMLElement, 'dl-widget')
-            if (target && this.draggedWidget) {
-                swapNodes({
-                    source: this.draggedWidget,
-                    target
+            const change = {
+                source: draggedWidget.value,
+                target,
+                endDragging: true
+            }
+            if (target && draggedWidget.value) {
+                const event = new CustomEvent('position-changing', {
+                    detail: change
                 })
+                wrapper.value.dispatchEvent(event)
+            } else {
+                wrapper.value.dispatchEvent(new CustomEvent('position-changed'))
             }
-            window.removeEventListener('mousemove', this.moveClone)
-            window.removeEventListener('mouseup', this.stopDragging)
+            window.removeEventListener('mousemove', moveClone)
+            window.removeEventListener('mouseup', stopDragging)
             setTimeout(() => {
-                removeMouseEnter('dl-widget', this.handleMouseEnter as any)
+                removeMouseEnter('dl-widget', handleMouseEnter as any)
             }, 1)
-        },
-        handleMouseEnter(e: MouseEvent) {
-            this.hoveredWidget = e.target as HTMLElement
-            const mouseOffsetInside = e.clientX - this.hoveredWidget.offsetLeft
-            this.isLeftSide =
-                mouseOffsetInside < this.hoveredWidget.offsetWidth / 2
-            this.hoveredWidget.addEventListener(
+        }
+
+        const handleMouseEnter = (e: MouseEvent) => {
+            hoveredWidget.value = e.target as HTMLElement
+            if (!hoveredWidget.value) {
+                return
+            }
+
+            const mouseOffsetInside = e.clientX - hoveredWidget.value.offsetLeft
+
+            isLeftSide.value =
+                mouseOffsetInside < hoveredWidget.value.offsetWidth / 2
+
+            hoveredWidget.value.addEventListener(
                 'mousemove',
-                this.handleMouseInsideWidget
+                handleMouseInsideWidget
             )
-            this.hoveredWidget.addEventListener('mouseleave', () => {
-                clearTimeout(this.timer)
-                this.hoveredWidget.removeEventListener(
+
+            hoveredWidget.value.addEventListener('mouseleave', () => {
+                if (timer.value) {
+                    clearTimeout(timer.value)
+                    timer.value = null
+                }
+                hoveredWidget.value.removeEventListener(
                     'mousemove',
-                    this.handleMouseInsideWidget
+                    handleMouseInsideWidget
                 )
             })
-            this.timer = setTimeout(this.insertWidget, 1000)
-        },
-        insertWidget() {
+
+            timer.value = setTimeout(insertWidget, 200)
+        }
+
+        const insertWidget = () => {
+            if (!hoveredWidget.value || !wrapper.value) {
+                return
+            }
+
             const targetWidget = getElementAbove(
-                this.hoveredWidget,
+                hoveredWidget.value,
                 'widget-wrapper'
             )
-            const targetRow = getElementAbove(this.hoveredWidget, 'dl-grid-row')
-            if (this.isLeftSide) {
-                targetRow.insertBefore(
-                    this.$refs.wrapper as HTMLElement,
-                    targetWidget
-                )
-            } else {
-                insertAfter(
-                    this.$refs.wrapper as unknown as HTMLElement,
-                    targetWidget
-                )
+            const event = new CustomEvent('position-changing', {
+                detail: {
+                    source: wrapper.value,
+                    target: targetWidget,
+                    side: isLeftSide.value ? 'left' : 'right'
+                }
+            })
+            wrapper.value.dispatchEvent(event)
+            if (timer.value) {
+                window.clearTimeout(timer.value)
+                timer.value = null
             }
-            this.hoveredWidget.removeEventListener(
+            hoveredWidget.value.removeEventListener(
                 'mousemove',
-                this.handleMouseInsideWidget
+                handleMouseInsideWidget
             )
-            setFlexBasis()
-        },
-        handleMouseInsideWidget(e: MouseEvent) {
-            const mouseOffsetInside = e.clientX - this.hoveredWidget.offsetLeft
-            const isLeftSide =
-                mouseOffsetInside < this.hoveredWidget.offsetWidth / 2
-            if (this.isLeftSide !== isLeftSide) {
-                clearTimeout(this.timer)
-                this.handleMouseEnter(e)
+        }
+
+        const handleMouseInsideWidget = (e: MouseEvent) => {
+            if (!hoveredWidget.value) {
+                return
+            }
+
+            const mouseOffsetInside = e.clientX - hoveredWidget.value.offsetLeft
+            const isLeftSideCurrently =
+                mouseOffsetInside < hoveredWidget.value.offsetWidth / 2
+            if (isLeftSide.value !== isLeftSideCurrently) {
+                if (timer.value) {
+                    clearTimeout(timer.value)
+                    timer.value = null
+                }
+                handleMouseEnter(e)
             }
         }
+
+        const handleVisibleDragIcon = (val: boolean) => {
+            if (!draggableRef.value) {
+                return
+            }
+            if (!document.querySelector('.drag-clone').innerHTML.toString()) {
+                visibleDragIcon.value = val
+            }
+        }
+
+        return {
+            wrapper,
+            widget,
+            clone,
+            uuid,
+            draggedWidget,
+            hoveredWidget,
+            isLeftSide,
+            flexBasis,
+            isDragging,
+            timer,
+            visibleDragIcon,
+            widgetClasses,
+            iconStyles,
+            startDragging,
+            moveClone,
+            stopDragging,
+            handleMouseEnter,
+            insertWidget,
+            handleMouseInsideWidget,
+            handleVisibleDragIcon
+        }
     }
 })
 </script>
@@ -193,37 +301,63 @@ export default defineComponent({
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
     &__header {
         display: flex;
         padding: 10px;
         border-bottom: 1px solid var(--dl-color-separator);
-
-        &--drag-icon {
-            flex-grow: 1;
-            cursor: pointer;
-
-            &::v-deep .dl-icon {
-                transform: rotate(90deg) !important;
-            }
-        }
+        font-size: 20px;
+        color: var(--dl-color-darker);
+        justify-content: space-between;
 
         &--titles {
             width: 50%;
             display: flex;
             flex-direction: column;
+            justify-content: center;
         }
     }
     &__content {
         padding: 5px;
     }
     &__description {
-        margin-top: auto;
-        padding: 5px;
-        font-size: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-height: 1;
+        max-height: 1 * 2;
+        margin: 20px 16px 16px 16px;
+        font-size: 12px;
+        color: var(--dl-color-medium);
+    }
+
+    &__drag-icon {
+        position: absolute;
+        top: 5px;
+        left: calc(var(--dl-widget-drag-icon-left) - 5px);
+        flex-grow: 1;
+        cursor: grab;
+
+        &::v-deep .dl-icon {
+            transform: rotate(90deg) !important;
+        }
     }
 
     &__drag {
-        visibility: hidden;
+        position: relative;
+        opacity: 0.2;
+        background: var(--dl-color-separator);
+        &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            border-radius: 5px;
+        }
     }
 }
 
@@ -235,7 +369,5 @@ export default defineComponent({
 
 .widget-wrapper {
     flex-basis: var(--widget-flex-basis);
-    margin: var(--row-gap) var(--column-gap);
-    transition: 0.1s;
 }
 </style>

package/src/components/basic/DlWidget/index.ts

@@ -1,5 +1,3 @@
 import DlWidget from './DlWidget.vue'
-import DlGrid from './DlGrid.vue'
-import DlGridRow from './DlGridRow.vue'
 
-export { DlWidget, DlGrid, DlGridRow }
+export { DlWidget }

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

@@ -1,3 +1,31 @@
+import { cloneDeep } from 'lodash'
+import { DlGridSideType } from '../DlGrid/types'
+
+export function leastCommonMultiple(arr: number[]) {
+    if (!arr) 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)
+}
+
+export function getGridTemplate(layout: 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 getElementAbove(el: HTMLElement, className: string) {
     //@ts-ignore
     for (; el && el !== document; el = el.parentNode) {
@@ -22,16 +50,70 @@ export function removeMouseEnter(
     })
 }
 
-export function setFlexBasis() {
-    Array.from(document.getElementsByClassName('dl-grid-row')).forEach(
-        (row) => {
-            Array.from(row.children).forEach((widget: any) => {
-                widget.style.flexBasis = `${100 / row.children.length}%`
-            })
+export function findIndexInMatrix(matrix: number[][], nr: number) {
+    for (let i = 0; i < matrix.length; i++) {
+        for (let j = 0; j < matrix[i].length; j++) {
+            if (matrix[i][j] === nr) return { row: i, column: j }
         }
+    }
+}
+
+export function swapElemensInMatrix(
+    layout: number[][],
+    sourceIndex: any,
+    targetIndex: any,
+    side: DlGridSideType,
+    maxElements: number
+) {
+    const newLayout = cloneDeep(layout)
+
+    const removedElement = newLayout[sourceIndex.row].splice(
+        sourceIndex.column,
+        1
     )
+    newLayout[targetIndex.row].splice(
+        side === 'right' ? targetIndex.column + 1 : targetIndex.column,
+        0,
+        removedElement[0]
+    )
+
+    return isTooLarge(newLayout, maxElements)
+        ? moveElementsToNextIndex(newLayout, maxElements)
+        : newLayout
+}
+
+function moveElementsToNextIndex(
+    template: number[][],
+    maxElements: number
+): number[][] {
+    const clonedTemplate: number[][] = cloneDeep(template)
+    let overflow: number[] = []
+
+    for (let i = 0; i < clonedTemplate.length; i++) {
+        let currentRow = clonedTemplate[i]
+        if (overflow.length > 0) {
+            currentRow = overflow.concat(currentRow)
+            overflow = []
+        }
+        if (currentRow.length > maxElements) {
+            overflow = currentRow.slice(maxElements)
+            currentRow = currentRow.slice(0, maxElements)
+        }
+        clonedTemplate[i] = currentRow
+        if (i + 1 < clonedTemplate.length && overflow.length > 0) {
+            clonedTemplate[i + 1] = overflow.concat(clonedTemplate[i + 1])
+            overflow = []
+        }
+    }
+    return clonedTemplate
+}
+
+function isTooLarge(layout: number[][], max: number) {
+    const lengths = layout.map((row) => row.length)
+    const highest = Math.max(...lengths)
+    return highest > max
 }
 
-export function insertAfter(newNode: HTMLElement, existingNode: HTMLElement) {
-    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling)
+export function isCustomEvent(event: Event): event is CustomEvent {
+    return 'detail' in event
 }

package/src/components/basic/index.ts

@@ -9,6 +9,8 @@ export * from './DlWidget'
 export * from './DlPopup'
 export * from './DlPanelContainer'
 export * from './DlProgressChart'
-export * from './DlEllipsis'
-export * from './DlCard'
+export * from './DlEmptyState'
+export * from './DlGrid'
 export * from './DlMarkupTable'
+export * from './DlContainer'
+export * from './DlEmptyState'

package/src/components/basic/types.ts

@@ -6,3 +6,5 @@ export type { DlChipProps, DlButtonProps }
 export * from './DlKpi/types'
 export * from './DlWidget/types'
 export * from './DlButton/types'
+export * from './DlGrid/types'
+export * from './DlEmptyState/types'