@dataloop-ai/components 0.17.35 → 0.17.37

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -12,7 +12,7 @@
             :disabled="disabled"
             :style="[computedStyles]"
             style="pointer-events: auto"
-            class="dl-button"
+            :class="buttonClass"
             @click="onClick"
             @mousedown="onMouseDown"
         >
@@ -74,6 +74,7 @@ import { v4 } from 'uuid'
 import { ButtonColors } from './types'
 import { transformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
+import { textTransform } from '../../../utils/string'
 import { isString } from 'lodash'
 
 export default defineComponent({
@@ -84,27 +85,66 @@ export default defineComponent({
     },
 
     props: {
+        /**
+         * The user will not be able to press on the button
+         */
         disabled: Boolean,
+        /**
+         * The color of the button
+         */
         color: {
             type: String! as PropType<keyof typeof colorNames>,
             default: ''
         },
+        /**
+         * The button's padding is lowered and the white space shrinks
+         */
         dense: { type: Boolean, default: false },
+        /**
+         * The text content of the button
+         */
         label: { type: String, default: '' },
+        /**
+         * The color of the button's text
+         */
         textColor: { type: String!, default: '' },
         colorsObject: {
             type: Object as PropType<ButtonColors>,
             default: null
         },
+        /**
+         * The color of the icon inside the button
+         */
         iconColor: { type: String!, default: '' },
+        /** Padding inside the button */
         padding: { type: String, default: '' },
+        /**
+         * The size of the button, it can be s,m,l or xl
+         */
         margin: { type: String, default: '0 auto' },
         size: { type: String! as PropType<ButtonSizes>, default: 'm' },
+        /**
+         * The assigned color will fill the entirety of the button
+         */
         filled: { type: Boolean, default: true },
+        /** Makes the button rounded */
         round: { type: Boolean, default: false },
+        /**
+         * The width of the button will take that of its container
+         */
         shaded: { type: Boolean, default: false },
         fluid: Boolean,
+        /**
+         * The button will not have an outline
+         */
         flat: Boolean,
+        /**
+         * All the characters inside the button will be uppercase
+         */
+        uppercase: Boolean,
+        /**
+         * The button will be transparent with a colored outline
+         */
         transform: {
             type: String,
             default: 'default',
@@ -112,10 +152,23 @@ export default defineComponent({
                 transformOptions.includes(value)
         },
         outlined: Boolean,
+        /**
+         * Doesn't allow the button's text to be wrapped along multiple rows
+         */
         noWrap: Boolean,
+        /**
+         * The name of the icon to go inside the button
+         */
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
+        /**
+         * The tooltip displayed when hovering over the button
+         */
         tooltip: { type: String, default: null, required: false },
+        /**
+         * The button will mentain the styles it has when it's pressed if this prop is active
+         */
+        active: { type: Boolean, default: false, required: false },
         styles: { type: [Object, String], default: null }
     },
     emits: ['click', 'mousedown'],
@@ -157,6 +210,12 @@ export default defineComponent({
                 this.label !== ''
             )
         },
+        buttonLabel(): string {
+            return textTransform(this.label)
+        },
+        buttonClass() {
+            return this.active ? 'dl-button active-class' : 'dl-button'
+        },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
@@ -383,7 +442,7 @@ export default defineComponent({
     gap: var(--dl-button-content-gap, 7px);
 }
 
-.dl-chip.first-letter-capitalized {
+.dl-button-container.first-letter-capitalized {
     &::first-letter,
     & > *::first-letter {
         text-transform: capitalize;
@@ -394,4 +453,14 @@ export default defineComponent({
     display: inline-block;
     width: var(--dl-button-container-width);
 }
+
+.active-class {
+    color: var(--dl-button-text-color-hover);
+    background-color: var(--dl-button-bg-hover);
+    border-color: var(--dl-button-border-hover);
+    & .dl-button-label {
+        transition: all ease-in 0.15s;
+        color: var(--dl-button-color-hover);
+    }
+}
 </style>

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

@@ -0,0 +1,144 @@
+<template>
+    <div
+        ref="grid"
+        :style="gridStyles"
+        :class="gridClass"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import {
+    getGridTemplate,
+    getElementAbove,
+    findIndexInMatrix,
+    swapElemensInMatrix,
+    isCustomEvent
+} from '../DlWidget/utils'
+
+export default defineComponent({
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: {
+            type: Array as PropType<number[][]>,
+            default: null
+        },
+        rowGap: {
+            type: String,
+            default: '10px'
+        },
+        columnGap: {
+            type: String,
+            default: '10px'
+        },
+        maxElementsPerRow: {
+            type: Number,
+            default: 3
+        }
+    },
+    emits: ['update:modelValue'],
+    computed: {
+        gridStyles(): object {
+            return {
+                '--row-gap': this.rowGap,
+                '--column-gap': this.columnGap
+            }
+        },
+        gridClass(): string {
+            return this.modelValue
+                ? 'dl-grid-wrapper__grid'
+                : 'dl-grid-wrapper__flex'
+        }
+    },
+    watch: {
+        modelValue: {
+            handler(val) {
+                this.$nextTick(() => {
+                    if (val) this.applyGridElementStyles()
+                })
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        Array.from((this.$refs.grid as HTMLElement).children).forEach(
+            (element: Element, index: number) => {
+                (element as HTMLElement).dataset.index = `${index}`
+            }
+        )
+    },
+    methods: {
+        applyGridElementStyles() {
+            if (!this.modelValue) return
+            const gridElements = Array.from(
+                (this.$refs.grid as HTMLElement).children
+            )
+            const gridTemplate = getGridTemplate(this.modelValue)
+            if (gridElements.length !== gridTemplate.length) return
+
+            const order = this.modelValue.flat()
+            gridElements.forEach((element: Element, index: number) => {
+                const orderIndex =
+                    order.findIndex((nr: number) => nr === index + 1) + 1
+                const htmlElement = element as HTMLElement
+                htmlElement.style.order = `${orderIndex}`
+                htmlElement.style.gridColumn = gridTemplate[orderIndex - 1]
+                htmlElement.addEventListener('change-position', (e) => {
+                    if (!isCustomEvent(e)) return
+                    this.changePosition(e)
+                })
+            })
+        },
+        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
+            )
+
+            const newLayout = swapElemensInMatrix(
+                this.modelValue,
+                sourceMatrixIndex,
+                targetMatrixIndex,
+                side,
+                this.maxElementsPerRow
+            )
+            this.$emit('update:modelValue', newLayout)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-grid-wrapper {
+    &__grid {
+        display: grid;
+        row-gap: var(--row-gap);
+        column-gap: var(--column-gap);
+    }
+    &__flex {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+</style>

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

@@ -0,0 +1,4 @@
+import DlGrid from './DlGrid.vue'
+import { DlGridLayout } from './types'
+export { DlGrid }
+export type { DlGridLayout }

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

@@ -0,0 +1,4 @@
+export interface DlGridLayout {
+    name: string
+    value: number[][]
+}

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

@@ -7,18 +7,16 @@
             :id="uuid"
             ref="widget"
             :class="widgetStyles"
+            @mouseenter="handleVisibleDragIcon(true)"
+            @mouseleave="handleVisibleDragIcon(false)"
         >
-            <div
-                class="dl-widget__header"
-                @mouseenter="visibleDragIcon = true"
-                @mouseleave="visibleDragIcon = false"
-            >
+            <div class="dl-widget__header">
                 <div class="dl-widget__header--titles">
                     <slot name="header" />
                 </div>
                 <dl-icon
                     :style="`visibility: ${
-                        visibleDragIcon ? 'visible' : 'hidden'
+                        visibleDragIcon && !isDragging ? 'visible' : 'hidden'
                     }`"
                     class="dl-widget__header--drag-icon"
                     icon="icon-dl-drag"
@@ -47,14 +45,7 @@
 import { v4 } from 'uuid'
 import { defineComponent } 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'
 
 export default defineComponent({
     name: 'DlWidget',
@@ -78,20 +69,20 @@ export default defineComponent({
             return `${this.isDragging ? 'dl-widget__drag' : 'dl-widget'}`
         }
     },
-    mounted() {
-        setFlexBasis()
-    },
     methods: {
         startDragging(e: MouseEvent) {
             this.isDragging = true
+            document.body.style.cursor = 'grabbing'
             this.draggedWidget = getElementAbove(
                 e.target as HTMLElement,
                 'dl-widget'
             )
             if (this.draggedWidget) {
-                (this.$refs.clone as HTMLElement).appendChild(
-                    this.draggedWidget.cloneNode(true)
-                )
+                const clone = this.$refs.clone as HTMLElement
+                clone.appendChild(this.draggedWidget.cloneNode(true))
+                clone.style.visibility = 'visible'
+                clone.style.width = `${this.draggedWidget.offsetWidth}px`
+                clone.style.height = `${this.draggedWidget.offsetHeight}px`
             }
 
             const sourceCanvas = this.draggedWidget?.querySelector('canvas')
@@ -118,13 +109,20 @@ export default defineComponent({
         },
         stopDragging(e: MouseEvent) {
             this.isDragging = false
-            ;(this.$refs.clone as HTMLElement).innerHTML = ''
+            document.body.style.cursor = 'default'
+            const clone = this.$refs.clone as HTMLElement
+            clone.style.visibility = 'hidden'
+            clone.innerHTML = ''
             const target = getElementAbove(e.target as HTMLElement, 'dl-widget')
+            const change = {
+                source: this.draggedWidget,
+                target
+            }
             if (target && this.draggedWidget) {
-                swapNodes({
-                    source: this.draggedWidget,
-                    target
+                const event = new CustomEvent('change-position', {
+                    detail: change
                 })
+                ;(this.$refs.wrapper as HTMLElement).dispatchEvent(event)
             }
             window.removeEventListener('mousemove', this.moveClone)
             window.removeEventListener('mouseup', this.stopDragging)
@@ -148,30 +146,26 @@ export default defineComponent({
                     this.handleMouseInsideWidget
                 )
             })
-            this.timer = setTimeout(this.insertWidget, 1000)
+            this.timer = setTimeout(this.insertWidget, 200)
         },
         insertWidget() {
             const targetWidget = getElementAbove(
                 this.hoveredWidget,
                 '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('change-position', {
+                detail: {
+                    source: this.$refs.wrapper,
+                    target: targetWidget,
+                    side: this.isLeftSide ? 'left' : 'right'
+                }
+            })
+            ;(this.$refs.wrapper as HTMLElement).dispatchEvent(event)
+            window.clearTimeout(this.timer)
             this.hoveredWidget.removeEventListener(
                 'mousemove',
                 this.handleMouseInsideWidget
             )
-            setFlexBasis()
         },
         handleMouseInsideWidget(e: MouseEvent) {
             const mouseOffsetInside = e.clientX - this.hoveredWidget.offsetLeft
@@ -181,6 +175,11 @@ export default defineComponent({
                 clearTimeout(this.timer)
                 this.handleMouseEnter(e)
             }
+        },
+        handleVisibleDragIcon(val: boolean) {
+            if (!document.querySelector('.drag-clone').innerHTML.toString()) {
+                this.visibleDragIcon = val
+            }
         }
     }
 })
@@ -200,7 +199,7 @@ export default defineComponent({
 
         &--drag-icon {
             flex-grow: 1;
-            cursor: pointer;
+            cursor: grab;
 
             &::v-deep .dl-icon {
                 transform: rotate(90deg) !important;
@@ -223,7 +222,17 @@ export default defineComponent({
     }
 
     &__drag {
-        visibility: hidden;
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: var(--dl-color-separator);
+            border-radius: 5px;
+        }
     }
 }
 
@@ -236,6 +245,6 @@ export default defineComponent({
 .widget-wrapper {
     flex-basis: var(--widget-flex-basis);
     margin: var(--row-gap) var(--column-gap);
-    transition: 0.1s;
+    padding: 15px;
 }
 </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,30 @@
+import { cloneDeep } from 'lodash'
+
+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 +49,44 @@ 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: string,
+    maxElements: number
+) {
+    if (targetIndex.column === sourceIndex.column + 1 && side === 'left')
+        return layout
+    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) ? layout : newLayout
+}
+
+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

@@ -11,4 +11,5 @@ export * from './DlPanelContainer'
 export * from './DlProgressChart'
 export * from './DlEllipsis'
 export * from './DlCard'
+export * from './DlGrid'
 export * from './DlMarkupTable'

package/src/components/compound/DlCharts/charts/DlBarChart/DlBarChart.vue

@@ -225,6 +225,9 @@ export default defineComponent({
             if (event.type !== 'mousemove') {
                 return
             }
+            const hover = !!document.querySelector('.drag-clone')
+            chartJS.options.plugins.tooltip.enabled = !hover
+            if (hover) return
             if (
                 items.length === 0 ||
                 chartJS.getElementsAtEventForMode(

package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChartWidget.vue

@@ -26,14 +26,13 @@
 import { defineComponent, PropType } from 'vue-demi'
 import DlDoughnutChart from './DlDoughnutChart.vue'
 import { TDoughnutChartData } from './types/TDoughnutChartData'
-import { DlWidget, DlGridRow, DlGrid } from '../../../../basic'
+import { DlWidget, DlGrid } from '../../../../basic'
 
 export default defineComponent({
     name: 'DlDoughnutChartWidget',
     components: {
         DlDoughnutChart,
         DlGrid,
-        DlGridRow,
         DlWidget
     },
     props: {

package/src/demos/DlAlertDemo.vue

@@ -59,6 +59,20 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
+        <dl-alert
+            style="margin-top: 20px"
+            fluid
+            type="warning"
+        >
+            this is an annoying message with link, this is an annoying message
+            with linkthis is an annoying message with linkthis is an annoying
+            message with linkthis is an annoying message with linkthis is an
+            annoying message with linkthis is an annoying message with linkthis
+            is an annoying message with link
+            <span>
+                Please
+                <dl-link color="dl-color-link">Contact us</dl-link>.</span>
+        </dl-alert>
     </div>
 </template>
 

package/src/demos/DlButtonDemo.vue

@@ -194,6 +194,33 @@
                 Disabled
             </DlButton>
         </div>
+        <div
+            style="
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+            "
+        >
+            <h3>Button keeping its active state with menu</h3>
+            <dl-button
+                :active="activeButtonState"
+                @click="activeButtonState = !activeButtonState"
+            >
+                {{ activeButtonState ? 'Close' : 'Open' }}
+                <dl-menu
+                    :offset="[0, 5]"
+                    anchor="bottom middle"
+                    self="top middle"
+                    :model-value="!activeButtonState"
+                >
+                    <div
+                        style="width: 100px; height: 100px; text-align: center"
+                    >
+                        Menu
+                    </div>
+                </dl-menu>
+            </dl-button>
+        </div>
         <div>
             <h3>With badge</h3>
 
@@ -261,10 +288,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue-demi'
-import { DlButton, DlBadge, DlIcon } from '../components'
+import { defineComponent, reactive, ref } from 'vue-demi'
+import { DlButton, DlBadge, DlIcon, DlMenu } from '../components'
 import { ButtonSizes } from '../components/basic/DlButton/utils'
-import DlMenu from '../components/essential/DlMenu/DlMenu.vue'
 import DlList from '../components/essential/DlList/DlList.vue'
 import DlListItem from '../components/basic/DlListItem/DlListItem.vue'
 
@@ -280,9 +306,10 @@ export default defineComponent({
     },
     setup() {
         const buttons = reactive<ButtonSizes[]>(['s', 'm', 'l', 'xl'])
+        const activeButtonState = ref(false)
 
         const log = (e: Event) => console.log(e)
-        return { buttons, log }
+        return { buttons, log, activeButtonState }
     }
 })
 </script>

package/src/demos/DlGridDemo.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="container">
+        <dl-grid>
+            <img
+                v-for="(a, index) in 10"
+                :key="index"
+                class="grid-image"
+                :src="getRandomImg()"
+            >
+        </dl-grid>
+    </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
+}
+export default defineComponent({
+    components: {
+        DlGrid
+    },
+    setup() {
+        return { getRandomImg }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.grid-image {
+    border: 2px solid var(--dl-color-darker);
+    margin: 5px;
+}
+</style>

package/src/demos/DlWidgetDemo.vue

@@ -1,11 +1,149 @@
+<template>
+    <div>
+        <div class="options">
+            <div class="select-layout">
+                <select
+                    class="select-layout__input"
+                    @change="selectLayout"
+                >
+                    <option
+                        v-for="(layout, index) in layouts"
+                        :key="index"
+                        :value="index"
+                    >
+                        {{ layout.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: gray">Subtitle</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :legend-props="legendProps"
+                        :data="data"
+                        :options="options"
+                        :items-in-view="8"
+                    />
+                </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
+                        :legend-props="legendProps"
+                        :data="data"
+                        :options="options"
+                        :items-in-view="6"
+                    />
+                </template>
+            </dl-widget>
+
+            <dl-widget>
+                <template #header>
+                    <span>Widget 3</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :legend-props="legendProps"
+                        :data="data"
+                        :options="options"
+                        :items-in-view="6"
+                    />
+                </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
+                        :legend-props="legendProps"
+                        :data="data"
+                        :options="options"
+                        :items-in-view="8"
+                    />
+                </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
+                        :legend-props="legendProps"
+                        :data="data"
+                        :options="options"
+                        :items-in-view="6"
+                    />
+                </template>
+            </dl-widget>
+        </dl-grid>
+    </div>
+</template>
+
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, ref } from 'vue-demi'
 import {
     DlWidget,
-    DlGridRow,
     DlGrid,
     DlBarChart,
-    DlConfusionMatrix
+    DlGridLayout,
+    DlIcon
 } from '../components'
 
 const labelsFn = () => {
@@ -65,67 +203,85 @@ export default defineComponent({
         DlGrid,
         DlWidget,
         DlBarChart,
-        DlGridRow,
-        DlConfusionMatrix
+        DlIcon
     },
     setup() {
-        return { data, labels, matrix }
+        const layout = ref([
+            [1, 5, 2],
+            [3, 4]
+        ])
+
+        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
+        }
     }
 })
 </script>
 
-<template>
-    <div>
-        <dl-grid gap="20px">
-            <dl-grid-row>
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 7</span>
-                        <span style="font-size: 12px; color: gray">Subtitle</span>
-                    </template>
-                    <template #content>
-                        <dl-confusion-matrix
-                            :matrix="matrix"
-                            :labels="labels"
-                        />
-                    </template>
-                    <template #description>
-                        <span>Lorem ipsum dolor sit amet consectetur adipisicing
-                            elit. Libero eligee a cupiditate modi dicta eveniet
-                            veritatis?</span>
-                    </template>
-                </dl-widget>
-            </dl-grid-row>
-
-            <dl-grid-row gap="20px">
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 2</span>
-                    </template>
-                    <template #content>
-                        <dl-bar-chart
-                            :legend-props="legendProps"
-                            :data="data"
-                            :options="options"
-                            :items-in-view="6"
-                        />
-                    </template>
-                </dl-widget>
-
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 3</span>
-                    </template>
-                    <template #content>
-                        <dl-bar-chart
-                            :legend-props="legendProps"
-                            :data="data"
-                            :options="options"
-                            :items-in-view="6"
-                        />
-                    </template>
-                </dl-widget>
-            </dl-grid-row>
-        </dl-grid>
-    </div>
-</template>
+<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;
+    & > * {
+        cursor: pointer;
+        margin: 0px 5px;
+    }
+}
+</style>

package/src/demos/index.ts

@@ -53,6 +53,7 @@ import DlKpiDemo from './DlKpiDemo.vue'
 import DlEllipsisDemo from './DlEllipsisDemo.vue'
 import DlSeparatorDemo from './DlSeparatorDemo.vue'
 import DlCardDemo from './DlCardDemo.vue'
+import DlGridDemo from './DlGridDemo.vue'
 import DlMarkupTableDemo from './DlMarkupTableDemo.vue'
 import DlVirtualScrollDemo from './DlVirtualScrollDemo.vue'
 import DlJsonEditorDemo from './DlJsonEditorDemo.vue'
@@ -113,6 +114,7 @@ export default {
     DlSeparatorDemo,
     DlKpiDemo,
     DlCardDemo,
+    DlGridDemo,
     DlMarkupTableDemo,
     DlVirtualScrollDemo,
     DlJsonEditorDemo

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

@@ -1,33 +0,0 @@
-<template>
-    <div
-        :style="rowGap"
-        class="dl-grid"
-    >
-        <slot />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    props: {
-        gap: {
-            type: String,
-            default: '30px'
-        }
-    },
-    computed: {
-        rowGap(): Record<string, string> {
-            return { '--row-gap': this.gap }
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.dl-grid {
-    display: flex;
-    flex-direction: column;
-}
-</style>

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

@@ -1,32 +0,0 @@
-<template>
-    <div
-        :style="columnGap"
-        class="dl-grid-row"
-    >
-        <slot />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    props: {
-        gap: {
-            type: String,
-            default: '30px'
-        }
-    },
-    computed: {
-        columnGap(): Record<string, string> {
-            return { '--column-gap': this.gap }
-        }
-    }
-})
-</script>
-
-<style scoped>
-.dl-grid-row {
-    display: flex;
-}
-</style>

package/src/utils/swapNodes.ts

@@ -1,30 +0,0 @@
-export function swapNodes({ source, target }: NodeSwap) {
-    const p1 = source.parentNode
-    const p2 = target.parentNode
-    let i1
-    let i2
-
-    if (!p1 || !p2 || p1.isEqualNode(target) || p2.isEqualNode(source)) return
-
-    for (var i = 0; i < p1.children.length; i++) {
-        if (p1.children[i].isEqualNode(source)) {
-            i1 = i
-        }
-    }
-    for (var i = 0; i < p2.children.length; i++) {
-        if (p2.children[i].isEqualNode(target)) {
-            i2 = i
-        }
-    }
-
-    if (p1.isEqualNode(p2) && i1 < i2) {
-        i2++
-    }
-    p1.insertBefore(target, p1.children[i1])
-    p2.insertBefore(source, p2.children[i2])
-}
-
-export interface NodeSwap {
-    source: HTMLElement
-    target: HTMLElement
-}