@dataloop-ai/components 0.13.19 → 0.14.4

package/src/components/DlToastMessage/types.ts

@@ -0,0 +1,4 @@
+export interface Animation {
+    enter: string
+    leave: string
+}

package/src/components/DlToastMessage/utils/config.ts

@@ -0,0 +1,17 @@
+const Positions = Object.freeze({
+    top_right: 'top-right',
+    top: 'top',
+    top_left: 'top-left',
+    bottom_right: 'bottom-right',
+    bottom: 'bottom',
+    bottom_left: 'bottom-left'
+})
+
+const Types = Object.freeze({
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    info: 'info'
+})
+
+export { Positions, Types }

package/src/components/DlToastMessage/utils/render.ts

@@ -0,0 +1,56 @@
+import * as VueDemiModule from 'vue-demi'
+import ToastComponent from '../components/ToastComponent.vue'
+
+let createComponent: Function
+
+const VueDemi: any = VueDemiModule
+
+if (VueDemi.isVue3) {
+    createComponent = function (
+        component: object,
+        props: object,
+        parentContainer: Element,
+        slots = {}
+    ) {
+        const vNode = VueDemi.h(component, props, slots)
+        const container = document.createElement('div')
+        container.classList.add('v-toast--pending')
+        parentContainer.appendChild(container)
+        VueDemi.render(vNode, container)
+
+        return vNode.component
+    }
+} else {
+    createComponent = function (
+        component: object,
+        props: object,
+        parentContainer: Element,
+        slots = {}
+    ) {
+        const container = document.createElement('div')
+        container.classList.add('v-toast--pending')
+        parentContainer.appendChild(container)
+        renderVue2Component(ToastComponent, props, '.v-toast--pending')
+    }
+}
+
+export function removeElement(el: Element) {
+    if (typeof el.remove !== 'undefined') {
+        el.remove()
+    } else {
+        el.parentNode?.removeChild(el)
+    }
+}
+
+export { createComponent }
+
+function renderVue2Component(
+    component: Object,
+    props: Object,
+    container: string
+) {
+    new VueDemi.Vue2({
+        render: (h: (arg0: Object, arg1: { props: Object }) => any) =>
+            h(component, { props })
+    }).$mount(container)
+}

package/src/components/DlTypography.vue

@@ -15,7 +15,7 @@ import { getColor } from '../utils'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
-const sizes = ['h1', 'h2', 'h3', 'h4', 'body']
+const sizes = ['h1', 'h2', 'h3', 'h4', 'body', 'small']
 
 export default defineComponent({
     name: 'DlTypography',

package/src/components/DlWidget/DlGrid.vue

@@ -0,0 +1,33 @@
+<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/DlWidget/DlGridRow.vue

@@ -0,0 +1,32 @@
+<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/components/DlWidget/DlWidget.vue

@@ -1,29 +1,186 @@
 <template>
     <div
-        :id="uuid"
-        class="dl-widget"
+        ref="wrapper"
+        class="widget-wrapper"
     >
-        <div class="dl-widget__header">
-            <slot name="header" />
-        </div>
+        <div
+            :id="uuid"
+            ref="widget"
+            :class="widgetStyles"
+        >
+            <div
+                class="dl-widget__header"
+                @mouseenter="visibleDragIcon = true"
+                @mouseleave="visibleDragIcon = false"
+            >
+                <div class="dl-widget__header--titles">
+                    <slot name="header" />
+                </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__content">
+                <slot name="content" />
+            </div>
 
-        <div class="dl-widget__description">
-            <slot name="description" />
+            <div class="dl-widget__description">
+                <slot name="description" />
+            </div>
         </div>
+        <div
+            ref="clone"
+            class="drag-clone"
+        />
     </div>
 </template>
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
+import DlIcon from '../DlIcon.vue'
+import {
+    getElementAbove,
+    addMouseEnter,
+    removeMouseEnter,
+    setFlexBasis,
+    insertAfter
+} from './utils'
+import { swapNodes } from '../../utils/swapNodes'
+
 export default defineComponent({
     name: 'DlWidget',
+    components: {
+        DlIcon
+    },
     data() {
         return {
-            uuid: `dl-widget-${v4()}`
+            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'}`
+        }
+    },
+    mounted() {
+        setFlexBasis()
+    },
+    methods: {
+        startDragging(e: MouseEvent) {
+            this.isDragging = true
+            this.draggedWidget = getElementAbove(
+                e.target as HTMLElement,
+                'dl-widget'
+            )
+            if (this.draggedWidget) {
+                (this.$refs.clone as HTMLElement).appendChild(
+                    this.draggedWidget.cloneNode(true)
+                )
+            }
+
+            const sourceCanvas = this.draggedWidget?.querySelector('canvas')
+            if (sourceCanvas) {
+                const targetCanvasCtx = (this.$refs.clone as HTMLElement)
+                    .querySelector('canvas')
+                    .getContext('2d')
+
+                targetCanvasCtx.drawImage(sourceCanvas, 0, 0)
+            }
+
+            this.moveClone(e as MouseEvent)
+
+            addMouseEnter('dl-widget', this.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 = ''
+            const target = getElementAbove(e.target as HTMLElement, 'dl-widget')
+            if (target && this.draggedWidget) {
+                swapNodes({
+                    source: this.draggedWidget,
+                    target
+                })
+            }
+            window.removeEventListener('mousemove', this.moveClone)
+            window.removeEventListener('mouseup', this.stopDragging)
+            setTimeout(() => {
+                removeMouseEnter('dl-widget', this.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(
+                'mousemove',
+                this.handleMouseInsideWidget
+            )
+            this.hoveredWidget.addEventListener('mouseleave', () => {
+                clearTimeout(this.timer)
+                this.hoveredWidget.removeEventListener(
+                    'mousemove',
+                    this.handleMouseInsideWidget
+                )
+            })
+            this.timer = setTimeout(this.insertWidget, 1000)
+        },
+        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
+                )
+            }
+            this.hoveredWidget.removeEventListener(
+                'mousemove',
+                this.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)
+            }
         }
     }
 })
@@ -31,12 +188,30 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dl-widget {
+    border: 1px solid var(--dl-color-separator);
+    user-select: none;
     height: 100%;
     display: flex;
     flex-direction: column;
     &__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;
+            }
+        }
+
+        &--titles {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+        }
     }
     &__content {
         padding: 5px;
@@ -46,5 +221,21 @@ export default defineComponent({
         padding: 5px;
         font-size: 10px;
     }
+
+    &__drag {
+        visibility: hidden;
+    }
+}
+
+.drag-clone {
+    position: absolute;
+    background-color: var(--dl-color-text-buttons);
+    z-index: var(--dl-z-index-menu);
+}
+
+.widget-wrapper {
+    flex-basis: var(--widget-flex-basis);
+    margin: var(--row-gap) var(--column-gap);
+    transition: 0.1s;
 }
 </style>

package/src/components/DlWidget/index.ts

@@ -1,4 +1,4 @@
 import DlWidget from './DlWidget.vue'
-import DlWidgetGrid from './DlWidgetGrid.vue'
+import DlGrid from './DlGrid.vue'
 
-export { DlWidget, DlWidgetGrid }
+export { DlWidget, DlGrid }

package/src/components/DlWidget/utils.ts

@@ -1,30 +1,37 @@
-export function getTargetWidget(el: HTMLElement) {
+export function getElementAbove(el: HTMLElement, className: string) {
     //@ts-ignore
     for (; el && el !== document; el = el.parentNode) {
-        if (el.classList.contains('dl-widget-grid__item')) {
+        if (el.classList.contains(className)) {
             return el
         }
     }
 }
 
-export function equateElements(
-    sourceElement: HTMLElement,
-    targetElement: HTMLElement
+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
 ) {
-    targetElement.innerHTML = sourceElement.innerHTML
-    targetElement.style.width = `${sourceElement.offsetWidth}px`
-    targetElement.style.height = `${sourceElement.offsetHeight}px`
-    targetElement.style.top = `${
-        sourceElement.getBoundingClientRect().y + 20
-    }px`
-    targetElement.style.left = `${
-        sourceElement.getBoundingClientRect().x - 10
-    }px`
+    Array.from(document.getElementsByClassName(className)).forEach((widget) => {
+        widget.removeEventListener('mouseenter', method)
+    })
 }
 
-export function getIndex(id: string) {
-    return {
-        row: Number(id[0]),
-        column: Number(id[2])
-    }
+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 insertAfter(newNode: HTMLElement, existingNode: HTMLElement) {
+    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling)
 }

package/src/components/index.ts

@@ -50,8 +50,10 @@ import { DlDateTimeRange } from './DlDateTimeRange'
 import { DateInterval } from './DlDatePicker/types'
 import { DlSmartSearch } from './DlSmartSearch'
 import { DlWidget } from './DlWidget'
-import { DlWidgetGrid } from './DlWidget'
+import { DlGrid } from './DlWidget'
 import DlTextHolder from './DlTextHolder.vue'
+import { DlColumnChart, DlLineChart } from './DlChart'
+import DlSpinner from './DlSpinner.vue'
 
 export {
     DlAccordion,
@@ -111,8 +113,11 @@ export {
     DlDateTimeRange,
     DlSmartSearch,
     DlWidget,
-    DlWidgetGrid,
-    DlTextHolder
+    DlGrid,
+    DlTextHolder,
+    DlColumnChart,
+    DlLineChart,
+    DlSpinner
 }
 
 export type { StepState, DateInterval }

package/src/demo/BarChartDemo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 900px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0px;
+        "
+    >
+        <dl-bar-chart
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            :items-in-view="6"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlBarChart from '../components/DlChart/DlBarChart.vue'
+
+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
+}
+
+const data = {
+    labels: labelsFn(),
+    datasets: [
+        {
+            label: 'Data One',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: dataFn()
+        },
+        {
+            label: 'Data Two',
+            backgroundColor: '--dl-color-warning',
+            borderRadius: 4,
+            data: dataFn()
+        }
+    ]
+}
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlChartDemo',
+    components: {
+        DlBarChart
+    },
+    data() {
+        return {
+            data,
+            legendProps
+        }
+    },
+    methods: {}
+})
+</script>
+
+<style scoped lang="scss"></style>