@dataloop-ai/components 0.17.134 → 0.18.1

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

@@ -0,0 +1,174 @@
+<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"
+                :text="text"
+            />
+            <dl-ellipsis
+                v-else
+                class="dl-label__text"
+            >
+                <slot name="default" />
+            </dl-ellipsis>
+            <span v-if="suffix"> {{ 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'
+        }
+    },
+    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: 100%;
+    }
+    &__text {
+        flex-grow: 100;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+</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'
         }

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,
@@ -267,7 +267,7 @@ export default defineComponent({
             showPortal()
             configureScrollTarget()
 
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             const offsetOnShow = setOffsetOnShow(evt as TouchEvent, {
                 contextMenu: props.contextMenu,
@@ -278,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
                 })
@@ -291,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) {
@@ -314,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)
 
@@ -337,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

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,7 +114,7 @@ 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)
     ) {

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/DlSeparator/DlSeparator.vue

@@ -40,7 +40,7 @@ export default defineComponent({
                 case 'horizontal':
                     styles = {
                         backgroundColor: color,
-                        width: width ?? '300px',
+                        width: width ?? 'auto',
                         height: height ?? '1px',
                         marginTop: indent,
                         marginBottom: indent
@@ -50,7 +50,7 @@ export default defineComponent({
                     styles = {
                         backgroundColor: color,
                         width: width ?? '1px',
-                        height: height ?? '300px',
+                        height: height ?? 'auto',
                         marginLeft: indent,
                         marginRight: indent
                     }

package/src/components/essential/DlThemeProvider/DlThemeProvider.vue

@@ -26,6 +26,9 @@ export default defineComponent({
 
         const isDarkTheme = ref(props.isDark)
 
+        // @ts-ignore
+        window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
+
         provide('theme', isDarkTheme)
 
         watch(
@@ -36,6 +39,9 @@ export default defineComponent({
                     'data-theme',
                     getThemeModeAttr(isDark)
                 ) // sets the dl data-theme attr
+
+                // @ts-ignore
+                window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
             }
         )
     },

package/src/components/essential/index.ts

@@ -8,7 +8,7 @@ export * from './DlRadio'
 export * from './DlSkeleton'
 export * from './DlSwitch'
 export * from './DlEllipsis'
-export * from './DlTextHolder'
+export * from './DlLabel'
 export * from './DlThemeProvider'
 export * from './DlTrend'
 export * from './DlTypography'
@@ -18,3 +18,4 @@ export * from './DlLink'
 export * from './DlColorPicker'
 export * from './DlSpinner'
 export * from './DlSeparator'
+export * from './DlPageLayout'

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -116,7 +116,7 @@ export default defineComponent({
         },
         scrollTarget: {
             type: String as PropType<Element | string>,
-            default: void 0
+            default: null
         },
         delay: {
             type: Number,
@@ -224,7 +224,7 @@ export default defineComponent({
                 configureScrollTarget()
             })
 
-            if (unwatchPosition === void 0) {
+            if (!unwatchPosition) {
                 unwatchPosition = watch(
                     () =>
                         width +
@@ -258,14 +258,14 @@ export default defineComponent({
         }
 
         function anchorCleanup() {
-            if (observer !== void 0) {
+            if (observer) {
                 observer.disconnect()
-                observer = void 0
+                observer = null
             }
 
-            if (unwatchPosition !== void 0) {
+            if (unwatchPosition) {
                 unwatchPosition()
-                unwatchPosition = void 0
+                unwatchPosition = null
             }
 
             unconfigureScrollTarget()
@@ -369,7 +369,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 as Element
@@ -400,7 +400,7 @@ export default defineComponent({
 
         return {
             uuid: (attrs.id as string)?.length
-                ? attrs.id
+                ? (attrs.id as string)
                 : `dl-tooltip-${v4()}`,
             portalIsActive,
             classes: ['dl-tooltip dl-position-engine', attrs.class],
@@ -424,8 +424,7 @@ export default defineComponent({
                     '--dl-tooltip-text-align': props.textAlignment,
                     '--dl-tooltip-text-transform': props.capitalized
                         ? 'capitalize'
-                        : 'none',
-                    '--dl-tooltip-padding': '--dl-tooltip-padding'
+                        : 'none'
                 }
             ] as any
         }

package/src/demos/BarChartDemo.vue

@@ -14,13 +14,57 @@
             :options="options"
             :items-in-view="6"
         />
+
+        <dl-bar-chart
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            :items-in-view="6"
+            is-empty
+            :empty-state-props="{
+                responsive: true,
+                style: 'min-height: 350px;',
+                bgSize: '130px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #links="">
+                <div style="display: flex; gap: 5px; padding: 0 20px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </dl-bar-chart>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { ChartOptions } from 'chart.js'
-import { DlBarChart } from '../components'
+import { DlBarChart, DlButton } from '../components'
 
 const labelsFn = () => {
     const a = []
@@ -73,7 +117,8 @@ const options: ChartOptions = {
 export default defineComponent({
     name: 'DlChartDemo',
     components: {
-        DlBarChart
+        DlBarChart,
+        DlButton
     },
     data() {
         return {

package/src/demos/ColumnChartDemo.vue

@@ -66,12 +66,60 @@
             :options="options[0]"
             style="width: 100%"
         />
+
+        <dl-column-chart
+            :brush-props="brushProps"
+            :display-brush="false"
+            :display-labels="false"
+            :display-legend="false"
+            :legend-props="legendProps"
+            :data="data[0]"
+            :options="options[0]"
+            style="width: 50%"
+            is-empty
+            :empty-state-props="{
+                responsive: true,
+                style: 'min-height: 350px;',
+                bgSize: '130px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #links="">
+                <div style="display: flex; gap: 5px; padding: 0 20px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </dl-column-chart>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlAvatar, DlColumnChart, DlTooltip } from '../components'
+import { DlAvatar, DlColumnChart, DlTooltip, DlButton } from '../components'
 
 import { orderBy } from 'lodash'
 
@@ -229,7 +277,8 @@ export default defineComponent({
     components: {
         DlColumnChart,
         DlAvatar,
-        DlTooltip
+        DlTooltip,
+        DlButton
     },
     data() {
         return {