@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlTreeTable/components/DlTdTree.vue

@@ -0,0 +1,119 @@
+<template>
+    <td
+        :class="classes"
+        :style="styles"
+    >
+        <div
+            ref="tableTd"
+            class="dl-table-cell-inner-div"
+        >
+            <slot name="icon" />
+            <dl-tooltip v-if="hasEllipsis">
+                <slot />
+            </dl-tooltip>
+            <slot />
+        </div>
+    </td>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
+import { getColor } from '../../../../utils'
+import { DlTooltip } from '../../../shared'
+import { useSizeObserver } from '../../../../hooks/use-size-observer'
+
+export default defineComponent({
+    name: 'DlTdTree',
+    components: {
+        DlTooltip
+    },
+    props: {
+        props: { type: Object, default: () => {} },
+        autoWidth: Boolean,
+        noHover: Boolean,
+        row: {
+            type: Object,
+            default: () => {}
+        },
+        bgColor: {
+            type: String,
+            default: ''
+        }
+    },
+    setup(props) {
+        const vm = getCurrentInstance()
+
+        const tableTd = ref(null)
+
+        const { hasEllipsis } = useSizeObserver(tableTd)
+
+        const hasOptionalProps = computed(() => {
+            return props.props !== void 0
+        })
+
+        const tdClasses = computed(() => {
+            let classNames = 'dl-td dl-td-tree'
+
+            if (props.autoWidth) {
+                classNames = classNames.concat(' dl-table--col-auto-width')
+            }
+
+            if (props.noHover) {
+                classNames = classNames.concat(' dl-td--no-hover')
+            }
+
+            return classNames
+        })
+
+        const tdStyles = computed(() => {
+            let styles = ''
+
+            console.log(props)
+
+            if (props.bgColor) {
+                styles = styles.concat(
+                    `background: ${getColor(props.bgColor, '')};`
+                )
+            }
+
+            return styles
+        })
+
+        const column = computed(() => {
+            const name = vm.vnode.key as string
+
+            return (
+                (props.props.colsMap !== void 0
+                    ? props.props.colsMap[name]
+                    : null) || props.props.col
+            )
+        })
+
+        if (!hasOptionalProps.value) {
+            return {
+                classes: tdClasses,
+                styles: tdStyles,
+                tableTd,
+                hasEllipsis
+            }
+        }
+
+        if (column.value === void 0) {
+            return
+        }
+
+        const { row } = props.props
+
+        return {
+            classes: tdClasses.value + column.value.tdClass(row),
+            styles: tdStyles.value + column.value.tdStyle(row),
+            tableTd,
+            hasEllipsis
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../DlTable/styles/dl-table-styles.scss';
+</style>

package/src/components/compound/DlTreeTable/components/DlTrTree.vue

@@ -0,0 +1,52 @@
+<template>
+    <tr
+        :class="trClasses"
+        v-bind="$attrs"
+        v-on="listeners"
+    >
+        <slot />
+    </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent, isVue2 } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTrTree',
+    props: {
+        props: { type: Object, default: () => {} },
+        noHover: Boolean
+    },
+    computed: {
+        listeners(): any {
+            if (isVue2) {
+                // @ts-ignore
+                return this.$listeners
+            } else {
+                return this.$attrs
+            }
+        },
+        trClasses(): string {
+            let classes = 'dl-tr'
+
+            if (
+                this.$props.props?.header // header slot
+            ) {
+                return classes
+            }
+
+            if (this.$props.props?._trClass) {
+                classes = classes.concat(' ' + this.$props.props._trClass)
+            }
+
+            if (this.$props.props?.noHover || this.$props.noHover) {
+                classes = classes.concat(' dl-tr--no-hover')
+            }
+
+            return classes
+        }
+    }
+})
+</script>
+
+<style scoped src="../../DlTable/styles/dl-table-styles.scss" lang="scss" />

package/src/components/compound/DlTreeTable/index.ts

@@ -0,0 +1,3 @@
+import DlTreeTable from './DlTreeTable.vue'
+
+export { DlTreeTable }

package/src/components/compound/DlTreeTable/types.ts

@@ -0,0 +1 @@
+export type RecordStringAny = Record<string, any>

package/src/components/compound/DlTreeTable/utils/convertToNestedObject.ts

@@ -0,0 +1,51 @@
+import { RecordStringAny } from '../types'
+import { cloneDeep } from 'lodash'
+
+export function convertToNestedObject(selectedRows: RecordStringAny[]) {
+    const clonedSelectedRows = cloneDeep(selectedRows)
+    let selectedItems: RecordStringAny[] = []
+
+    function isObjectContained(row: RecordStringAny, rows: RecordStringAny[]) {
+        for (const rowsItem of rows) {
+            if (rowsItem.children) {
+                const indexItem = rowsItem.children.findIndex(
+                    (item: RecordStringAny) => item.name === row.name
+                )
+
+                if (indexItem > -1) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    const filteredObjects = clonedSelectedRows.filter(
+        (obj) => !isObjectContained(obj, clonedSelectedRows)
+    )
+
+    function deleteMissingObjects(
+        rows: RecordStringAny[],
+        filteredObjects: RecordStringAny[]
+    ) {
+        const cloneFilteredObjects = filteredObjects.filter((obj) => {
+            // Check if the object's name exists in rows
+            return rows.some((row) => row.name === obj.name)
+        })
+
+        // Recursively delete missing objects from children arrays
+        cloneFilteredObjects.forEach((obj) => {
+            if (obj.children) {
+                obj.children = deleteMissingObjects(rows, obj.children)
+            }
+        })
+
+        return cloneFilteredObjects
+    }
+
+    selectedItems = deleteMissingObjects(selectedRows, filteredObjects)
+
+    return {
+        selectedItems
+    }
+}

package/src/components/compound/DlTreeTable/utils/flatTreeData.ts

@@ -0,0 +1,19 @@
+import { flatMapDeep } from 'lodash'
+
+type TreeDataItem = Record<string, any>
+
+const flatten = (item: TreeDataItem): TreeDataItem[] => {
+    if (!item.level) {
+        item.level = 1
+    }
+    const leveledItems = (item.children || []).map((i: any) => {
+        return {
+            ...i,
+            level: (item.level || 1) + 1
+        }
+    })
+
+    return [item, flatMapDeep(leveledItems, flatten)]
+}
+
+export const flatTreeData = (data: TreeDataItem[]) => flatMapDeep(data, flatten)

package/src/components/compound/DlTreeTable/utils/getFromChildren.ts

@@ -0,0 +1,39 @@
+import { cloneDeep } from 'lodash'
+import { RecordStringAny } from '../types'
+
+export function getFromChildren(
+    parent: RecordStringAny,
+    propsRowKey: string | Function
+) {
+    const clonedParentRows = cloneDeep(parent)
+    const childrenKeys: string[] = []
+    const childrenCollection: RecordStringAny[] = []
+
+    childrenCollection.push(clonedParentRows)
+
+    if (typeof propsRowKey === 'function') {
+        const keys = clonedParentRows.map(propsRowKey)
+        childrenCollection.concat(keys)
+    }
+
+    function traverseChildren(parentRow: RecordStringAny) {
+        if (!parentRow) {
+            return
+        }
+
+        if (typeof propsRowKey === 'string') {
+            childrenKeys.push(parentRow[propsRowKey])
+        }
+
+        if (!(parentRow as any)?.children) {
+            return
+        }
+        for (const child of (parentRow as any).children) {
+            childrenCollection.push(child)
+            traverseChildren(child)
+        }
+    }
+    traverseChildren(clonedParentRows)
+
+    return { childrenKeys, childrenCollection }
+}

package/src/components/compound/DlTreeTable/utils/trSpacing.ts

@@ -0,0 +1,13 @@
+const setTrSpacing = (item: Record<string, any>) => {
+    let paddingLeft = 10
+
+    if (item.children) {
+        paddingLeft = item.level * 16
+    } else {
+        paddingLeft = item.level * 16 + 16
+    }
+
+    return `padding-left: ${paddingLeft}px;`
+}
+
+export { setTrSpacing }

package/src/components/compound/DlTreeTable/utils/treeTableRowSelection.ts

@@ -0,0 +1,184 @@
+import { computed, ComputedRef, ref } from 'vue-demi'
+import { DlTableProps, DlTableRow } from '../../DlTable/types'
+import { convertToNestedObject } from './convertToNestedObject'
+import { RecordStringAny } from '../types'
+
+type booleanStringPartial = boolean | 'partial'
+
+export const useTreeTableRowSelectionProps = {
+    selection: {
+        type: String,
+        default: 'none',
+        validator: (v: string) => ['single', 'multiple', 'none'].includes(v)
+    },
+    selected: {
+        type: Array,
+        default: () => [] as (string | DlTableRow)[]
+    }
+}
+
+export const useTreeTableRowSelectionEmits = ['selection', 'selectedItems']
+
+export function useTreeTableRowSelection(
+    props: DlTableProps,
+    emit: (event: string, val: any) => void,
+    computedRows: ComputedRef<DlTableRow[]>,
+    getRowKey: ComputedRef<(val: string | DlTableRow) => any>
+) {
+    const selectedRows = ref<(string | DlTableRow)[]>([])
+    const selectedItemsNested = ref([])
+
+    const selectedKeys = computed(() => {
+        return selectedRows.value
+            .map(getRowKey.value)
+            .reduce((acc, key: string) => {
+                acc[key] = true
+
+                return acc
+            }, {} as Record<string, boolean>)
+    })
+
+    const hasSelectionMode = computed(() => {
+        console.log('test')
+        return props.selection !== 'none'
+    })
+
+    const singleSelection = computed(() => {
+        return props.selection === 'single'
+    })
+
+    const multipleSelection = computed(() => {
+        return props.selection === 'multiple'
+    })
+
+    const allRowsSelected = computed(
+        () =>
+            computedRows.value.length > 0 &&
+            computedRows.value.every(
+                (row) => selectedKeys.value[getRowKey.value(row)] === true
+            )
+    )
+
+    const someRowsSelected = computed(
+        () =>
+            allRowsSelected.value !== true &&
+            computedRows.value.some(
+                (row) => selectedKeys.value[getRowKey.value(row)] === true
+            )
+    )
+
+    const rowsSelectedNumber = computed(() => selectedRows.value.length)
+
+    function getRowByKey(rowKey: string) {
+        selectedItemsNested.value.findIndex((item) => item[rowKey] === rowKey)
+    }
+
+    function clearSelection() {
+        selectedRows.value = []
+    }
+
+    function updateSelection(
+        keys: string[],
+        rows: (string | DlTableRow)[],
+        added: boolean,
+        evt?: (event: string, val: any) => void
+    ) {
+        emit('selection', { rows, added, keys, evt })
+        /*
+        const payload =
+            singleSelection.value === true
+                ? added === true
+                    ? rows
+                    : []
+                : added === true
+                ? props.selected.concat(rows as string[])
+                : props.selected.filter(
+                      (row) => keys.includes(getRowKey.value(row)) === false
+                  )*/
+
+        let payload: any
+        if (singleSelection.value === true) {
+            if (added === true) {
+                payload = rows
+            } else {
+                payload = []
+            }
+        } else {
+            if (added === true) {
+                payload = selectedRows.value.concat(rows as string[])
+            } else {
+                payload = selectedRows.value.filter(
+                    (row) => !keys.includes(getRowKey.value(row))
+                )
+            }
+        }
+
+        selectedRows.value = payload
+
+        const { selectedItems } = convertToNestedObject(payload)
+        selectedItemsNested.value = selectedItems
+
+        emit('selectedItems', selectedItems)
+    }
+
+    function isIncludedInSelectedNestedItems(
+        row: any,
+        rowKey: string
+    ): boolean {
+        const index = selectedItemsNested.value.findIndex(
+            (item) => item[rowKey] === row[rowKey]
+        )
+
+        return index > -1
+    }
+
+    function isRowSelected(
+        rowKey: string | Function,
+        rowKeyValue: string
+    ): booleanStringPartial {
+        let getOriginalRowByRowKey: any
+        let getSelectedRowByRowKey: RecordStringAny
+
+        if (typeof rowKey === 'string') {
+            const originalRows = selectedRows.value.filter((item) =>
+                isIncludedInSelectedNestedItems(item, rowKey)
+            )
+            getOriginalRowByRowKey = originalRows.find(
+                (originalItem: any) => originalItem[rowKey] === rowKeyValue
+            )
+            getSelectedRowByRowKey = selectedItemsNested.value.find(
+                (selectedItem: any) => {
+                    if (getOriginalRowByRowKey) {
+                        return (
+                            selectedItem[rowKey] ===
+                            getOriginalRowByRowKey[rowKey]
+                        )
+                    }
+                    return false
+                }
+            )
+        }
+        if (getSelectedRowByRowKey && getOriginalRowByRowKey) {
+            if (
+                getOriginalRowByRowKey.children?.length !==
+                getSelectedRowByRowKey.children?.length
+            ) {
+                return 'partial'
+            }
+        }
+
+        return selectedKeys.value[rowKeyValue] === true
+    }
+
+    return {
+        hasSelectionMode,
+        singleSelection,
+        multipleSelection,
+        allRowsSelected,
+        someRowsSelected,
+        rowsSelectedNumber,
+        isRowSelected,
+        clearSelection,
+        updateSelection
+    }
+}

package/src/components/compound/index.ts

@@ -7,7 +7,6 @@ export * from './DlItem'
 export * from './DlOptionGroup'
 export * from './DlPagination'
 export * from './DlRange'
-export * from './DlSearches'
 export * from './DlSelect'
 export * from './DlSlider'
 export * from './DlStepper'
@@ -15,5 +14,19 @@ export * from './DlTable'
 export * from './DlTabPanels'
 export * from './DlTabs'
 export * from './DlToast'
+
+// uses other compound
 export * from './DlDialogBox'
+export * from './DlThumbnailGallery'
 export * from './DlToggleButton'
+export * from './DlTreeTable'
+export * from './DlThumbnailGallery'
+export * from './DlJsonEditor'
+export * from './DlCodeEditor'
+export * from './DlCard'
+
+/**
+ * Moved to bottom of file as dlsmartsearch specifically uses other components here and needs to be initialized last
+ * todo: Fix potential circular dependency
+ */
+export * from './DlSearches'

package/src/components/compound/types.ts

@@ -9,3 +9,5 @@ export * from './DlDialogBox/types'
 export * from './DlOptionGroup/types'
 export * from './DlTable/types'
 export * from './DlToggleButton/types'
+export * from './DlCodeEditor/types'
+export * from './DlCard/types'

package/src/components/essential/DlBadge/DlBadge.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 
         const style = computed(() => {
             return {
-                verticalAlign: props.align !== void 0 ? props.align : null,
+                verticalAlign: props.align ? props.align : null,
                 aspectRatio: hasSlot.value || props.label ? '' : '1/1',
                 padding:
                     hasSlot.value || props.label
@@ -66,10 +66,10 @@ export default defineComponent({
                 }-line` +
                 (props.outline === true
                     ? ' dl-badge--outline'
-                    : props.color !== void 0
+                    : props.color
                     ? ` bg-${props.color}`
                     : '') +
-                (text !== void 0 ? ` text-${text}` : '') +
+                (text ? ` text-${text}` : '') +
                 (props.floating === true ? ' dl-badge--floating' : '') +
                 (props.rounded === true ? ' dl-badge--rounded' : '') +
                 (props.transparent === true ? ' dl-badge--transparent' : '')

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -84,7 +84,7 @@ import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 import { stopAndPrevent } from '../../../utils'
 
-const ValueTypes = [Array, Boolean, String, Number, Object, Function, null]
+const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
 export default defineComponent({
     name: 'DlCheckbox',
@@ -103,7 +103,7 @@ export default defineComponent({
         indeterminateValue: { type: ValueTypes, default: null },
         value: { type: ValueTypes, default: null },
         falseValue: { type: ValueTypes, default: false },
-        padding: { type: String, default: '5px' },
+        padding: { type: String, default: '0' },
         trueValue: { type: ValueTypes, default: true },
         tabindex: { type: String, default: '0' },
         subLabelSize: { type: String, default: '10px' }
@@ -116,7 +116,7 @@ export default defineComponent({
     },
     computed: {
         identifierClass(): string {
-            return `dl-checkbox-${this.label ?? ''}`.replaceAll(' ', '-')
+            return `dl-checkbox-${this.label ?? ''}`.replace(/ /g, '-')
         },
         computedId(): string {
             return `${this.id || v4()}`
@@ -155,7 +155,8 @@ export default defineComponent({
         },
         cssSvgVars(): Record<string, string> {
             return {
-                '--dl-active-color': this.getCurrentColor()
+                '--dl-active-color': this.getCurrentColor(),
+                'min-width': '12px'
             }
         },
         hasLabel(): boolean {
@@ -242,7 +243,7 @@ export default defineComponent({
     display: inline-flex;
     max-width: max-content;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     padding: var(--dl-checkbox-padding);
     user-select: none;
 }
@@ -250,7 +251,7 @@ export default defineComponent({
     cursor: not-allowed;
     color: var(--dl-color-disabled);
     & * {
-        pointer-events: none;
+        pointer-events: auto;
         color: var(--dl-color-disabled);
     }
 }
@@ -279,7 +280,7 @@ input {
 }
 
 .sub-text {
-    margin-left: 6%;
+    padding-left: var(--dl-checkbox-sub-label-left-padding, 20px);
     width: 80%;
     color: var(--dl-color-medium);
     word-break: break-all;
@@ -293,6 +294,8 @@ input {
 .checkbox-label {
     font-size: var(--dl-font-size-body);
     color: var(--dl-color-darker);
+    overflow-wrap: break-word;
+    width: 100%;
 }
 .check {
     position: absolute;