@dataloop-ai/components 0.13.18 → 0.14.3

package/src/components/DlToastMessage/components/ToastComponent.vue

@@ -0,0 +1,279 @@
+<template>
+    <transition
+        :enter-active-class="transition.enter"
+        :leave-active-class="transition.leave"
+    >
+        <div
+            v-show="isActive"
+            ref="root"
+            class="v-toast__item"
+            :class="[
+                `v-toast__item--${type}`,
+                `v-toast__item--${position}`,
+                classItem
+            ]"
+        >
+            <dl-alert
+                :type="type"
+                :closable="closable"
+                @update:model-value="(val) => closeToast(val)"
+            >
+                <span
+                    class="v-toast__text"
+                    data-test="message-text"
+                />
+            </dl-alert>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    onBeforeMount,
+    computed,
+    onMounted
+} from 'vue-demi'
+import DlAlert from '../../DlAlert.vue'
+import { Positions, Types } from '../utils/config'
+import { removeElement } from '../utils/render'
+import { Animation } from '../types'
+
+export default defineComponent({
+    name: 'ToastComponent',
+    components: { DlAlert },
+    props: {
+        message: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'success',
+            validator(value: string): boolean {
+                return Object.values(Types as unknown).includes(value)
+            }
+        },
+        classItem: {
+            type: String,
+            default: ''
+        },
+        duration: {
+            type: Number,
+            default: 10
+        },
+        position: {
+            type: String,
+            default: Positions.bottom,
+            validator(value: string): boolean {
+                return Object.values(Positions as unknown).includes(value)
+            }
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props) {
+        const { position, duration, message } = props
+        const root = ref(null)
+        let parentTop: HTMLElement = null
+        let parentBottom: HTMLElement = null
+        const toastParentPosition = ref(null)
+        const isActive = ref(false)
+        function closeToastMessage(): void {
+            isActive.value = false
+            setTimeout(() => removeElement(root.value), 200)
+        }
+        onBeforeMount(() => {
+            setupContainer()
+        })
+        function setupContainer(): void {
+            parentTop = document.querySelector('.v-toast.v-toast--top')
+            parentBottom = document.querySelector('.v-toast.v-toast--bottom')
+            if (parentTop && parentBottom) return
+            if (!parentTop) {
+                parentTop = document.createElement('div')
+                parentTop.className = 'v-toast v-toast--top'
+            }
+            if (!parentBottom) {
+                parentBottom = document.createElement('div')
+                parentBottom.className = 'v-toast v-toast--bottom'
+            }
+            const container = document.body
+            container.appendChild(parentTop)
+            container.appendChild(parentBottom)
+        }
+
+        const correctParent = computed(() => {
+            switch (position) {
+                case Positions.top:
+                case Positions.top_right:
+                case Positions.top_left:
+                    toastParentPosition.value = 'top'
+                    return parentTop
+                case Positions.bottom:
+                case Positions.bottom_right:
+                case Positions.bottom_left:
+                    toastParentPosition.value = 'bottom'
+                    return parentBottom
+            }
+        })
+
+        const transition = computed((): Animation => {
+            switch (position) {
+                case Positions.top:
+                case Positions.top_right:
+                case Positions.top_left:
+                    return {
+                        enter: 'v-toast--fade-in-down',
+                        leave: 'v-toast--fade-out'
+                    }
+                case Positions.bottom:
+                case Positions.bottom_right:
+                case Positions.bottom_left:
+                    return {
+                        enter: 'v-toast--fade-in-up',
+                        leave: 'v-toast--fade-out'
+                    }
+            }
+        })
+
+        onMounted(() => {
+            showNotice()
+        })
+
+        function showNotice(): void {
+            const parent = correctParent.value
+            const container = root.value.closest('.v-toast--pending')
+            root.value.querySelector('.v-toast__text').innerHTML = message
+            parent.insertAdjacentElement('afterbegin', root.value)
+            container?.remove()
+            isActive.value = true
+            if (duration) {
+                setTimeout(() => {
+                    closeToastMessage()
+                }, duration * 1000)
+            }
+        }
+        function closeToast(val: boolean) {
+            if (!val) removeElement(root.value)
+        }
+
+        return {
+            root,
+            transition,
+            isActive,
+            closeToast,
+            correctParent
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.v-toast {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 1052;
+    pointer-events: none;
+    &__text {
+        min-width: 300px;
+        max-width: 800px;
+    }
+    &__item {
+        display: inline-flex;
+        align-items: center;
+        pointer-events: auto;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        cursor: pointer;
+        animation-duration: 150ms;
+        &.v-toast__item--top,
+        &.v-toast__item--bottom {
+            align-self: center;
+        }
+
+        &.v-toast__item--top-right,
+        &.v-toast__item--bottom-right {
+            align-self: flex-end;
+        }
+
+        &.v-toast__item--top-left,
+        &.v-toast__item--bottom-left {
+            align-self: flex-start;
+        }
+    }
+
+    &.v-toast--top {
+        flex-direction: column;
+    }
+
+    &.v-toast--bottom {
+        flex-direction: column-reverse;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.v-toast--fade-out {
+    animation-name: fadeOut;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.v-toast--fade-in-down {
+    animation-name: fadeInDown;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.v-toast--fade-in-up {
+    animation-name: fadeInUp;
+}
+
+/**
+ * Vue Transitions
+ */
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 150ms ease-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

package/src/components/DlToastMessage/index.ts

@@ -0,0 +1,5 @@
+import { useToast } from './api/useToast'
+
+const DlToast = useToast()
+
+export { DlToast }

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,54 @@
+import * as VueDemi from 'vue-demi'
+import ToastComponent from '../components/ToastComponent.vue'
+
+let createComponent: Function
+
+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 }