@dataloop-ai/components 0.18.54 → 0.18.56

package/package.json

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

package/src/assets/globals.scss

@@ -46,6 +46,12 @@ body {
     &--none{
         text-transform: none;
     }
+    &--default {
+        &,
+        & > * {
+            text-transform: capitalize;
+        }
+    }
 }
 
 /* Inserting a collapsed row between two flex items will make 

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

@@ -1,9 +1,9 @@
 <template>
     <div
         :id="uuid"
-        class="dl-button-container"
+        :class="containerClasses"
         style="pointer-events: none"
-        :style="[cssButtonVars, containerStyles, capitalizeFirst]"
+        :style="[cssButtonVars, containerStyles]"
     >
         <button
             v-if="hasContent || hasIcon"
@@ -73,7 +73,7 @@ import {
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { computed, defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref, toRefs } from 'vue-demi'
 import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
@@ -179,11 +179,16 @@ export default defineComponent({
     },
     emits: ['click', 'mousedown', 'dblclick'],
     setup(props) {
+        const { active } = toRefs(props)
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
 
         const buttonClass = computed(() => {
-            return props.active ? 'dl-button active-class' : 'dl-button'
+            const classes = ['dl-button']
+            if (active.value) {
+                classes.push('active-class')
+            }
+            return classes
         })
 
         return {
@@ -194,6 +199,12 @@ export default defineComponent({
         }
     },
     computed: {
+        containerClasses(): string[] {
+            return [
+                'dl-button-container',
+                `dl-text-transform--${this.transform}`
+            ]
+        },
         getIconColor(): string {
             if (this.iconColor) {
                 return this.iconColor
@@ -203,12 +214,6 @@ export default defineComponent({
                 return this.textColor
             }
 
-            return 'dl-color-secondary'
-        },
-        capitalizeFirst(): string {
-            if (this.transform === 'default') {
-                return 'first-letter-capitalized'
-            }
             return null
         },
         computedStyles(): Record<string, string> {
@@ -356,9 +361,6 @@ export default defineComponent({
                     : setPadding(this.size),
                 '--dl-button-margin': this.margin,
                 '--dl-button-font-size': setFontSize(this.size),
-                '--dl-button-text-transform': this.capitalizeFirst
-                    ? null
-                    : this.transform,
                 '--dl-button-cursor': this.isActionable
                     ? 'pointer'
                     : 'not-allowed',
@@ -424,7 +426,6 @@ export default defineComponent({
     padding: var(--dl-button-padding);
     margin: var(--dl-button-margin);
     border-radius: var(--dl-button-border-radius);
-    text-transform: var(--dl-button-text-transform);
     font-family: 'Roboto', sans-serif;
     font-size: var(--dl-button-font-size);
     cursor: var(--dl-button-cursor);
@@ -484,13 +485,6 @@ export default defineComponent({
     transition: var(--dl-button-text-transition-duration);
 }
 
-.dl-button-container.first-letter-capitalized {
-    &::first-letter,
-    & > *::first-letter {
-        text-transform: capitalize;
-    }
-}
-
 .dl-button-container {
     display: inline-block;
     width: var(--dl-button-container-width);

package/src/components/basic/DlChip/DlChip.vue

@@ -127,10 +127,7 @@ export default defineComponent({
             return this.iconColor
         },
         chipClass(): string {
-            if (this.transform === 'default') {
-                return 'first-letter-capitalized'
-            }
-            return null
+            return `dl-text-transform--${this.transform}`
         },
         cssChipVars(): Record<string, string | number> {
             return {
@@ -170,10 +167,7 @@ export default defineComponent({
                 '--dl-chip-left-icon-hover-opacity': this.disabled ? 1 : 0.8,
                 '--dl-chip-left-icon-cursor': this.disabled
                     ? 'not-allowed'
-                    : 'pointer',
-                '--dl-chip-text-transform': this.chipClass
-                    ? null
-                    : this.transform
+                    : 'pointer'
             }
         }
     },
@@ -193,7 +187,6 @@ export default defineComponent({
     position: relative;
     display: flex;
     vertical-align: middle;
-    text-transform: var(--dl-chip-text-transform);
     font-size: var(--dl-font-size-body);
     line-height: 12px;
     border-radius: 2px;
@@ -220,13 +213,6 @@ export default defineComponent({
     }
 }
 
-.dl-chip.first-letter-capitalized {
-    &::first-letter,
-    & > *::first-letter {
-        text-transform: capitalize;
-    }
-}
-
 .dl-chip-remove-icon-container {
     cursor: var(--dl-chip-left-icon-cursor);
     position: absolute;

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/DlMarkupTable/DlMarkupTable.vue

@@ -11,7 +11,8 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent, computed, ref } from 'vue-demi'
+import { defineComponent, computed, ref, PropType, toRefs } from 'vue-demi'
+import { DlTextTransformOptions } from '../../shared/types'
 
 const separatorValues = ['horizontal', 'vertical', 'cell', 'none']
 
@@ -22,7 +23,14 @@ export default defineComponent({
         flat: Boolean,
         bordered: Boolean,
         square: Boolean,
-        wrapCells: Boolean,
+        /** wraps the cells */
+        wrap: Boolean,
+        transform: {
+            type: String as PropType<DlTextTransformOptions>,
+            default: 'default',
+            validator: (value: DlTextTransformOptions): boolean =>
+                Object.values(DlTextTransformOptions).includes(value)
+        },
 
         separator: {
             type: String,
@@ -32,17 +40,21 @@ export default defineComponent({
         }
     },
     setup(props) {
+        const { transform, dense, separator, flat, bordered, square, wrap } =
+            toRefs(props)
+
         const uuid = ref(`dl-markup-table-${v4()}`)
 
         const classes = computed(
             () =>
                 'dl-markup-table dl-table__container dl-table__card' +
-                ` dl-table--${props.separator}-separator` +
-                (props.dense === true ? ' dl-table--dense' : '') +
-                (props.flat === true ? ' dl-table--flat' : '') +
-                (props.bordered === true ? ' dl-table--bordered' : '') +
-                (props.square === true ? ' dl-table--square' : '') +
-                (props.wrapCells === false ? ' dl-table--no-wrap' : '')
+                ` dl-table--${separator.value}-separator` +
+                (dense.value === true ? ' dl-table--dense' : '') +
+                (flat.value === true ? ' dl-table--flat' : '') +
+                (bordered.value === true ? ' dl-table--bordered' : '') +
+                (square.value === true ? ' dl-table--square' : '') +
+                (wrap.value === false ? ' dl-table--no-wrap' : '') +
+                ` dl-text-transform--${transform.value}`
         )
 
         return {

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/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -409,7 +409,7 @@ export default defineComponent({
                 return props.color
             }
 
-            return 'dl-color-medium'
+            return 'dl-color-white'
         })
 
         return {