@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/essential/DlEllipsis/DlEllipsis.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="dl-ellipsis">
+        <span
+            ref="dlEllipsisRef"
+            class="dl-ellipsis__left"
+        >
+            <slot
+                v-if="hasDefaultSlot"
+                name="default"
+            />
+            <span v-else>{{ leftText }}</span>
+        </span>
+        <span
+            v-if="rightText"
+            class="dl-ellipsis__right"
+        >
+            {{ rightText }}
+        </span>
+        <dl-tooltip
+            v-if="shouldShowTooltip"
+            :max-width="'max-content'"
+            :self="tooltipPosition"
+            :anchor="tooltipPosition"
+            :offset="tooltipOffset"
+        >
+            <slot
+                v-if="hasDefaultSlot"
+                name="default"
+            />
+            <span v-else>{{ fullText }}</span>
+        </dl-tooltip>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import { DlTooltip } from '../../shared'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
+
+export default defineComponent({
+    name: 'DlEllipsis',
+    components: {
+        DlTooltip
+    },
+    props: {
+        /**
+         * Text to be displayed
+         */
+        text: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Allows to split the text in two parts
+         */
+        split: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Position of the split in the text, % of the text length
+         */
+        splitPosition: {
+            type: Number,
+            default: 0.5,
+            validator: (value: number) => value >= 0 && value <= 1
+        },
+        /**
+         * Tooltip to be displayed when the text is truncated
+         */
+        tooltip: {
+            type: Boolean,
+            default: true
+        },
+        tooltipPosition: {
+            type: String,
+            default: 'top middle'
+        },
+        tooltipOffset: {
+            type: Array,
+            default: () => [0, 25]
+        }
+    },
+    // TODO: fix type issue here
+    setup(props: any, { slots }: any) {
+        const dlEllipsisRef = ref(null)
+        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
+
+        const hasDefaultSlot = computed(() => !!slots.default)
+        const splitIndex = computed(() => {
+            if (!props.text.length) return null
+            return props.split
+                ? Math.round(props.text.length * props.splitPosition)
+                : props.text.length
+        })
+        const leftText = computed(() => {
+            if (splitIndex.value !== null) {
+                return props.text.slice(0, splitIndex.value)
+            }
+            return ''
+        })
+        const rightText = computed(() => {
+            if (splitIndex.value !== null) {
+                return props.text.slice(splitIndex.value)
+            }
+            return ''
+        })
+        const shouldShowTooltip = computed(
+            () => hasEllipsis.value && props.tooltip
+        )
+        const fullText = computed(() => props.text)
+
+        return {
+            hasDefaultSlot,
+            leftText,
+            rightText,
+            shouldShowTooltip,
+            fullText,
+            dlEllipsisRef
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-ellipsis {
+    display: flex;
+    overflow: hidden;
+
+    &__left {
+        flex: 0 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__right {
+        flex: 1 0 auto;
+        overflow: hidden;
+    }
+}
+</style>

package/src/components/essential/DlIcon/DlIcon.vue

@@ -22,7 +22,7 @@
     <div
         v-else
         :id="uuid"
-        style="display: inline"
+        :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -90,7 +90,7 @@ export default defineComponent({
             return {
                 '--dl-icon-font-size': `${this.size}`,
                 '--dl-icon-color': this.color
-                    ? // needed for now until the swap of DLBTN in OA
+                    ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
                           this.color === 'secondary'
                               ? 'q-color-secondary'
@@ -101,7 +101,7 @@ export default defineComponent({
             }
         },
         inlineStyles(): Record<string, string> {
-            return { display: this.inline ? 'inline' : 'flex' }
+            return { display: this.inline ? 'inline-flex' : 'flex' }
         },
         // needed to allow external source of icons that do not use class based
         externalIcon(): boolean {
@@ -144,7 +144,7 @@ export default defineComponent({
                 try {
                     svgElement.src = this.svgSource
                         ? `${this.svgSource}/${this.icon}.svg`
-                        : require(`@dataloop-ai/icons/assets/${this.icon}.svg`)
+                        : `https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/${this.icon}.svg`
                 } catch (e) {
                     reject(e)
                 }
@@ -156,7 +156,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-icon {
-    display: inline-block;
+    display: inline-flex;
     color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
 }

package/src/components/essential/DlLabel/DlLabel.vue

@@ -0,0 +1,190 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-label"
+        :style="styles"
+        @mouseenter="mouseOver = true"
+        @mouseleave="mouseOver = false"
+    >
+        <div class="dl-label__prefix">
+            <slot name="prefix">
+                <div
+                    v-if="labelColor"
+                    class="dl-label__line"
+                />
+            </slot>
+        </div>
+        <div class="dl-label__content">
+            <span v-if="prefix">{{ prefixPreview }}</span>
+            <dl-ellipsis
+                v-if="text"
+                class="dl-label__text"
+                :class="!suffix && fluid ? 'dl-label__fluid' : ''"
+                :text="text"
+            />
+            <dl-ellipsis
+                v-else
+                class="dl-label__text"
+            >
+                <slot name="default" />
+            </dl-ellipsis>
+            <span
+                v-if="suffix"
+                :class="fluid ? 'dl-label__fluid' : ''"
+            >
+                {{ suffixPreview }}</span>
+            <div class="dl-label__suffix">
+                <div class="dl-label__suffix-slot">
+                    <slot
+                        v-if="mouseOver"
+                        name="actions"
+                    />
+                </div>
+                <dl-icon
+                    v-if="hint"
+                    class="dl-label__suffix-icon"
+                    icon="icon-dl-info"
+                >
+                    <dl-tooltip>{{ hint }}</dl-tooltip>
+                </dl-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { DlTooltip } from '../../shared'
+// todo: this will cause issues
+import { DlIcon, DlEllipsis } from '../../essential'
+import { computed, defineComponent, ref, toRef, toRefs } from 'vue-demi'
+import { getColor } from '../../../utils'
+
+export default defineComponent({
+    name: 'DlLabel',
+    components: { DlEllipsis, DlIcon, DlTooltip },
+    props: {
+        /**
+         * Text to be displayed
+         */
+        text: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Prefix to be displayed
+         */
+        prefix: {
+            type: String,
+            default: null
+        },
+        /**
+         * Suffix to be displayed
+         */
+        suffix: {
+            type: String,
+            default: null
+        },
+        /**
+         * Color of the left side line
+         */
+        labelColor: {
+            type: String,
+            default: null
+        },
+        /**
+         * Text to be displayed inside the info tooltip
+         */
+        hint: {
+            type: String,
+            default: null
+        },
+        /**
+         * Label text color
+         */
+        color: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        /**
+         * Will fill the container size its given
+         */
+        fluid: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit, slots }) {
+        const mouseOver = ref(false)
+        const { labelColor, color, prefix, suffix } = toRefs(props)
+
+        const styles = computed<Record<string, any>>(() => {
+            return {
+                '--dl-label-color': getColor(labelColor.value),
+                '--dl-label-text-color': getColor(color.value)
+            }
+        })
+
+        const hasActions = computed(() => {
+            return !!slots['actions']
+        })
+
+        const prefixPreview = computed(() => {
+            return prefix.value?.trim() ?? ''
+        })
+        const suffixPreview = computed(() => {
+            return suffix.value?.trim() ?? ''
+        })
+
+        return {
+            uuid: `dl-text-holder-${v4()}`,
+            mouseOver,
+            styles,
+            hasActions,
+            prefixPreview,
+            suffixPreview
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-label {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    position: relative;
+    &__line {
+        border-radius: 2px;
+        background-color: var(--dl-label-color);
+        width: 2px;
+        height: 100%;
+        margin-right: 5px;
+    }
+    &__suffix {
+        height: 100%;
+        margin-left: 5px;
+        display: flex;
+        align-items: center;
+        &-icon {
+            cursor: pointer;
+        }
+    }
+    &__content {
+        color: var(--dl-label-text-color);
+        display: flex;
+        width: 95%;
+    }
+    &__text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__fluid {
+        flex-grow: 100;
+        max-width: 100%;
+    }
+}
+</style>

package/src/components/essential/DlLabel/index.ts

@@ -0,0 +1,2 @@
+import DlLabel from './DlLabel.vue'
+export { DlLabel }

package/src/components/essential/DlList/DlList.vue

@@ -1,6 +1,6 @@
 <template>
     <component
-        :is="tag"
+        :is="type"
         :id="uuid"
         :class="classes"
     >
@@ -18,7 +18,7 @@ export default defineComponent({
         separator: Boolean,
         padding: Boolean,
         clickable: Boolean,
-        tag: {
+        type: {
             type: String,
             default: 'div'
         }
@@ -43,7 +43,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-list {
-    padding: 5px 0;
+    padding: 6px 0;
     background-color: var(--dl-color-panel-background);
     &--bordered {
         border: 1px solid var(--dl-color-separator);

package/src/components/essential/DlMenu/DlMenu.vue

@@ -125,7 +125,7 @@ export default defineComponent({
 
         scrollTarget: {
             type: String as PropType<Element | string>,
-            default: void 0
+            default: null
         },
 
         touchPosition: Boolean,
@@ -145,6 +145,10 @@ export default defineComponent({
         arrowNavItems: {
             type: [String, Array, Object],
             default: () => [] as any[]
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-menu)'
         }
     },
 
@@ -263,7 +267,7 @@ export default defineComponent({
             showPortal()
             configureScrollTarget()
 
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             const offsetOnShow = setOffsetOnShow(evt as TouchEvent, {
                 contextMenu: props.contextMenu,
@@ -274,7 +278,7 @@ export default defineComponent({
 
             absoluteOffset = offsetOnShow as Record<any, any> | undefined
 
-            if (unwatchPosition === void 0) {
+            if (!unwatchPosition) {
                 unwatchPosition = watch(() => screen, updatePosition, {
                     deep: true
                 })
@@ -287,18 +291,21 @@ export default defineComponent({
                 { continuous: true }
             )
 
-            registerTimeout(() => {
-                // required in order to avoid the "double-tap needed" issue
-                avoidAutoClose = avoidAutoCloseFn(isMobile.value, {
-                    avoidAutoClose,
-                    autoClose: props.autoClose,
-                    innerRef
-                })
+            registerTimeout(
+                () => {
+                    // required in order to avoid the "double-tap needed" issue
+                    avoidAutoClose = avoidAutoCloseFn(isMobile.value, {
+                        avoidAutoClose,
+                        autoClose: props.autoClose,
+                        innerRef
+                    })
 
-                updatePosition()
-                showPortal(true) // done showing portal
-                emit('show', evt)
-            }, props.transitionDuration)
+                    updatePosition()
+                    showPortal(true) // done showing portal
+                    emit('show', evt)
+                },
+                isVue2 ? 5 : props.transitionDuration
+            )
         }
 
         function handleHide(evt: ClickOutsideEvent) {
@@ -310,14 +317,17 @@ export default defineComponent({
             anchorCleanup(true)
             refocusTarget = refocusTargetFn(evt, refocusTarget as HTMLElement)
 
-            registerTimeout(() => {
-                hidePortal(true) // done hiding, now destroy
-                emit('hide', evt)
-            }, props.transitionDuration)
+            registerTimeout(
+                () => {
+                    hidePortal(true) // done hiding, now destroy
+                    emit('hide', evt)
+                },
+                isVue2 ? 5 : props.transitionDuration
+            )
         }
 
         function anchorCleanup(hiding: boolean) {
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             unwatchPosition = updateUnwatchPosition(unwatchPosition)
 
@@ -333,7 +343,7 @@ export default defineComponent({
         }
 
         function configureScrollTarget() {
-            if (anchorEl.value !== null || props.scrollTarget !== void 0) {
+            if (anchorEl.value !== null || props.scrollTarget) {
                 (localScrollTarget as Ref<any>).value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget
@@ -432,7 +442,13 @@ export default defineComponent({
             portalEl: isVue2 ? '[data-test-id="portal"]' : portalEl,
             portalIsActive,
             classes: 'dl-menu dl-position-engine scroll' + classes.value,
-            styles: [attrs.style, transitionStyle.value] as any,
+            styles: [
+                attrs.style,
+                transitionStyle.value,
+                {
+                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)'
+                }
+            ] as any,
             selectedItem,
             highlightedIndex
         }
@@ -452,9 +468,12 @@ export default defineComponent({
     border-radius: 2px;
     overflow-y: auto;
     overflow-x: hidden;
+    &::-webkit-scrollbar {
+        width: var(--dl-menu-scrollbar-width, 5px);
+    }
     outline: 0;
     max-height: 65vh;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--menu-z-index);
 
     &--square {
         border-radius: 0;

package/src/components/essential/DlMenu/utils.ts

@@ -8,6 +8,7 @@ import {
     removeClickOutside,
     ClickOutsideEvent
 } from '../../../utils/click-outside'
+import { isNumber } from 'lodash'
 
 interface ClickOutsideProps {
     persistent: boolean
@@ -62,12 +63,12 @@ export const setOffsetOnShow = (
     evt: TouchEvent,
     { contextMenu, touchPosition, anchorEl, absoluteOffset }: OffsetOnShowProps
 ) => {
-    if (evt !== void 0 && (touchPosition || contextMenu)) {
+    if (evt && (touchPosition || contextMenu)) {
         const pos = position(evt)
 
-        if (pos.top !== void 0 && pos.left !== void 0 && anchorEl.value) {
+        if (isNumber(pos.top) && isNumber(pos.left) && anchorEl.value) {
             const { top, left } = anchorEl.value.getBoundingClientRect()
-            if (top !== void 0 && left !== void 0) {
+            if (isNumber(top) && isNumber(left)) {
                 return {
                     left: pos.left - left,
                     top: pos.top - top
@@ -99,11 +100,11 @@ export const avoidAutoCloseFn = (
 export const updateUnwatchPosition = (
     unwatchPosition: Function | undefined
 ): undefined => {
-    if (unwatchPosition !== void 0) {
+    if (unwatchPosition) {
         unwatchPosition()
     }
 
-    return void 0
+    return null
 }
 
 export const refocusTargetFn = (
@@ -113,9 +114,9 @@ export const refocusTargetFn = (
     if (
         refocusTarget !== null &&
         // menu was hidden from code or ESC plugin
-        (evt === void 0 ||
+        (evt ||
             // menu was not closed from a mouse or touch clickOutside
-            evt.dlClickOutside !== true)
+            evt?.dlClickOutside !== true)
     ) {
         (refocusTarget as HTMLElement).focus()
     }

package/src/components/essential/DlPageLayout/DlPageLayout.vue

@@ -0,0 +1,90 @@
+<template>
+    <div
+        class="dl-page-layout"
+        :style="cssVars"
+    >
+        <div class="dl-page-layout__main-head">
+            <slot name="header" />
+        </div>
+        <div class="dl-page-layout__left-drawer">
+            <slot name="leftDrawer" />
+        </div>
+        <div class="dl-page-layout__right-drawer">
+            <slot name="rightDrawer" />
+        </div>
+        <div class="dl-page-layout__content">
+            <slot name="mainContent" />
+        </div>
+        <div class="dl-page-layout__footer">
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue-demi'
+export default defineComponent({
+    name: 'DlPageLayout',
+    props: {
+        template: {
+            type: String,
+            default: '"h h h" "l p r" "f f f"'
+        }
+    },
+    setup(props) {
+        const cssVars = computed(() => {
+            return {
+                '--dl-page-layout-template': props.template
+            }
+        })
+        return {
+            cssVars
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-page-layout {
+    height: 100vh;
+    width: 100%;
+    display: grid;
+    grid-template-areas: var(--dl-page-layout-template);
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: auto 1fr auto;
+    box-shadow: 1px 1px 1px var(--dl-color-separator);
+
+    &__main-head {
+        grid-area: h;
+        box-shadow: 1px 1px 1px var(--dl-color-separator);
+    }
+
+    &__content {
+        grid-area: p;
+        overflow-y: scroll;
+        box-shadow: 1px 1px 1px var(--dl-color-separator);
+    }
+
+    &__left-drawer {
+        grid-area: l;
+        overflow: auto;
+        box-shadow: 1px 1px 1px var(--dl-color-separator);
+    }
+
+    &__right-drawer {
+        grid-area: r;
+        overflow: auto;
+        box-shadow: 1px 1px 1px var(--dl-color-separator);
+    }
+
+    &__sidebar-content {
+        position: absolute;
+        margin-left: 0;
+    }
+
+    &__footer {
+        grid-area: f;
+        box-shadow: 1px 1px 1px var(--dl-color-separator);
+    }
+}
+</style>

package/src/components/essential/DlPageLayout/index.ts

@@ -0,0 +1,2 @@
+import DlPageLayout from './DlPageLayout.vue'
+export { DlPageLayout }

package/src/components/essential/DlProgressBar/DlProgressBar.vue

@@ -87,7 +87,7 @@ export default defineComponent({
         },
         height: {
             type: String,
-            default: '4px'
+            default: '5px'
         },
         summary: {
             type: String,