@dataloop-ai/components 0.18.54 → 0.18.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.54",
+  "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/demos/DlGridDemo.vue

@@ -1,40 +1,321 @@
 <template>
-    <div class="container">
-        <dl-grid>
-            <img
-                v-for="(a, index) in 10"
-                :key="index"
-                class="grid-image"
-                :src="getRandomImg()"
+    <div class="widgets-demo-wrapper">
+        <div>
+            <h3>Layout mode</h3>
+            <dl-button
+                class="select-layout__button"
+                style="width: 200px; margin-bottom: 20px"
+                @click="addWidget(layout)"
             >
-        </dl-grid>
+                Add widget
+            </dl-button>
+            <dl-grid
+                :key="cmWidgets.length"
+                v-model="cmLayout"
+                :max-elements-per-row="cmMaxWidgetsPerRow"
+                :mode="layout"
+            >
+                <dl-widget
+                    v-for="widget in cmWidgets"
+                    :key="widget.id"
+                >
+                    <template #header>
+                        {{ widget.header }}
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :data="data"
+                            :items-in-view="6"
+                        />
+                    </template>
+                    <template #menu>
+                        <div class="menu-icons">
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-edit"
+                            />
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-delete"
+                                @click="deleteWidget(layout, widget.id)"
+                            />
+                        </div>
+                    </template>
+                    <template #description>
+                        {{ widget.description }}
+                    </template>
+                </dl-widget>
+            </dl-grid>
+        </div>
+        <div>
+            <h3>Grid mode</h3>
+            <dl-button
+                class="select-layout__button"
+                style="width: 200px; margin-bottom: 20px"
+                @click="addWidget(grid)"
+            >
+                Add widget
+            </dl-button>
+            <dl-grid
+                :key="dmWidgets.length"
+                v-model="dmLayout"
+                :max-elements-per-row="dmMaxWidgetsPerRow"
+                :mode="grid"
+            >
+                <dl-widget
+                    v-for="widget in dmWidgets"
+                    :key="widget.id"
+                >
+                    <template #header>
+                        {{ widget.header }}
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :data="data"
+                            :items-in-view="6"
+                        />
+                    </template>
+                    <template #menu>
+                        <div class="menu-icons">
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-edit"
+                            />
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-delete"
+                                @click="deleteWidget(grid, widget.id)"
+                            />
+                        </div>
+                    </template>
+                    <template #description>
+                        {{ widget.description }}
+                    </template>
+                </dl-widget>
+            </dl-grid>
+        </div>
+        <div>
+            <h3>Flex mode</h3>
+            <dl-button
+                class="select-layout__button"
+                style="width: 200px; margin-bottom: 20px"
+                @click="addWidget(flex)"
+            >
+                Add widget
+            </dl-button>
+            <dl-grid
+                :key="fmWidgets.length"
+                :mode="flex"
+            >
+                <dl-widget
+                    v-for="widget in fmWidgets"
+                    :key="widget.id"
+                    :draggable="false"
+                    style="max-width: 15vw"
+                >
+                    <template #header>
+                        {{ widget.header }}
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :data="data"
+                            :items-in-view="6"
+                        />
+                    </template>
+                    <template #menu>
+                        <div class="menu-icons">
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-edit"
+                            />
+                            <dl-icon
+                                size="m"
+                                icon="icon-dl-delete"
+                                @click="deleteWidget(flex, widget.id)"
+                            />
+                        </div>
+                    </template>
+                    <template #description>
+                        {{ widget.description }}
+                    </template>
+                </dl-widget>
+            </dl-grid>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { DlGrid } from '../components/'
-
-const getRandomImg = () => {
-    const random = Math.floor(Math.random() * 3) + 1
-    const link = `https://picsum.photos/${random * 100}/${
-        random * 100
-    }?random=${random}`
-    return link
+import { defineComponent, Ref, ref } from 'vue-demi'
+import { DlWidget, DlGrid, DlBarChart, DlIcon, DlButton } from '../components'
+import { DlGridMode } from '../types'
+
+const data = {
+    labels: Array.from({ length: 20 }, (_, i) => `${i}`),
+    datasets: [
+        {
+            label: 'Data One',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: Array.from({ length: 20 }, (_, i) => i + 1)
+        },
+        {
+            label: 'Data Two',
+            backgroundColor: '--dl-color-warning',
+            borderRadius: 4,
+            data: Array.from({ length: 20 }, (_, i) => i + 1)
+        }
+    ]
 }
+
 export default defineComponent({
     components: {
-        DlGrid
+        DlGrid,
+        DlWidget,
+        DlBarChart,
+        DlIcon,
+        DlButton
     },
     setup() {
-        return { getRandomImg }
+        const cmLayout: Ref<string[][]> = ref([
+            ['a', 'b', 'c'],
+            ['d', 'e']
+        ])
+        const dmLayout: Ref<string[][]> = ref([
+            ['a', 'b', 'c'],
+            ['d', 'e']
+        ])
+        const fmLayout: Ref<string[][]> = ref([
+            ['a', 'b', 'c'],
+            ['d', 'e', 'f']
+        ])
+
+        const cmMaxWidgetsPerRow = ref(3)
+        const dmMaxWidgetsPerRow = ref(3)
+        const fmMaxWidgetsPerRow = ref(3)
+
+        const cmWidgets = ref([])
+        const dmWidgets = ref([])
+        const fmWidgets = ref([])
+
+        const createRandomWidgets = (
+            layout: Ref<string[][]>,
+            widgets: Ref<any[]>,
+            numOfWidgets: number
+        ) => {
+            for (let i = 0; i < numOfWidgets; i++) {
+                widgets.value.push({
+                    id: layout.value.flat()[i],
+                    header: `Widget ${i}`,
+                    description: `I'm description`
+                })
+            }
+        }
+        createRandomWidgets(cmLayout, cmWidgets, cmLayout.value.flat().length)
+        createRandomWidgets(dmLayout, dmWidgets, dmLayout.value.flat().length)
+        createRandomWidgets(fmLayout, fmWidgets, fmLayout.value.flat().length)
+
+        const deleteWidget = (mode: string, id: string) => {
+            const { widgets, layout, widgetsPerRow } = modeScope(mode)
+            widgets.value = widgets.value.filter((widget) => widget.id !== id)
+            layout.value = buildNewLayout(widgets.value, widgetsPerRow)
+        }
+
+        const addWidget = (mode: string) => {
+            const { widgets, layout, widgetsPerRow } = modeScope(mode)
+            widgets.value.push({
+                id: (widgets.value.length + 1).toString(),
+                header: `Widget ${widgets.value.length}`,
+                description: `I'm description`
+            })
+            layout.value = buildNewLayout(widgets.value, widgetsPerRow)
+        }
+
+        const modeScope = (mode: string) => {
+            let widgets
+            let layout
+            let widgetsPerRow
+            switch (mode) {
+                case DlGridMode.LAYOUT:
+                    widgets = cmWidgets
+                    layout = cmLayout
+                    widgetsPerRow = cmMaxWidgetsPerRow.value
+                    break
+                case DlGridMode.GRID:
+                    widgets = dmWidgets
+                    layout = dmLayout
+                    widgetsPerRow = dmMaxWidgetsPerRow.value
+                    break
+                case DlGridMode.FLEX:
+                    widgets = fmWidgets
+                    layout = fmLayout
+                    widgetsPerRow = fmMaxWidgetsPerRow.value
+                    break
+            }
+            return { widgets, layout, widgetsPerRow }
+        }
+
+        const buildNewLayout = (widgets: any[], widgetsPerRow: number) => {
+            const template: string[][] = []
+            let index = 0
+
+            while (index < widgets.length) {
+                const row = widgets.slice(index, index + widgetsPerRow)
+                template.push(row.map((w) => w.id))
+                index += widgetsPerRow
+            }
+            return template
+        }
+
+        return {
+            data,
+            deleteWidget,
+            addWidget,
+            cmLayout,
+            cmWidgets,
+            cmMaxWidgetsPerRow,
+            fmLayout,
+            fmWidgets,
+            fmMaxWidgetsPerRow,
+            dmLayout,
+            dmWidgets,
+            dmMaxWidgetsPerRow,
+            layout: DlGridMode.LAYOUT,
+            flex: DlGridMode.FLEX,
+            grid: DlGridMode.GRID
+        }
     }
 })
 </script>
 
 <style lang="scss" scoped>
-.grid-image {
-    border: 2px solid var(--dl-color-darker);
-    margin: 5px;
+.widgets-demo-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    & > * {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        border: 1px solid var(--dl-color-separator);
+        padding: 10px;
+    }
+}
+.widgets-per-row {
+    &__input {
+        padding: 5px;
+        border-radius: 5px;
+        width: 50px;
+    }
+}
+.menu-icons {
+    display: flex;
+    align-items: center;
+    & > * {
+        cursor: pointer;
+        margin: 0px 5px;
+    }
 }
 </style>

package/src/demos/DlWidgetDemo.vue

@@ -1,316 +1,131 @@
 <template>
     <div>
-        <div class="options">
-            <div class="select-layout">
-                <select
-                    class="select-layout__input"
-                    @change="selectLayout"
-                >
-                    <option
-                        v-for="(layoutItem, layoutIndex) in layouts"
-                        :key="layoutIndex"
-                        :value="layoutIndex"
-                    >
-                        {{ layoutItem.name }}
-                    </option>
-                </select>
-                <button
-                    class="select-layout__button"
-                    @mousedown="saveLayout"
-                >
-                    Save
-                </button>
-                <span class="select-layout__info">{{ hasBeenSaved }}</span>
-            </div>
-            <div class="widgets-per-row">
-                <span class="widgets-per-row__label"> Widgets per row: </span>
-                <input
-                    v-model="widgetsPerRow"
-                    class="widgets-per-row__input"
-                    type="number"
-                >
-            </div>
-        </div>
-        <dl-grid
-            v-model="layout"
-            :max-elements-per-row="widgetsPerRow"
-        >
-            <dl-widget>
-                <template #header>
-                    <span>Widget 1</span>
-                    <span style="font-size: 12px; color: var(--dl-color-medium)">Subtitle</span>
-                </template>
-                <template #content>
-                    <dl-bar-chart
-                        :data="data"
-                        :items-in-view="8"
+        <dl-widget style="width: 50vw">
+            <template #header>
+                <span>Widget with menu icons</span>
+                <span style="font-size: 12px; color: var(--dl-color-medium)">Subtitle</span>
+            </template>
+            <template #content>
+                <dl-bar-chart
+                    :data="data"
+                    :items-in-view="8"
+                />
+            </template>
+            <template #menu>
+                <div class="menu-icons">
+                    <dl-icon
+                        size="m"
+                        icon="icon-dl-settings"
                     />
-                </template>
-                <template #menu>
-                    <div class="menu-icons">
-                        <dl-icon
-                            size="m"
-                            icon="icon-dl-settings"
-                        />
-                        <dl-icon
-                            size="m"
-                            icon="icon-dl-download"
-                        />
-                    </div>
-                </template>
-                <template #description>
-                    <span>Lorem ipsum dolor sit amet consectetur adipisicing
-                        elit. Libero eligendi dolore, similique possimus
-                        veritatis in vitae quia praesentium fuga quibusdam
-                        autem. Doloremque tenetur repudiandae a cupiditate modi
-                        dicta eveniet veritatis?</span>
-                </template>
-            </dl-widget>
-
-            <dl-widget>
-                <template #header>
-                    <span>Widget 2</span>
-                </template>
-                <template #content>
-                    <dl-bar-chart
-                        :data="data"
-                        :items-in-view="6"
+                    <dl-icon
+                        size="m"
+                        icon="icon-dl-download"
                     />
-                </template>
-            </dl-widget>
-
-            <dl-widget>
-                <template #header>
-                    <span>Widget 3</span>
-                </template>
-                <template #content>
-                    <dl-bar-chart
-                        :data="data"
-                        :items-in-view="6"
+                </div>
+            </template>
+        </dl-widget>
+
+        <dl-widget style="width: 50vw">
+            <template #header>
+                <span>Widget with description</span>
+            </template>
+            <template #content>
+                <dl-bar-chart
+                    :data="data"
+                    :items-in-view="6"
+                />
+            </template>
+            <template #description>
+                <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Libero eligendi dolore, similique possimus veritatis in
+                    vitae quia praesentium fuga quibusdam autem. Doloremque
+                    tenetur repudiandae a cupiditate modi dicta eveniet
+                    veritatis?</span>
+            </template>
+        </dl-widget>
+
+        <dl-widget
+            is-empty
+            :empty-state-props="{
+                style: 'min-height: 350px;',
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.',
+                responsive: false
+            }"
+            style="width: 50vw"
+        >
+            <template #header>
+                <span>Empty state widget</span>
+            </template>
+            <template #links="">
+                <div style="display: flex; gap: 5px; padding: 0 20px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
                     />
-                </template>
-            </dl-widget>
-
-            <dl-widget>
-                <template #header>
-                    <span>Widget 4</span>
-                    <span style="font-size: 12px; color: gray">Subtitle</span>
-                </template>
-                <template #content>
-                    <dl-bar-chart
-                        :data="data"
-                        :items-in-view="8"
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
                     />
-                </template>
-                <template #description>
-                    <span>Lorem ipsum dolor sit amet consectetur adipisicing
-                        elit. Libero eligendi dolore, similique possimus
-                        veritatis in vitae quia praesentium fuga quibusdam
-                        autem. Doloremque tenetur repudiandae a cupiditate modi
-                        dicta eveniet veritatis?</span>
-                </template>
-            </dl-widget>
-
-            <dl-widget>
-                <template #header>
-                    <span>Widget 5</span>
-                </template>
-                <template #content>
-                    <dl-bar-chart
-                        :data="data"
-                        :items-in-view="6"
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
                     />
-                </template>
-            </dl-widget>
-
-            <dl-widget
-                is-empty
-                :empty-state-props="{
-                    responsive: true,
-                    style: 'min-height: 350px;',
-                    bgSize: '130px',
-                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
-                    title: 'Lorem ipsum',
-                    subtitle:
-                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
-                    info: 'To learn more about this analytics, read our documentation.'
-                }"
-            >
-                <template #header>
-                    <span>Widget 5</span>
-                </template>
-                <template #links="">
-                    <div style="display: flex; gap: 5px; padding: 0 20px">
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-sdk-documentation"
-                            flat
-                            uppercase
-                            label="SDK"
-                        />
-                        <div class="break" />
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-file"
-                            flat
-                            label="Documentation"
-                        />
-                        <div class="break" />
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-youtube"
-                            flat
-                            label="Video"
-                        />
-                    </div>
-                </template>
-            </dl-widget>
-        </dl-grid>
+                </div>
+            </template>
+        </dl-widget>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue-demi'
-import {
-    DlWidget,
-    DlGrid,
-    DlBarChart,
-    DlGridLayout,
-    DlIcon,
-    DlButton
-} from '../components'
-
-const labelsFn = () => {
-    const a = []
-    for (let i = 0; i < 20; i++) {
-        a.push(`${i}`)
-    }
-    return a
-}
-
-const dataFn = () => {
-    const a = []
-    for (let i = 1; i <= 20; i++) {
-        a.push(i)
-    }
-    return a
-}
+import { defineComponent } from 'vue-demi'
+import { DlWidget, DlBarChart, DlIcon, DlButton } from '../components'
 
 const data = {
-    labels: labelsFn(),
+    labels: Array.from({ length: 20 }, (_, i) => `${i}`),
     datasets: [
         {
             label: 'Data One',
             backgroundColor: '--dl-color-secondary',
             borderRadius: 4,
-            data: dataFn()
+            data: Array.from({ length: 20 }, (_, i) => i + 1)
         },
         {
             label: 'Data Two',
             backgroundColor: '--dl-color-warning',
             borderRadius: 4,
-            data: dataFn()
+            data: Array.from({ length: 20 }, (_, i) => i + 1)
         }
     ]
 }
 
-const matrix: number[][] = []
-const labels: string[] = []
-const size: number = 10
-
-for (let i = 0; i < size; i++) {
-    const row = []
-    for (let j = 0; j < size; j++) {
-        row.push(Math.floor(Math.random() * 10))
-    }
-    matrix.push(row)
-}
-
-const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
-
-for (let i = 0; i < size; i++) {
-    labels.push(items[Math.floor(Math.random() * items.length)])
-}
-
 export default defineComponent({
     components: {
-        DlGrid,
         DlWidget,
         DlBarChart,
         DlIcon,
         DlButton
     },
     setup() {
-        const layout = ref([
-            [1, 5, 2],
-            [3, 4, 6]
-        ])
-
-        const layouts = ref<DlGridLayout[]>([
-            {
-                name: 'Layout 1',
-                value: layout.value
-            }
-        ])
-
-        const widgetsPerRow = ref(3)
-        const hasBeenSaved = ref('')
-
-        const saveLayout = () => {
-            const newLayout = {
-                name: `Layout ${layouts.value.length + 1}`,
-                value: layout.value
-            }
-            layouts.value.push(newLayout)
-            hasBeenSaved.value = `${newLayout.name} has been saved.`
-            setTimeout(() => {
-                hasBeenSaved.value = ''
-            }, 2000)
-        }
-
-        const selectLayout = (e: InputEvent) => {
-            const index = parseInt((e.target as HTMLInputElement).value)
-            layout.value = layouts.value[index].value
-        }
-
         return {
-            data,
-            layout,
-            layouts,
-            widgetsPerRow,
-            hasBeenSaved,
-            saveLayout,
-            selectLayout
+            data
         }
     }
 })
 </script>
 
 <style lang="scss" scoped>
-.options {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-.widgets-per-row {
-    &__input {
-        padding: 5px;
-        border-radius: 5px;
-        width: 50px;
-    }
-}
-.select-layout {
-    &__input,
-    &__button {
-        padding: 5px;
-        border-radius: 5px;
-        margin: 0px 2px;
-    }
-    &__info {
-        font-size: 0.8em;
-        margin-left: 10px;
-    }
-}
 .menu-icons {
     display: flex;
     align-items: center;

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

@@ -1,119 +0,0 @@
-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) {
-        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 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 isCustomEvent(event: Event): event is CustomEvent {
-    return 'detail' in event
-}