@dataloop-ai/components 0.13.0

package/src/components/DlTable/DlTd.vue

@@ -0,0 +1,109 @@
+<template>
+    <td
+        :class="classes"
+        :style="styles"
+    >
+        <div
+            ref="tableTd"
+            class="dl-table-cell-inner-div"
+        >
+            <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 '../'
+import { useSizeObserver } from '../../hooks/use-size-observer'
+
+export default defineComponent({
+    name: 'DlTd',
+    components: {
+        DlTooltip
+    },
+    props: {
+        props: { type: Object, default: () => {} },
+        autoWidth: Boolean,
+        noHover: Boolean,
+        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'
+
+            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 = ''
+
+            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 src="./dl-table-styles.scss" lang="scss" />

package/src/components/DlTable/DlTh.vue

@@ -0,0 +1,126 @@
+<template>
+    <th
+        :style="headerStyle"
+        :class="thClasses"
+        @click="onClick"
+    >
+        <div
+            ref="tableTh"
+            class="dl-table-cell-inner-div"
+        >
+            <dl-icon
+                v-if="isSortable && align === 'right'"
+                :class="iconClass"
+                icon="icon-dl-arrow-up"
+            />
+            <dl-tooltip v-if="hasEllipsis">
+                <slot />
+            </dl-tooltip>
+            <slot />
+            <dl-icon
+                v-if="isSortable && ['left', 'center'].includes(align)"
+                :class="iconClass"
+                icon="icon-dl-arrow-up"
+            />
+        </div>
+    </th>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
+import { useSizeObserver } from '../../hooks/use-size-observer'
+import DlIcon from '../DlIcon.vue'
+import DlTooltip from '../DlTooltip.vue'
+
+export default defineComponent({
+    name: 'DlTh',
+    components: {
+        DlIcon,
+        DlTooltip
+    },
+    props: {
+        props: { type: Object, default: () => {} },
+        autoWidth: Boolean
+    },
+    emits: ['click'],
+
+    setup(props, { emit }) {
+        const vm = getCurrentInstance()
+        const tableTh = ref(null)
+
+        const { hasEllipsis } = useSizeObserver(tableTh)
+
+        const onClickFn = (event: Event) => {
+            emit('click', event)
+        }
+
+        const hasOptionalProps = computed(() => {
+            return !!Object.keys(props.props ?? {})
+        })
+
+        const column = computed(() => {
+            let col: any
+            const name = vm.vnode.key as string
+            if (name) {
+                col = props.props?.colsMap[name]
+            } else {
+                col = props?.props?.col
+            }
+
+            return col
+        })
+
+        if (!column.value) {
+            return {
+                headerStyle: '',
+                thClasses: '',
+                isSortable: false,
+                hasEllipsis: false,
+                onClick: onClickFn
+            }
+        }
+
+        const thClasses = computed(() => {
+            let className = ''
+
+            if (props.autoWidth) {
+                className = 'dl-table--col-auto-width'
+            }
+
+            if (column.value.thClass) {
+                className = className.concat(' ' + column.value.thClass)
+            }
+
+            return className
+        })
+
+        const handleClick = (evt: Event) => {
+            if (column.value.sortable) {
+                const sort = props.props?.sort as Function
+                sort(column.value)
+            }
+            onClickFn(evt)
+        }
+
+        const onClick = !hasOptionalProps.value ? onClickFn : handleClick
+
+        const state = {
+            isSortable: !hasOptionalProps.value
+                ? false
+                : column?.value?.sortable ?? false,
+            thClasses,
+            align: column?.value?.align ?? 'left',
+            iconClass: column?.value?.iconClass ?? null,
+            hasOptionalProps,
+            headerStyle: column.value.headerStyle ?? '',
+            tableTh,
+            hasEllipsis,
+            onClick
+        }
+
+        return state
+    }
+})
+</script>
+
+<style scoped src="./dl-table-styles.scss" lang="scss" />

package/src/components/DlTable/DlTr.vue

@@ -0,0 +1,44 @@
+<template>
+    <tr
+        :class="trClasses"
+        v-bind="$attrs"
+        v-on="$listeners"
+    >
+        <slot />
+    </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTr',
+    props: {
+        props: { type: Object, default: () => {} },
+        noHover: Boolean
+    },
+    computed: {
+        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="./dl-table-styles.scss" lang="scss" />

package/src/components/DlTable/ResizableManager.ts

@@ -0,0 +1,233 @@
+interface Options {
+    minColWidth?: number
+    width?: number
+    cursor?: string
+    color: string
+    resizingColor?: string
+}
+
+const DEFAULT_SEPARTOR_WIDTH = 1
+const DEFAULT_MIN_COL_WIDTH = 16
+const DEFAULT_RESIZING_COLOR = 'var(--dl-color-medium)'
+const DEFAULT_COLOR = 'var(--dl-color-lighter)'
+const DEFAULT_CURSOR = 'ew-resize'
+
+const INNER_DIV_CLASS = 'dl-table-cell-inner-div'
+
+export class ResizableManager {
+    private _table: HTMLTableElement
+    private _currentColumn: HTMLTableCellElement | null = null
+    private _thInnerDiv: HTMLDivElement = null
+    private _columnIndex: number = 0
+    private _tdInnerDivs: HTMLElement[] = []
+    private _resizing: boolean = false
+    private _options: Options = {
+        minColWidth: DEFAULT_MIN_COL_WIDTH,
+        width: DEFAULT_SEPARTOR_WIDTH,
+        cursor: DEFAULT_CURSOR,
+        color: DEFAULT_COLOR,
+        resizingColor: DEFAULT_RESIZING_COLOR
+    }
+
+    private _colEvents: any[] = []
+    private _separators: HTMLDivElement[] = []
+
+    private _onMouseMoveFn = this._onMouseMove.bind(this)
+    private _onMouseUpFn = this._onMouseUp.bind(this)
+
+    private _onMouseMove(e: MouseEvent) {
+        requestAnimationFrame(() => {
+            if (!this._currentColumn || !this._thInnerDiv) return
+
+            const padding = this._paddingDiff(this._currentColumn)
+            const { x } = this._currentColumn.getBoundingClientRect()
+            const newWidth = e.clientX - x - padding
+
+            if (newWidth <= this._options.minColWidth) return
+
+            this._thInnerDiv.style.width = newWidth + 'px'
+
+            this._tdInnerDivs.forEach((div) => {
+                div.style.width = newWidth + 'px'
+            })
+        })
+    }
+
+    private _paddingDiff(col: HTMLElement) {
+        const padLeft = this._getStyleVal(col, 'padding-left')
+        const padRight = this._getStyleVal(col, 'padding-right')
+        return parseInt(padLeft) + parseInt(padRight)
+    }
+
+    private _getStyleVal(elm: HTMLElement, css: string) {
+        return window.getComputedStyle(elm, null).getPropertyValue(css)
+    }
+
+    private _onMouseUp(e: MouseEvent) {
+        e.stopPropagation()
+
+        this._resizing = false
+
+        this._removeColumnBoundaries(this._currentColumn)
+
+        document.removeEventListener('mousemove', this._onMouseMoveFn)
+        document.removeEventListener('mouseup', this._onMouseUpFn)
+    }
+
+    private _removeColumnBoundaries(eventTarget: any) {
+        const leftSeparator = eventTarget.querySelector(
+            '[data-type="left-separator"]'
+        ) as HTMLElement
+        const resizeSeparator = eventTarget.querySelector(
+            '[data-type="resize-separator"]'
+        ) as HTMLElement
+
+        leftSeparator.style.backgroundColor = 'transparent'
+        resizeSeparator.style.backgroundColor = 'transparent'
+        eventTarget.style.cursor = 'inherit'
+    }
+
+    private _onMouseDown = (e: MouseEvent) => {
+        this._resizing = true
+
+        e.stopPropagation()
+        const eventTarget = e.target as HTMLDivElement
+        eventTarget.style.backgroundColor = this._options.resizingColor
+
+        this._currentColumn = eventTarget!
+            .parentElement! as HTMLTableCellElement
+        this._thInnerDiv = this._currentColumn.querySelector(
+            `.${INNER_DIV_CLASS}`
+        )
+
+        this._columnIndex = Number(eventTarget.getAttribute('data-index')!)
+        this._tdInnerDivs = this._table!.querySelectorAll(
+            `tbody > tr > td:nth-of-type(${
+                this._columnIndex + 1
+            }) > .${INNER_DIV_CLASS}`
+        )! as unknown as HTMLDivElement[]
+
+        document.addEventListener('mousemove', this._onMouseMoveFn)
+        document.addEventListener('mouseup', this._onMouseUpFn)
+    }
+
+    private _onMouseEnter(e: any) {
+        if (this._resizing === true) return
+
+        const leftSeparator = e.target.querySelector(
+            '[data-type="left-separator"]'
+        ) as HTMLElement
+        const resizeSeparator = e.target.querySelector(
+            '[data-type="resize-separator"]'
+        ) as HTMLElement
+
+        leftSeparator.style.backgroundColor = this._options.color
+        resizeSeparator.style.backgroundColor = this._options.color
+        e.target.style.cursor = 'pointer'
+    }
+
+    private _onMouseLeave = (e: any) => {
+        if (this._resizing === true) return
+
+        this._removeColumnBoundaries(e.target)
+    }
+
+    private _createResizeSeparator(height: number, index: number) {
+        const div = document.createElement('div')
+        div.style.top = '0px'
+        div.style.right = '0px'
+        div.style.width = this._options.width + 'px'
+        div.style.position = 'absolute'
+        div.style.cursor = this._options.cursor
+        div.style.userSelect = 'none'
+        div.style.height = height + 'px'
+        div.setAttribute('data-index', index.toString())
+        div.setAttribute('data-type', 'resize-separator')
+
+        return div
+    }
+
+    private _createLeftSeparator(height: number) {
+        const div = document.createElement('div')
+        div.style.top = '0px'
+        div.style.left = '0px'
+        div.style.width = this._options.width + 'px'
+        div.style.position = 'absolute'
+        div.style.userSelect = 'none'
+        div.style.height = height + 'px'
+        div.setAttribute('data-type', 'left-separator')
+
+        return div
+    }
+
+    public addResizeCapability(
+        table: HTMLTableElement,
+        options: Partial<Options> = {}
+    ) {
+        this._options = {
+            ...this._options,
+            ...options
+        }
+        this._table = table
+        const tableHeight = table.offsetHeight
+        const cols = table.querySelectorAll('thead > tr:first-of-type > th')
+
+        for (let i = 0; i < cols.length - 1; i++) {
+            const column = cols[i]
+
+            if ((column as HTMLElement).dataset.resizable === 'false') {
+                continue
+            }
+
+            (column as HTMLElement).style.position = 'relative'
+
+            const resizeSeparator = this._createResizeSeparator(tableHeight, i)
+            column.appendChild(resizeSeparator)
+            resizeSeparator.addEventListener(
+                'mousedown',
+                this._onMouseDown.bind(this)
+            )
+
+            const leftSeparator = this._createLeftSeparator(tableHeight)
+            column.appendChild(leftSeparator)
+
+            this._separators.push(resizeSeparator, leftSeparator)
+
+            const onMouseEnterFn = this._onMouseEnter.bind(this)
+            column.addEventListener('mouseenter', onMouseEnterFn)
+            this._colEvents.push({
+                column,
+                type: 'mouseenter',
+                evt: onMouseEnterFn
+            })
+
+            const onMouseLeaveFn = this._onMouseLeave.bind(this)
+            column.addEventListener('mouseleave', onMouseLeaveFn)
+            this._colEvents.push({
+                column,
+                type: 'mouseleave',
+                evt: onMouseLeaveFn
+            })
+        }
+    }
+
+    public updateResizersHeight(height: number) {
+        this._separators.forEach((el) => {
+            el.style.height = height + 'px'
+        })
+    }
+
+    public removeResizeCapability() {
+        this._separators.forEach((separator) => {
+            separator.remove()
+        })
+
+        this._colEvents.forEach(({ column, type, evt }) => {
+            (column as HTMLElement).style.position = 'inherit'
+            column.removeEventListener(type, evt)
+        })
+
+        this._currentColumn = null
+        this._separators = []
+    }
+}