@dataloop-ai/components 0.13.0

package/src/components/DlTooltip.vue

@@ -0,0 +1,456 @@
+<template>
+    <dl-teleport
+        v-if="portalIsActive"
+        :to="portalEl"
+    >
+        <transition
+            name="fade"
+            appear
+        >
+            <div
+                v-if="showing"
+                :id="uuid"
+                ref="innerRef"
+                tabIndex="-1"
+                :class="classes"
+                class="capitalize"
+                :style="styles"
+            >
+                <slot />
+            </div>
+        </transition>
+    </dl-teleport>
+</template>
+<script lang="ts">
+import {
+    defineComponent,
+    getCurrentInstance,
+    ref,
+    computed,
+    watch,
+    onBeforeUnmount,
+    isVue2,
+    Ref,
+    PropType,
+    onMounted
+} from 'vue-demi'
+import useAnchor, { useAnchorProps } from '../hooks/use-anchor'
+import useModelToggle, { AnchorEvent } from '../hooks/use-model-toggle'
+import usePortal from '../hooks/use-portal'
+import useScrollTarget from '../hooks/use-scroll-target'
+import useTick from '../hooks/use-tick'
+import useTimeout from '../hooks/use-timeout'
+import useTransition, { useTransitionProps } from '../hooks/use-transition'
+import {
+    addEvt,
+    cleanEvt,
+    clearSelection,
+    getColor,
+    isMobileOrTablet
+} from '../utils'
+import {
+    parsePosition,
+    setPosition,
+    validateOffset,
+    validatePosition
+} from '../utils/position-engine'
+import { getScrollTarget } from '../utils/scroll'
+import useWindowSize from '../hooks/use-window-size'
+import {
+    removeClickOutside,
+    ClickOutsideEvent,
+    addClickOutside
+} from '../utils/click-outside'
+import DlTeleport from '../utils/teleport'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlTooltip',
+    components: {
+        DlTeleport
+    },
+    inheritAttrs: false,
+    props: {
+        ...useAnchorProps,
+        ...useTransitionProps,
+        color: {
+            type: String,
+            required: false,
+            default: 'dl-color-tooltip-text'
+        },
+        backgroundColor: {
+            type: String,
+            required: false,
+            default: 'dl-color-tooltip-background'
+        },
+        maxHeight: {
+            type: String,
+            default: null
+        },
+        maxWidth: {
+            type: String,
+            default: '240px'
+        },
+        anchor: {
+            type: String,
+            default: 'bottom middle',
+            validator: validatePosition
+        },
+        self: {
+            type: String,
+            default: 'top middle',
+            validator: validatePosition
+        },
+        capitalized: {
+            type: Boolean,
+            default: false
+        },
+        offset: {
+            type: Array,
+            default: () => [9, 9],
+            validator: validateOffset
+        },
+        scrollTarget: {
+            type: String as PropType<Element | string>,
+            default: void 0
+        },
+        delay: {
+            type: Number,
+            default: 500
+        },
+        hideDelay: {
+            type: Number,
+            default: 0
+        },
+        textAlignment: {
+            type: String,
+            default: 'left',
+            validator: (v: string) =>
+                ['left', 'right', 'justify', 'center'].includes(v)
+        }
+    },
+    setup(props, { emit, attrs }) {
+        let unwatchPosition: Function | undefined
+
+        // @ts-ignore
+        let observer: MutationObserver | undefined
+
+        const vm = getCurrentInstance()
+
+        const innerRef = ref(null)
+        const showing = ref(false)
+
+        const anchorOrigin = computed(() => parsePosition(props.anchor))
+        const selfOrigin = computed(() => parsePosition(props.self))
+
+        const { registerTick, removeTick } = useTick()
+        const { registerTimeout, removeTimeout } = useTimeout()
+        const { transitionStyle } = useTransition(props, showing)
+        const { width, height } = useWindowSize()
+        const {
+            localScrollTarget,
+            changeScrollEvent,
+            unconfigureScrollTarget
+        } = useScrollTarget(props, configureScrollTarget)
+
+        const { anchorEl, canShow, anchorEvents } = useAnchor({
+            configureAnchorEl
+        })
+
+        const { show, hide } = useModelToggle({
+            showing,
+            canShow,
+            handleShow,
+            handleHide,
+            processOnMount: true
+        })
+
+        Object.assign(anchorEvents, { delayShow, delayHide })
+
+        const { showPortal, hidePortal, portalIsActive, portalEl } = usePortal(
+            vm,
+            innerRef
+        )
+
+        const isMobile = computed(() => isMobileOrTablet())
+        // if we're on mobile, let's improve the experience
+        // by closing it when user taps outside of it
+        if (isMobile.value === true) {
+            const clickOutsideProps = {
+                anchorEl,
+                innerRef,
+                onClickOutside(e: AnchorEvent) {
+                    hide(e)
+                    return true
+                }
+            }
+
+            const hasClickOutside = computed(() => showing.value === true)
+
+            watch(hasClickOutside, (val) => {
+                const fn = val === true ? addClickOutside : removeClickOutside
+                fn(clickOutsideProps)
+            })
+
+            onBeforeUnmount(() => {
+                removeClickOutside(clickOutsideProps)
+            })
+        }
+
+        function handleShow(evt: MouseEvent | TouchEvent) {
+            removeTick()
+            removeTimeout()
+
+            showPortal()
+
+            registerTick(() => {
+                updatePosition()
+                configureScrollTarget()
+            })
+
+            if (unwatchPosition === void 0) {
+                unwatchPosition = watch(
+                    () =>
+                        width +
+                        '|' +
+                        height +
+                        '|' +
+                        props.self +
+                        '|' +
+                        props.anchor,
+                    updatePosition
+                )
+            }
+
+            registerTimeout(() => {
+                showPortal(true) // done showing portal
+                emit('show', evt)
+            }, props.transitionDuration)
+        }
+
+        function handleHide(evt: ClickOutsideEvent) {
+            removeTick()
+            removeTimeout()
+            hidePortal()
+
+            anchorCleanup()
+
+            registerTimeout(() => {
+                hidePortal(true) // done hiding, now destroy
+                emit('hide', evt)
+            }, props.transitionDuration)
+        }
+
+        function anchorCleanup() {
+            if (observer !== void 0) {
+                observer.disconnect()
+                observer = void 0
+            }
+
+            if (unwatchPosition !== void 0) {
+                unwatchPosition()
+                unwatchPosition = void 0
+            }
+
+            unconfigureScrollTarget()
+            cleanEvt(anchorEvents, 'tooltipTemp')
+        }
+
+        function updatePosition() {
+            const el = innerRef.value
+
+            if (anchorEl.value === null || !el) {
+                return
+            }
+
+            setPosition({
+                el,
+                offset: props.offset as number[],
+                anchorEl: anchorEl.value as HTMLElement,
+                anchorOrigin: anchorOrigin.value,
+                selfOrigin: selfOrigin.value,
+                maxWidth: props.maxWidth,
+                maxHeight: props.maxHeight
+            })
+        }
+
+        function delayShow(evt: AnchorEvent) {
+            if (isMobile.value === true) {
+                clearSelection()
+                document.body.classList.add('non-selectable')
+
+                const target = anchorEl.value
+                const evts = [
+                    'touchmove',
+                    'touchcancel',
+                    'touchend',
+                    'click'
+                ].map((e) => [target, e, 'delayHide', 'passiveCapture'])
+
+                addEvt(anchorEvents, 'tooltipTemp', evts)
+            }
+
+            registerTimeout(() => {
+                show(evt)
+            }, props.delay)
+        }
+
+        function delayHide(evt: AnchorEvent) {
+            removeTimeout()
+
+            if (isMobile.value === true) {
+                cleanEvt(anchorEvents, 'tooltipTemp')
+                clearSelection()
+                // delay needed otherwise selection still occurs
+                setTimeout(() => {
+                    document.body.classList.remove('non-selectable')
+                }, 10)
+            }
+
+            registerTimeout(() => {
+                hide(evt)
+            }, props.hideDelay)
+        }
+
+        function configureAnchorEl() {
+            if (props.noParentEvent === true || anchorEl.value === null) {
+                return
+            }
+
+            const evts =
+                isMobile.value === true
+                    ? [[anchorEl.value, 'touchstart', 'delayShow', 'passive']]
+                    : [
+                          [
+                              anchorEl.value,
+                              'mouseenter',
+                              'delayShow',
+                              'passive'
+                          ],
+                          [anchorEl.value, 'mouseleave', 'delayHide', 'passive']
+                      ]
+
+            addEvt(anchorEvents, 'anchor', evts)
+        }
+
+        function configureScrollTarget() {
+            if (anchorEl.value !== null || props.scrollTarget !== void 0) {
+                (localScrollTarget as Ref<any>).value = getScrollTarget(
+                    anchorEl.value as HTMLElement,
+                    props.scrollTarget as Element
+                )
+                const fn = props.noParentEvent === true ? updatePosition : hide
+
+                changeScrollEvent((localScrollTarget as Ref<any>).value, fn)
+            }
+        }
+
+        function handleRouteChange(e: any) {
+            if (showing.value === true) {
+                hide(e as AnchorEvent)
+            }
+        }
+
+        onMounted(() => {
+            window.addEventListener('hashchange', handleRouteChange)
+        })
+
+        onBeforeUnmount(() => {
+            anchorCleanup()
+            window.removeEventListener('hashchange', handleRouteChange)
+        })
+
+        // expose public methods
+        Object.assign(vm!.proxy, { updatePosition })
+
+        return {
+            uuid: `dl-tooltip-${v4()}`,
+            portalIsActive,
+            classes: ['dl-tooltip dl-position-engine', attrs.class],
+            showing,
+            innerRef,
+            portalEl: isVue2 ? 'body' : portalEl,
+            styles: [
+                attrs.style,
+                transitionStyle.value,
+                {
+                    '--dl-tooltip-color': getColor(
+                        props.color,
+                        'dl-color-tooltip-text'
+                    ),
+                    '--dl-tooltip-background': getColor(
+                        props.backgroundColor,
+                        'dl-color-tooltip-background'
+                    ),
+                    '--dl-tooltip-text-align': props.textAlignment,
+                    '--dl-tooltip-text-transform': props.capitalized
+                        ? 'capitalize'
+                        : 'none'
+                }
+            ] as any
+        }
+    },
+    template: 'dl-tooltip'
+})
+</script>
+
+<style lang="scss">
+.dl-tooltip {
+    z-index: var(--dl-z-index-tooltip);
+    position: fixed !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 16px;
+    padding: 2px 5px;
+    font-size: var(--dl-font-size-small);
+    line-height: 16px;
+    color: var(--dl-tooltip-color);
+    background: var(--dl-tooltip-background);
+    border-radius: 2px;
+    text-transform: none;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    text-align: var(--dl-tooltip-text-align);
+    white-space: break-spaces;
+    word-break: break-word;
+    pointer-events: none;
+}
+
+.dl-tooltip {
+    z-index: 9000;
+    position: fixed !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 2px 5px;
+}
+
+.capitalize::first-letter {
+    text-transform: var(--dl-tooltip-text-transform);
+}
+
+.dl-position-engine {
+    margin-top: var(--dl-pe-top, 0) !important;
+    margin-left: var(--dl-pe-left, 0) !important;
+    will-change: auto;
+    visibility: collapse; // needed for animation - is removed on first positioning;
+}
+
+.fade-enter,
+.fade-enter-active {
+    animation: fade-in var(--dl-transition-duration);
+}
+
+.fade-leave-active,
+.fade-leave-to {
+    animation: fade-in var(--dl-transition-duration) reverse;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+</style>

package/src/components/DlTrend.vue

@@ -0,0 +1,97 @@
+<template>
+    <div
+        :id="uuid"
+        class="trend-wrapper"
+    >
+        <span
+            v-if="withArrow"
+            class="direction-arrow"
+            :class="{
+                down: isDown
+            }"
+            :style="{ '--trend-triangle-color': computedColor }"
+        />
+        <span class="value">
+            {{ computedValue }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, PropType } from 'vue-demi'
+import { getColor } from '../utils'
+
+const colorValidator = (val: string | null) =>
+    val === 'negative' || val === 'positive' || val === null
+
+export default defineComponent({
+    name: 'DlTrend',
+    props: {
+        value: {
+            type: [Number, String],
+            required: true
+        },
+        direction: {
+            type: String,
+            default: 'up',
+            validator: (val) => val === 'up' || val === 'down'
+        },
+        color: {
+            type: String as PropType<'negative' | 'positive' | null>,
+            default: null,
+            validator: colorValidator
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-trend-${v4()}`
+        }
+    },
+    computed: {
+        computedValue(): string {
+            if (typeof this.value === 'number') {
+                return `${this.value}%`
+            }
+            return this.value
+        },
+        isUp(): boolean {
+            return this.direction === 'up'
+        },
+        isDown(): boolean {
+            return this.direction === 'down'
+        },
+        computedColor(): string {
+            if (this.color !== null || !colorValidator(this.color)) {
+                return getColor(`dl-color-${this.color}`)
+            }
+            return getColor(`dl-color-${this.isUp ? 'positive' : 'negative'}`)
+        },
+        withArrow(): boolean {
+            return !(this.value === 0 || this.value === '0')
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.trend-wrapper {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+}
+.value {
+    font-size: var(--dl-font-size-body);
+    line-height: 1;
+    padding: 2px 0;
+    color: var(--dl-color-darker);
+}
+.direction-arrow {
+    width: 8px;
+    height: 8px;
+    clip-path: polygon(50% 5%, 4% 80%, 96% 80%);
+    background-color: var(--trend-triangle-color);
+    &.down {
+        transform: rotate(180deg);
+    }
+}
+</style>

package/src/components/DlTypography.vue

@@ -0,0 +1,87 @@
+<template>
+    <component
+        :is="variant"
+        :id="uuid"
+        :class="classes"
+        :style="styles"
+    >
+        <slot />
+    </component>
+</template>
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, PropType } from 'vue-demi'
+import { getColor } from '../utils'
+
+type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
+
+const sizes = ['h1', 'h2', 'h3', 'h4', 'body']
+
+export default defineComponent({
+    name: 'DlTypography',
+    props: {
+        variant: {
+            type: String as PropType<Variant>,
+            required: false,
+            default: 'p'
+        },
+        size: {
+            type: String,
+            default: 'body'
+        },
+        uppercase: Boolean,
+        bold: Boolean,
+        color: {
+            type: String,
+            default: 'dl-color-darker'
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-typography-${v4()}`
+        }
+    },
+    computed: {
+        styles(): Record<string, string | number> {
+            const styles: Record<string, string | number> = {
+                color: getColor(this.color as string, 'dl-color-darker'),
+                textTransform: this.uppercase ? 'uppercase' : 'none',
+                fontWeight: this.bold ? 'bold' : 400
+            }
+
+            if (!sizes.includes(this.size)) {
+                styles.fontSize = this.size as string
+            }
+
+            return styles
+        },
+        classes(): string[] {
+            return [`dl-typography dl-typography--${this.size}`]
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.dl-typography {
+    margin: 0;
+    padding: 0;
+    &--h1 {
+        font-size: var(--dl-font-size-h1);
+    }
+    &--h2 {
+        font-size: var(--dl-font-size-h2);
+    }
+    &--h3 {
+        font-size: var(--dl-font-size-h3);
+    }
+    &--h4 {
+        font-size: var(--dl-font-size-h4);
+    }
+    &--body {
+        font-size: var(--dl-font-size-body);
+    }
+    &--small {
+        font-size: var(--dl-font-size-small);
+    }
+}
+</style>