@dataloop-ai/components 0.13.0

package/src/utils/position-engine.ts

@@ -0,0 +1,381 @@
+import { isMobileOrTablet } from '.'
+import { getScrollbarWidth } from './scroll'
+
+let vpLeft: number | undefined
+let vpTop: number | undefined
+
+export function validatePosition(pos: string) {
+    const parts = pos.split(' ')
+    if (parts.length !== 2) {
+        return false
+    }
+    if (['top', 'center', 'bottom'].includes(parts[0]) !== true) {
+        return false
+    }
+    if (
+        ['left', 'middle', 'right', 'start', 'end'].includes(parts[1]) !== true
+    ) {
+        return false
+    }
+    return true
+}
+
+export function validateOffset(val: number[]) {
+    if (!val) {
+        return true
+    }
+    if (val.length !== 2) {
+        return false
+    }
+    if (typeof val[0] !== 'number' || typeof val[1] !== 'number') {
+        return false
+    }
+    return true
+}
+
+const horizontalPos = {
+    'start#ltr': 'left',
+    'end#ltr': 'right'
+}
+
+const positions = ['left', 'middle', 'right']
+
+positions.forEach((pos) => {
+    (horizontalPos as { [key: string]: string })[`${pos}#ltr`] = pos
+})
+
+interface AnchorProps {
+    top: number
+    left: number
+    right: number
+    bottom: number
+    width: number
+    height: number
+    middle: number
+    center: number
+}
+
+export type ParsedPosition = {
+    vertical: keyof AnchorProps
+    horizontal: keyof AnchorProps
+}
+
+interface TargetProps {
+    top: number
+    center: number
+    bottom: number
+    left: number
+    middle: number
+    right: number
+}
+
+export function parsePosition(pos: string): ParsedPosition {
+    const parts = pos.split(' ')
+    const vertical = parts[0] as keyof AnchorProps
+    const horizontal = (horizontalPos as { [key: string]: keyof AnchorProps })[
+        `${parts[1]}#ltr`
+    ]
+    return {
+        vertical,
+        horizontal
+    }
+}
+
+export function getAnchorProps(el: HTMLElement, offset: number[]) {
+    let { top, left, right, bottom, width, height } = el.getBoundingClientRect()
+
+    if (offset !== void 0) {
+        top -= offset[1]
+        left -= offset[0]
+        bottom += offset[1]
+        right += offset[0]
+
+        width += offset[0]
+        height += offset[1]
+    }
+
+    return {
+        top,
+        left,
+        right,
+        bottom,
+        width,
+        height,
+        middle: left + (right - left) / 2,
+        center: top + (bottom - top) / 2
+    }
+}
+
+export function getTargetProps(el: HTMLElement) {
+    return {
+        top: 0,
+        center: el.offsetHeight / 2,
+        bottom: el.offsetHeight,
+        left: 0,
+        middle: el.offsetWidth / 2,
+        right: el.offsetWidth
+    }
+}
+
+interface PositionConfig {
+    el: HTMLElement
+    offset: number[]
+    anchorEl: HTMLElement
+    anchorOrigin: ParsedPosition
+    selfOrigin: any
+    maxHeight?: string
+    maxWidth?: string
+    absoluteOffset?: any
+    fit?: boolean // fit the size to the content
+    cover?: boolean
+}
+
+interface ElementStyle {
+    maxHeight?: string
+    maxWidth?: string
+    visibility?: string
+    minWidth?: string
+    minHeight?: string
+    top?: string
+    left?: string
+}
+
+// cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, maxHeight, maxWidth }
+export function setPosition(cfg: PositionConfig) {
+    const isMobile = isMobileOrTablet()
+
+    if (isMobile && window.visualViewport !== void 0) {
+        // uses the dl-position-engine CSS class
+
+        const el = document.body.style
+        const { offsetLeft: left, offsetTop: top } = window.visualViewport
+
+        if (left !== vpLeft) {
+            el.setProperty('--dl-pe-left', left + 'px')
+            vpLeft = left
+        }
+        if (top !== vpTop) {
+            el.setProperty('--dl-pe-top', top + 'px')
+            vpTop = top
+        }
+    }
+
+    let anchorProps: AnchorProps
+
+    // scroll position might change
+    // if max-height/-width changes, so we
+    // need to restore it after we calculate
+    // the new positioning
+    const { scrollLeft, scrollTop } = cfg.el!
+
+    if (cfg.absoluteOffset === void 0) {
+        anchorProps = getAnchorProps(cfg.anchorEl, cfg.offset)
+    } else {
+        const { top: anchorTop, left: anchorLeft } =
+            cfg.anchorEl.getBoundingClientRect()
+        const top = anchorTop + cfg.absoluteOffset.top
+        const left = anchorLeft + cfg.absoluteOffset.left
+
+        anchorProps = {
+            top,
+            left,
+            width: 1,
+            height: 1,
+            right: left + 1,
+            center: top,
+            middle: left,
+            bottom: top + 1
+        }
+    }
+
+    let elStyle: ElementStyle = {
+        maxHeight: cfg.maxHeight,
+        maxWidth: cfg.maxWidth,
+        visibility: 'visible'
+    }
+
+    if (cfg.fit === true || cfg.cover === true) {
+        elStyle.minWidth = cfg.maxWidth || anchorProps.width + 'px'
+        elStyle.maxWidth = cfg.maxWidth || anchorProps.width + 'px'
+
+        if (cfg.cover === true) {
+            elStyle.minHeight = anchorProps.height + 'px'
+        }
+    }
+
+    Object.assign(cfg.el!.style, elStyle)
+
+    const targetProps = getTargetProps(cfg.el as HTMLElement)
+    const verticalAnchorOrigin: keyof AnchorProps = cfg.anchorOrigin.vertical
+    const verticalSelfOrigin: keyof TargetProps = cfg.selfOrigin.vertical
+    const horizontalSelfOrigin: keyof TargetProps = cfg.selfOrigin.horizontal
+
+    const props: {
+        top: number
+        left: number
+        maxHeight?: number
+        maxWidth?: number
+    } = {
+        top:
+            anchorProps[verticalAnchorOrigin] - targetProps[verticalSelfOrigin],
+        left:
+            anchorProps[cfg.anchorOrigin.horizontal] -
+            targetProps[horizontalSelfOrigin]
+    }
+
+    applyBoundaries(
+        props,
+        anchorProps,
+        targetProps,
+        cfg.anchorOrigin,
+        cfg.selfOrigin
+    )
+
+    elStyle = {
+        top: props.top + 'px',
+        left: props.left + 'px'
+    }
+
+    if (props.maxHeight !== void 0) {
+        elStyle.maxHeight = props.maxHeight + 'px'
+
+        if (anchorProps.height > props.maxHeight) {
+            elStyle.minHeight = elStyle.maxHeight
+        }
+    }
+
+    if (props.maxWidth !== void 0) {
+        elStyle.maxWidth = props.maxWidth + 'px'
+
+        if (anchorProps.width > props.maxWidth) {
+            elStyle.minWidth = elStyle.maxWidth
+        }
+    }
+
+    Object.assign(cfg.el!.style, elStyle)
+
+    // restore scroll position
+    if (cfg.el!.scrollTop !== scrollTop) {
+        cfg.el!.scrollTop = scrollTop
+    }
+    if (cfg.el!.scrollLeft !== scrollLeft) {
+        cfg.el!.scrollLeft = scrollLeft
+    }
+}
+
+interface Position {
+    top: number
+    left: number
+}
+
+export function setForcedPosition(
+    cfg: Partial<PositionConfig>,
+    position: Position
+) {
+    // scroll position might change
+    // if max-height/-width changes, so we
+    // need to restore it after we calculate
+    // the new positioning
+    const { scrollLeft, scrollTop } = cfg.el!
+
+    const props: {
+        top: number
+        left: number
+    } = position
+
+    const elStyle: ElementStyle = {
+        top: props.top + 'px',
+        left: props.left + 'px'
+    }
+
+    Object.assign(cfg.el!.style, elStyle)
+
+    // restore scroll position
+    if (cfg.el!.scrollTop !== scrollTop) {
+        cfg.el!.scrollTop = scrollTop
+    }
+    if (cfg.el!.scrollLeft !== scrollLeft) {
+        cfg.el!.scrollLeft = scrollLeft
+    }
+}
+
+function applyBoundaries(
+    props: {
+        top: number
+        left: number
+        maxHeight?: number
+        maxWidth?: number
+    },
+    anchorProps: AnchorProps,
+    targetProps: TargetProps,
+    anchorOrigin: ParsedPosition,
+    selfOrigin: ParsedPosition
+) {
+    const currentHeight = targetProps.bottom
+    const currentWidth = targetProps.right
+    const margin = getScrollbarWidth()
+    const innerHeight = window.innerHeight - margin
+    const innerWidth = document.body.clientWidth
+
+    if (props.top < 0 || props.top + currentHeight > innerHeight) {
+        if (selfOrigin.vertical === 'center') {
+            props.top =
+                anchorProps[anchorOrigin.vertical] > innerHeight / 2
+                    ? Math.max(0, innerHeight - currentHeight)
+                    : 0
+            props.maxHeight = Math.min(currentHeight, innerHeight)
+        } else if (anchorProps[anchorOrigin.vertical] > innerHeight / 2) {
+            const anchorY = Math.min(
+                innerHeight,
+                anchorOrigin.vertical === 'center'
+                    ? anchorProps.center
+                    : anchorOrigin.vertical === selfOrigin.vertical
+                    ? anchorProps.bottom
+                    : anchorProps.top
+            )
+            props.maxHeight = Math.min(currentHeight, anchorY)
+            props.top = Math.max(0, anchorY - currentHeight)
+        } else {
+            props.top = Math.max(
+                0,
+                anchorOrigin.vertical === 'center'
+                    ? anchorProps.center
+                    : anchorOrigin.vertical === selfOrigin.vertical
+                    ? anchorProps.top
+                    : anchorProps.bottom
+            )
+            props.maxHeight = Math.min(currentHeight, innerHeight - props.top)
+        }
+    }
+
+    if (props.left < 0 || props.left + currentWidth > innerWidth) {
+        props.maxWidth = Math.min(currentWidth, innerWidth)
+        if (selfOrigin.horizontal === 'middle') {
+            props.left =
+                anchorProps[anchorOrigin.horizontal] > innerWidth / 2
+                    ? Math.max(0, innerWidth - currentWidth)
+                    : 0
+        } else if (anchorProps[anchorOrigin.horizontal] > innerWidth / 2) {
+            const anchorX = Math.min(
+                innerWidth,
+                anchorOrigin.horizontal === 'middle'
+                    ? anchorProps.middle
+                    : anchorOrigin.horizontal === selfOrigin.horizontal
+                    ? anchorProps.right
+                    : anchorProps.left
+            )
+            props.maxWidth = Math.min(currentWidth, anchorX)
+            props.left = Math.max(0, anchorX - props.maxWidth)
+        } else {
+            props.left = Math.max(
+                0,
+                anchorOrigin.horizontal === 'middle'
+                    ? anchorProps.middle
+                    : anchorOrigin.horizontal === selfOrigin.horizontal
+                    ? anchorProps.left
+                    : anchorProps.right
+            )
+            props.maxWidth = Math.min(currentWidth, innerWidth - props.left)
+        }
+    }
+}

package/src/utils/render.ts

@@ -0,0 +1,36 @@
+import { isVue2, h } from 'vue-demi'
+
+export const createElement = (
+    renderFn: Function,
+    el: any,
+    opts: any = {},
+    slots: any
+) => {
+    if (isVue2) {
+        return renderFn(el, opts, slots)
+    }
+
+    return h(el, opts, slots)
+}
+
+export const hSlot = (
+    slots: any,
+    elements: any = [],
+    slotName: string = 'default'
+) => {
+    let renderSlots = isVue2 ? slots[slotName] || [] : slots[slotName]?.() || []
+
+    if (elements.length > 0) renderSlots = renderSlots.concat(elements)
+    if (isVue2) {
+        return renderSlots
+    }
+    return () => renderSlots
+}
+
+export const textSlot = (slots: any, slotName: string = 'default') => {
+    if (isVue2) {
+        return slots[slotName]
+    }
+
+    return slots[slotName]?.()
+}

package/src/utils/ripple.ts

@@ -0,0 +1,7 @@
+import VWave from 'v-wave'
+import { isVue2 } from 'vue-demi'
+
+export const { wave, waveTrigger } = VWave.createLocalWaveDirective(
+    {},
+    isVue2 ? 'vue2' : 'vue3'
+)

package/src/utils/scroll.ts

@@ -0,0 +1,73 @@
+import { css, getElement } from './dom'
+
+const scrollTargets = [
+    null,
+    document,
+    document.body,
+    document.scrollingElement,
+    document.documentElement
+]
+
+export function getScrollTarget(
+    el: HTMLElement | Element,
+    targetEl: string | Element
+) {
+    let target = getElement(targetEl)
+
+    if (target === void 0) {
+        if (el === void 0 || el === null) {
+            return window
+        }
+
+        target = el.closest('.scroll,.scroll-y,.overflow-auto')
+    }
+
+    return scrollTargets.includes(target) ? window : target
+}
+
+export const getScrollWidth = (el: HTMLElement | Window) => {
+    return (
+        el === window ? (document.body as HTMLElement) : (el as HTMLElement)
+    ).scrollWidth
+}
+
+let size: number | undefined
+export const getScrollbarWidth = () => {
+    if (size !== undefined) {
+        return size
+    }
+
+    const inner = document.createElement('p')
+    const outer = document.createElement('div')
+
+    css(inner, {
+        width: '100%',
+        height: '200px'
+    })
+    css(outer, {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        visibility: 'hidden',
+        width: '200px',
+        height: '150px',
+        overflow: 'hidden'
+    })
+
+    outer.appendChild(inner)
+
+    document.body.appendChild(outer)
+
+    const w1 = inner.offsetWidth
+    outer.style.overflow = 'scroll'
+    let w2 = inner.offsetWidth
+
+    if (w1 === w2) {
+        w2 = outer.clientWidth
+    }
+
+    outer.remove()
+    size = w1 - w2
+
+    return size
+}

package/src/utils/selection.ts

@@ -0,0 +1,15 @@
+export function clearSelection() {
+    if (window.getSelection !== void 0) {
+        const selection = window.getSelection()
+        if (!selection) return
+
+        if (selection.empty !== void 0) {
+            selection.empty()
+        } else if (selection.removeAllRanges !== void 0) {
+            selection.removeAllRanges()
+            if ('ontouchstart' in window) {
+                selection.addRange(document.createRange())
+            }
+        }
+    }
+}

package/src/utils/sort.ts

@@ -0,0 +1,7 @@
+export function sortDate(a: string, b: string) {
+    return new Date(a).getTime() - new Date(b).getTime()
+}
+
+export function sortBoolean(a: boolean, b: boolean) {
+    return a && !b ? -1 : !a && b ? 1 : 0
+}

package/src/utils/splitByQuotes.ts

@@ -0,0 +1,32 @@
+export function splitByQuotes(input: string, split: string) {
+    const pattern = '([\\s\\S]*?)(e)?(?:(o)|(c)|(t)|(sp)|$)'
+        .replace('sp', split)
+        .replace('o', '[\\(\\{\\[]')
+        .replace('c', '[\\)\\}\\]]')
+        .replace('t', '[\'"]')
+        .replace('e', '[\\\\]')
+    const r = new RegExp(pattern, 'gi')
+    const stack: string[] = []
+    let buffer: string[] = []
+    const results: string[] = []
+    input.replace(r, ($0, $1, $e, $o, $c, $t, $s, i): any => {
+        if ($e) {
+            buffer.push($1, $s || $o || $c || $t)
+            return
+        } else if ($o) stack.push($o)
+        else if ($c) stack.pop()
+        else if ($t) {
+            if (stack[stack.length - 1] !== $t) stack.push($t)
+            else stack.pop()
+        } else {
+            if ($s ? !stack.length : !$1) {
+                buffer.push($1)
+                results.push(buffer.join(''))
+                buffer = []
+                return
+            }
+        }
+        buffer.push($0)
+    })
+    return results
+}

package/src/utils/string.ts

@@ -0,0 +1,6 @@
+export const textTransform = (text: string) =>
+    text
+        .toLowerCase()
+        .replace(/(^\w{1})|(\s+\w{1})/g, (letter: string) =>
+            letter.toUpperCase()
+        )

package/src/utils/teleport.ts

@@ -0,0 +1,14 @@
+import * as VueDemi from 'vue-demi'
+// @ts-ignore
+import Teleport2 from 'vue2-teleport'
+
+let DlTeleport: any
+
+if (VueDemi.isVue2) {
+    DlTeleport = Teleport2
+} else if (VueDemi.isVue3) {
+    const v: any = VueDemi
+    DlTeleport = v.Teleport
+}
+
+export default DlTeleport

package/src/utils/theme.ts

@@ -0,0 +1,2 @@
+export const getThemeModeAttr = (isDark: boolean): string =>
+    isDark ? 'dark-mode' : ''

package/src/utils/vm.ts

@@ -0,0 +1,16 @@
+// used directly by docs too
+export function getParentVm(vm: any) {
+    if (Object(vm?.$parent) === vm?.$parent) {
+        return vm.$parent
+    }
+
+    vm = vm.$?.parent
+
+    while (Object(vm) === vm) {
+        if (Object(vm.proxy) === vm.proxy) {
+            return vm.proxy
+        }
+
+        vm = vm?.parent
+    }
+}

package/storybook.js

@@ -0,0 +1,8 @@
+const express = require('express')
+const app = express()
+const path = require('path')
+const PORT = 3000
+
+app.use(express.static(`${path.join(__dirname)}/storybook-static`))
+
+app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`))

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "useDefineForClassFields": true,
+        "moduleResolution": "node",
+        "strict": true,
+        "jsx": "preserve",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "lib": ["esnext", "dom"],
+        "skipLibCheck": true,
+        "paths": {
+            "@/*": ["./src/components"]
+        },
+        "types": [
+            "vite/client",
+            "@types/jest",
+            "@types/lodash",
+            "@types/node"
+        ],
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "strictPropertyInitialization": false,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "alwaysStrict": true,
+        "strictBindCallApply": true,
+        "strictNullChecks": false,
+        "allowJs": true,
+        "importHelpers": true,
+        "declaration": true,
+        "declarationMap": true,
+    },
+    "vueCompilerOptions": {
+        "target": 2.7,
+        "experimentalDisableTemplateSupport": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "exclude": ["node_modules", "**/*.stories.ts"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/types.ts

@@ -0,0 +1 @@
+export * from './src/types'

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    optimizeDeps: {
+        exclude: ['vue-demi']
+    },
+    define: {
+        'process.env': process.env
+    }
+})