@dataloop-ai/components 0.13.0

package/src/utils/css-color-names.ts

@@ -0,0 +1,150 @@
+export const colorNames = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkgrey: '#a9a9a9',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkslategrey: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    goldenrod: '#daa520',
+    gold: '#ffd700',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    grey: '#808080',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    indianred: '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavenderblush: '#fff0f5',
+    lavender: '#e6e6fa',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgray: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightslategrey: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370db',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#db7093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    slategrey: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32'
+}

package/src/utils/dom.ts

@@ -0,0 +1,55 @@
+import { isRef, Ref } from 'vue-demi'
+
+export function css(element: HTMLElement, css: Record<string, string>) {
+    const style = element.style
+
+    for (const prop in css) {
+        style[prop as unknown as number] = css[prop]
+    }
+}
+
+// internal
+export function getElement(
+    el: HTMLElement | Ref<HTMLElement> | Element | null | string
+) {
+    if (el === void 0 || el === null) {
+        return void 0
+    }
+
+    if (typeof el === 'string') {
+        try {
+            return document.querySelector(el) || void 0
+        } catch (err) {
+            return void 0
+        }
+    }
+
+    const target = isRef(el) === true ? (el as Ref<HTMLElement>).value : el
+
+    if (target) {
+        return (target as any).$el || target
+    }
+}
+
+// internal
+export function childHasFocus(el: HTMLElement, focusedEl: Node) {
+    if (el === void 0 || el === null || el.contains(focusedEl) === true) {
+        return true
+    }
+
+    for (
+        let next = el.nextElementSibling;
+        next !== null;
+        next = next.nextElementSibling
+    ) {
+        if (next.contains(focusedEl)) {
+            return true
+        }
+    }
+
+    return false
+}
+
+export default {
+    css
+}

package/src/utils/draggable-table.ts

@@ -0,0 +1,416 @@
+import { debounce } from 'lodash'
+
+function getTargetRow(target: any) {
+    const elemName = target.tagName.toLowerCase()
+    const elemClassList = Array.from(target.classList) as string[]
+
+    if (elemName == 'tr') return target
+    if (elemClassList.includes('icon-dl-drag')) return target.closest('tr')
+}
+
+function removeColumnBoundaries(eventTarget: any) {
+    const leftSeparator = eventTarget.querySelector(
+        '[data-type="left-separator"]'
+    ) as HTMLElement
+    const resizeSeparator = eventTarget.querySelector(
+        '[data-type="resize-separator"]'
+    ) as HTMLElement
+
+    if (leftSeparator) {
+        leftSeparator.style.backgroundColor = 'transparent'
+    }
+
+    if (resizeSeparator) {
+        resizeSeparator.style.backgroundColor = 'transparent'
+    }
+    eventTarget.style.cursor = 'inherit'
+}
+
+function getMouseCoords(event: any, root?: HTMLDivElement) {
+    if (root) {
+        const rootPos = root.getBoundingClientRect()
+
+        return {
+            x: event.clientX - rootPos.x - 16,
+            y: event.clientY - rootPos.y - 8
+        }
+    }
+
+    return {
+        x: event.clientX,
+        y: event.clientY
+    }
+}
+
+function getStyle(target: HTMLElement, styleName: any) {
+    const compStyle = getComputedStyle(target)
+    const style = compStyle[styleName]
+    return style ? style : null
+}
+
+function isIntersecting(
+    min0: number,
+    max0: number,
+    min1: number,
+    max1: number
+) {
+    return max0 >= min1 && min0 <= max1
+}
+
+function getRows(table: HTMLTableElement) {
+    return table.querySelectorAll('tbody tr')
+}
+
+export function applyDraggableRows(
+    table: HTMLTableElement,
+    vm?: any,
+    root?: HTMLDivElement
+) {
+    const tbody = table.querySelector('tbody')!
+
+    let currRow: any = null
+    let dragElem: any = null
+    let oldIndex = 0
+    let newIndex = 0
+    let mouseDownX = 0
+    let mouseDownY = 0
+    let mouseX = 0
+    let mouseY = 0
+    let mouseDrag = false
+    let rowHeight = 0
+    let wasMoved = false
+
+    function bindMouse() {
+        table.addEventListener('mousedown', handleMouseDown)
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+        if (event.button != 0) return true
+
+        const target = getTargetRow(event.target)
+
+        if (target) {
+            table.style.userSelect = 'none'
+            rowHeight = target.cells[0].getBoundingClientRect().height
+
+            currRow = target
+            addDraggableRow(target)
+
+            const coords = getMouseCoords(event, root)
+
+            mouseDownX = coords.x
+            mouseDownY = coords.y
+
+            mouseDrag = true
+            table.classList.add('mouse-drag')
+        }
+    }
+
+    function handleMouseMove() {
+        if (!mouseDrag) return
+
+        const coords = getMouseCoords(event, root)
+
+        mouseX = coords.x
+        mouseY = coords.y
+
+        moveRow(mouseX, mouseY)
+    }
+
+    function handleMouseUp() {
+        if (!mouseDrag) return
+
+        currRow.classList.remove('dl-table__is-dragging')
+        table.removeChild(dragElem)
+
+        if (oldIndex !== newIndex) vm?.emit('row-reorder', oldIndex, newIndex)
+
+        dragElem = null
+        mouseDrag = false
+        table.classList.remove('mouse-drag')
+        wasMoved = false
+
+        table.style.userSelect = 'auto'
+    }
+
+    function swapRow(row: any, index: number) {
+        const currIndex = Array.from(tbody.children).indexOf(currRow)
+        const row1 = currIndex > index ? currRow : row
+        const row2 = currIndex > index ? row : currRow
+
+        newIndex = index + 1
+        wasMoved = oldIndex !== newIndex
+        tbody.insertBefore(row1, row2)
+    }
+
+    function moveRow(x: number, y: number) {
+        dragElem.style.top = y + 'px'
+        dragElem.style.left = x + 'px'
+
+        const dPos = dragElem.getBoundingClientRect()
+        const currStartY = dPos.y
+        const currEndY = currStartY + dPos.height
+        const rows = getRows(table)
+
+        for (let i = 0; i < rows.length; i++) {
+            const rowElem = rows[i] as HTMLTableRowElement
+            const rowSize = rowElem.cells[0].getBoundingClientRect()
+            const rowStartY = rowSize.y
+            const rowEndY = rowStartY + rowSize.height
+
+            if (
+                currRow !== rowElem &&
+                isIntersecting(currStartY, currEndY, rowStartY, rowEndY)
+            ) {
+                if (Math.abs(currStartY - rowStartY) < rowSize.height / 2)
+                    swapRow(rowElem, i)
+            }
+        }
+    }
+
+    function addDraggableRow(target: any) {
+        target.classList.add('dl-table__is-dragging')
+        dragElem = target.cloneNode(true)
+        oldIndex = target.rowIndex
+        newIndex = target.rowIndex
+
+        dragElem.classList.add('dl-table__drag')
+        dragElem.style.height = `${rowHeight}px`
+        for (let i = 0; i < target.children.length; i++) {
+            const oldTD = target.children[i]
+            const newTD = dragElem.children[i]
+            newTD.style.width = getStyle(oldTD, 'width')
+            newTD.style.height = getStyle(oldTD, 'height')
+            newTD.style.padding = getStyle(oldTD, 'padding')
+            newTD.style.margin = getStyle(oldTD, 'margin')
+        }
+
+        table.appendChild(dragElem)
+
+        const tPos = target.getBoundingClientRect()
+        const dPos = dragElem.getBoundingClientRect()
+        dragElem.style.bottom = dPos.y - tPos.y - tPos.height + 'px'
+        dragElem.style.left = '-1px'
+
+        document.dispatchEvent(
+            new MouseEvent('mousemove', {
+                view: window,
+                cancelable: true,
+                bubbles: true
+            })
+        )
+    }
+
+    bindMouse()
+
+    function unsubscribeEvents() {
+        table.removeEventListener('mousedown', handleMouseDown)
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+    }
+
+    return unsubscribeEvents
+}
+
+export function applyDraggableColumns(
+    table: HTMLTableElement,
+    vm?: any,
+    draggableElement?: HTMLDivElement,
+    root?: HTMLDivElement
+) {
+    let colIndex: number | null = null
+    let newColIndex = -1
+    let dragElem: any = null
+    let mouseDownX = 0
+    let mouseDownY = 0
+    let mouseX = 0
+    let mouseY = 0
+    let mouseDrag = false
+    let colHeight = 0
+
+    function bindMouse() {
+        table.addEventListener('mousedown', handleMouseDown)
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+        if (event.button != 0) return true
+
+        const target: any = getTargetCol(event.target as Element)
+
+        if (target) {
+            colHeight = table.getBoundingClientRect().height
+
+            colIndex = target.cellIndex
+            newColIndex = colIndex
+
+            if (vm.props.resizable) {
+                removeColumnBoundaries(target)
+            }
+            addDraggableColumn(colIndex)
+
+            const coords = getMouseCoords(event)
+
+            mouseDownX = coords.x
+            mouseDownY = coords.y
+
+            mouseDrag = true
+            // table.classList.add('mouse-drag')
+        }
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+        if (!mouseDrag) return
+
+        const coords = getMouseCoords(event, root)
+
+        mouseX = coords.x
+        mouseY = coords.y
+
+        moveCol(mouseX, mouseY)
+    }
+
+    function handleMouseUp() {
+        if (!mouseDrag) return
+
+        Array.from(table.rows).forEach((row) => {
+            row.cells[
+                newColIndex === -1 ? colIndex : newColIndex
+            ].classList.remove('dl-table__selected')
+        })
+
+        vm.emit('col-reorder', colIndex, newColIndex)
+        table.removeChild(dragElem)
+
+        dragElem = null
+        mouseDrag = false
+        table.classList.remove('mouse-drag')
+        newColIndex = -1
+    }
+
+    function addDraggableColumn(index: number) {
+        dragElem = draggableElement.cloneNode()
+        dragElem.classList.add('dl-table__drag--col')
+
+        const tableParent = table.parentElement
+        const {
+            bottom: bottomLimit,
+            top: topLimit,
+            height
+        } = tableParent.getBoundingClientRect()
+
+        dragElem.style.height = `${height}px`
+
+        Array.from(table.rows).forEach((row, rowIndex) => {
+            const rowTop = row.getBoundingClientRect().top
+
+            if (rowIndex !== 0 && (rowTop > bottomLimit || rowTop < topLimit)) {
+                return
+            }
+
+            if (row.classList.contains('dl-tr')) {
+                dragElem.appendChild(row.cells[index]?.cloneNode(true) || {})
+
+                row.cells[index].classList.add('dl-table__selected')
+            }
+        })
+
+        table.appendChild(dragElem)
+    }
+
+    function getTargetCol(target: Element) {
+        if (target.classList.contains('empty-col')) return null
+
+        if (target.tagName === 'th') return target
+
+        // if a nested element in <th /> was clicked
+        return target.closest('th')
+    }
+
+    function moveCol(x: number, y: number) {
+        dragElem.style.top = y + 'px'
+        dragElem.style.left = x + 'px'
+
+        const { x: draggedColStartX } = dragElem.getBoundingClientRect()
+        const cols = getFirstRowCells()
+
+        let currentIndex = newColIndex
+
+        for (let i = cols.length - 1; i > newColIndex; i--) {
+            const col = cols[i] as HTMLTableCellElement
+            const { x: colStartX, width: colWidth } =
+                col.getBoundingClientRect()
+
+            const leftToRight = draggedColStartX >= colStartX + colWidth / 2
+
+            if (leftToRight) {
+                currentIndex = i
+                break
+            }
+        }
+
+        if (currentIndex !== newColIndex) {
+            moveAfter(currentIndex)
+            return
+        }
+
+        const start = vm.props.draggable === 'columns' ? 0 : 1
+
+        for (let i = start; i < newColIndex; i++) {
+            const col = cols[i] as HTMLTableCellElement
+            const { x: colStartX, width: colWidth } =
+                col.getBoundingClientRect()
+            const colEndX = colStartX + colWidth
+
+            const rightToLeft = draggedColStartX <= colEndX - colWidth / 2
+
+            if (rightToLeft) {
+                currentIndex = i
+                break
+            }
+        }
+
+        if (currentIndex !== newColIndex) {
+            moveBefore(currentIndex)
+        }
+    }
+
+    const moveBefore = (index: number) => {
+        requestAnimationFrame(() => {
+            Array.from(table.rows).forEach((row) => {
+                row.insertBefore(row.cells[newColIndex], row.cells[index])
+            })
+
+            newColIndex = index
+        })
+    }
+
+    const moveAfter = (index: number) => {
+        requestAnimationFrame(() => {
+            Array.from(table.rows).forEach((row) => {
+                row.insertBefore(row.cells[index], row.cells[newColIndex])
+            })
+
+            newColIndex = index
+        })
+    }
+
+    function getFirstRowCells() {
+        return table.rows[0].cells
+    }
+
+    if (table) {
+        bindMouse()
+    }
+
+    function unsubscribeEvents() {
+        table.removeEventListener('mousedown', handleMouseDown)
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+    }
+
+    return unsubscribeEvents
+}

package/src/utils/escape-key.ts

@@ -0,0 +1,54 @@
+import { isMobileOrTablet } from '.'
+import { isKeyCode } from '../utils/key-composition'
+
+const handlers: Function[] = []
+let escDown: boolean
+
+function onKeydown(evt: KeyboardEvent) {
+    escDown = evt.keyCode === 27
+}
+
+function onBlur() {
+    if (escDown === true) {
+        escDown = false
+    }
+}
+
+function onKeyup(evt: KeyboardEvent) {
+    if (escDown === true) {
+        escDown = false
+
+        if (isKeyCode(evt, 27) === true) {
+            handlers[handlers.length - 1](evt)
+        }
+    }
+}
+
+function update(action: string) {
+    (window as { [key: string]: any })[action]('keydown', onKeydown)
+    ;(window as { [key: string]: any })[action]('blur', onBlur)
+    ;(window as { [key: string]: any })[action]('keyup', onKeyup)
+    escDown = false
+}
+
+export function addEscapeKey(fn: Function) {
+    const isMobile = isMobileOrTablet()
+    if (!isMobile) {
+        handlers.push(fn)
+
+        if (handlers.length === 1) {
+            update('addEventListener')
+        }
+    }
+}
+
+export function removeEscapeKey(fn: Function) {
+    const index = handlers.indexOf(fn)
+    if (index > -1) {
+        handlers.splice(index, 1)
+
+        if (handlers.length === 0) {
+            update('removeEventListener')
+        }
+    }
+}