@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/basic/DlEmptyState/DlEmptyState.vue

@@ -0,0 +1,282 @@
+<template>
+    <div
+        :id="uuid"
+        ref="dlEtaRef"
+        :style="cssVars"
+        :class="[{ 'empty-state': true }, `empty-state--${align}`]"
+    >
+        <dl-icon
+            :class="iconClassName"
+            :color="iconColor"
+            :size="iconFontSize"
+            :icon="icon"
+        />
+
+        <dl-typography
+            v-if="title"
+            bold
+            :size="titleFontSize"
+            :color="titleColor"
+            :class="titleClassName"
+        >
+            {{ title }}
+        </dl-typography>
+
+        <dl-typography
+            v-if="subtitle"
+            :size="subtitleFontSize"
+            :color="subtitleColor"
+            :class="subtitleClassName"
+        >
+            {{ subtitle }}
+        </dl-typography>
+
+        <div
+            v-if="hasCTASlot"
+            class="empty-state--cta"
+        >
+            <slot name="cta" />
+        </div>
+
+        <dl-typography
+            v-if="info"
+            :size="infoFontSize"
+            :color="infoColor"
+            class="empty-state--info"
+        >
+            {{ info }}
+        </dl-typography>
+
+        <div
+            v-if="hasLinkSlot"
+            class="empty-state--links"
+        >
+            <slot name="links" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { DlIcon, DlTypography } from '../../essential'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
+import { defineComponent, computed, ref } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlEmptyState',
+    components: {
+        DlIcon,
+        DlTypography
+    },
+    props: {
+        bgImage: {
+            type: String,
+            default: null
+        },
+        bgSize: {
+            type: String,
+            default: '240px'
+        },
+        title: {
+            type: String,
+            default: 'Something Went Wrong'
+        },
+        titleColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        titleSize: {
+            type: String,
+            default: '20px'
+        },
+        subtitle: {
+            type: String,
+            default: ''
+        },
+        subtitleSize: {
+            type: String,
+            default: '14px'
+        },
+        subtitleColor: {
+            type: String,
+            default: 'dl-color-medium'
+        },
+        info: {
+            type: String,
+            default: ''
+        },
+        infoColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        infoSize: {
+            type: String,
+            default: '14px'
+        },
+        icon: {
+            type: String,
+            default: 'icon-dl-alert-filled'
+        },
+        iconSize: {
+            type: String,
+            default: '40px'
+        },
+        iconColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        responsive: Boolean,
+        align: {
+            type: String,
+            default: 'center'
+        }
+    },
+    setup(props, { slots }) {
+        const uuid = ref(`dl-empty-state-${v4()}`)
+
+        const dlEtaRef = ref(null)
+
+        const { widthRef, heightRef } = useSizeObserver(dlEtaRef)
+
+        const metric = computed(() => {
+            return widthRef.value > heightRef.value
+                ? widthRef.value
+                : heightRef.value
+        })
+
+        const fontSize = (value: number) => metric.value * (value / 365)
+
+        const titleFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.titleSize)) + 'px'
+                : props.titleSize
+        )
+
+        const infoFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.infoSize)) + 'px'
+                : props.infoSize
+        )
+
+        const iconFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.iconSize)) + 'px'
+                : props.iconSize
+        )
+
+        const subtitleFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.subtitleSize)) + 'px'
+                : props.subtitleSize
+        )
+
+        const bgImageSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.bgSize)) + 'px'
+                : props.bgSize
+        )
+
+        const hasCTASlot = !!slots['cta']
+
+        const hasLinkSlot = !!slots['links']
+
+        const iconClassName = computed(() => {
+            const classname = 'empty-state--icon'
+
+            return classname
+        })
+
+        const titleClassName = computed(() => {
+            const classname = 'empty-state--title'
+
+            return classname
+        })
+
+        const subtitleClassName = computed(() => {
+            const classname = 'empty-state--subtitle'
+
+            return classname
+        })
+
+        const infoClassName = computed(() => {
+            const classname = 'empty-state--info'
+
+            return classname
+        })
+
+        const cssVars = computed(() => {
+            return {
+                '--bg-image': props.bgImage,
+                '--bg-size': bgImageSize.value
+            }
+        })
+
+        return {
+            uuid,
+            cssVars,
+            iconClassName,
+            titleClassName,
+            infoClassName,
+            subtitleClassName,
+            hasCTASlot,
+            hasLinkSlot,
+            dlEtaRef,
+            titleFontSize,
+            subtitleFontSize,
+            infoFontSize,
+            iconFontSize
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.empty-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+
+    background-image: var(--bg-image);
+    background-size: var(--bg-size);
+
+    &--title {
+        line-height: 24px;
+        margin-bottom: 2px;
+    }
+
+    &--subtitle,
+    &--cta,
+    &--links,
+    &--info {
+        margin-bottom: 20px;
+    }
+
+    &--nowrap {
+        white-space: nowrap;
+    }
+
+    &--icon {
+        margin-bottom: 10px;
+    }
+
+    &--center,
+    &--left {
+        display: flex;
+        width: 100%;
+    }
+
+    &--center {
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+
+    &--left {
+        align-items: flex-start;
+        text-align: start;
+    }
+}
+</style>

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

@@ -0,0 +1,2 @@
+import DlEmptyState from './DlEmptyState.vue'
+export { DlEmptyState }

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

@@ -0,0 +1,20 @@
+export type DlEmptyStateProps = {
+    bgImage?: string
+    bgSize?: string
+    title?: string
+    titleColor?: string
+    titleSize?: string
+    subtitle?: string
+    subtitleSize?: string
+    subtitleColor?: string
+    info?: string
+    infoColor?: string
+    infoSize?: string
+    icon?: string
+    iconSize?: string
+    iconColor?: string
+    responsive?: boolean
+    align: 'center' | 'left'
+}
+
+export type DlEmptyStateSlots = ['cta', 'links']

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

@@ -0,0 +1,163 @@
+<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: '30px'
+        },
+        columnGap: {
+            type: String,
+            default: '30px'
+        },
+        maxElementsPerRow: {
+            type: Number,
+            default: 3
+        }
+    },
+    emits: ['update:modelValue', 'layout-changed'],
+    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, 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 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('position-changing', (e) => {
+                    if (!isCustomEvent(e)) return
+                    this.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
+            )
+
+            const newLayout = swapElemensInMatrix(
+                this.modelValue,
+                sourceMatrixIndex,
+                targetMatrixIndex,
+                side,
+                this.maxElementsPerRow
+            )
+            // Update modelValue is required to trigger visualization of the changes
+            this.$emit('update:modelValue', newLayout)
+            if (e.detail.endDragging) {
+                this.layoutChanged()
+            }
+        },
+        layoutChanged() {
+            this.$emit('layout-changed', this.modelValue)
+        },
+        applyIndexesForChildren() {
+            Array.from((this.$refs.grid as HTMLElement).children).forEach(
+                (element: Element, index: number) => {
+                    (element as HTMLElement).dataset.index = `${index}`
+                }
+            )
+        }
+    }
+})
+</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,5 @@
+export interface DlGridLayout {
+    name: string
+    value: number[][]
+}
+export type DlGridSideType = 'left' | 'right'

package/src/components/basic/DlKpi/components/KpiInfo.vue

@@ -18,7 +18,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue-demi'
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     name: 'KpiInfo',