@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -11,7 +11,8 @@ import {
     ref,
     watch,
     isVue2,
-    h
+    h,
+    onUnmounted
 } from 'vue-demi'
 import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
 import { listenOpts, mergeSlot } from '../../../utils'
@@ -43,31 +44,40 @@ export default defineComponent({
 
         virtualScrollSliceRatioBefore: {
             type: [Number, String],
+            required: false,
             default: 1
         },
 
         virtualScrollSliceRatioAfter: {
             type: [Number, String],
+            required: false,
             default: 1
         },
 
         virtualScrollItemSize: {
-            type: [Number, String],
+            type: Number,
+            required: false,
             default: 0
         },
 
         virtualScrollStickySizeStart: {
             type: [Number, String],
+            required: false,
             default: 0
         },
 
         virtualScrollStickySizeEnd: {
             type: [Number, String],
+            required: false,
             default: 0
         },
-        tableColspan: [Number, String],
-        virtualScrollHorizontal: Boolean,
-        onVirtualScroll: Function,
+        tableColspan: { type: [Number, String], required: false, default: 100 },
+        virtualScrollHorizontal: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        onVirtualScroll: { type: Function, default: null },
         items: {
             type: Array,
             default: () => [] as Record<string, any>[]
@@ -80,26 +90,56 @@ export default defineComponent({
                 typeOptions.includes(v)
         },
 
-        itemsFn: { type: Function, default: void 0 },
+        itemsFn: { type: Function, default: null },
         itemsSize: { type: Number, default: 0 },
 
         scrollTarget: {
-            default: void 0
+            type: [String, Object],
+            default: null
+        },
+        scrollDebounce: {
+            type: Number,
+            default: 100
         }
     },
     emits: ['virtual-scroll'],
     setup(props, { slots, attrs }) {
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
+        const scrollSizeItem: Ref<number> = ref(40)
+
+        const isDefined = (v: any) => v !== undefined && v !== null
 
         const virtualScrollLength = computed(() => {
-            return props.itemsSize >= 0 && props.itemsFn !== void 0
+            return props.itemsSize >= 0 && isDefined(props.itemsFn)
                 ? parseInt(props.itemsSize as unknown as string, 10)
                 : Array.isArray(props.items)
                 ? props.items.length
                 : 0
         })
 
+        const setItemSize = () => {
+            scrollSizeItem.value = props.virtualScrollItemSize
+                ? props.virtualScrollItemSize
+                : typeof rootRef.value?.getElementsByClassName === 'function'
+                ? rootRef.value?.getElementsByClassName(
+                      'dl-virtual-scroll__content'
+                  )[0]?.children[0]?.clientHeight ?? 40
+                : 40
+        }
+
+        watch(
+            props,
+            () => {
+                setItemSize()
+            },
+            { deep: true }
+        )
+
+        const virtualScrollItemSizeComputed = computed(() => {
+            return scrollSizeItem.value
+        })
+
         const {
             virtualScrollSliceRange,
             localResetVirtualScroll,
@@ -108,7 +148,9 @@ export default defineComponent({
         } = useVirtualScroll({
             virtualScrollLength,
             getVirtualScrollTarget,
-            getVirtualScrollEl
+            getVirtualScrollEl,
+            virtualScrollItemSizeComputed,
+            debounceValue: props.scrollDebounce
         })
 
         const virtualScrollScope = computed(() => {
@@ -121,20 +163,21 @@ export default defineComponent({
                 item
             })
 
-            return props.itemsFn === void 0
-                ? props.items
+            const itemsFn = props.itemsFn as Function
+            const items = props.items as Record<string, any>[]
+
+            return isDefined(itemsFn)
+                ? itemsFn(
+                      virtualScrollSliceRange.value.from,
+                      virtualScrollSliceRange.value.to -
+                          virtualScrollSliceRange.value.from
+                  ).map(mapFn)
+                : items
                       .slice(
                           virtualScrollSliceRange.value.from,
                           virtualScrollSliceRange.value.to
                       )
                       .map(mapFn)
-                : props
-                      .itemsFn(
-                          virtualScrollSliceRange.value.from,
-                          virtualScrollSliceRange.value.to -
-                              virtualScrollSliceRange.value.from
-                      )
-                      .map(mapFn)
         })
 
         const classes = computed(
@@ -143,11 +186,11 @@ export default defineComponent({
                 (props.virtualScrollHorizontal === true
                     ? '--horizontal'
                     : '--vertical') +
-                (props.scrollTarget !== void 0 ? '' : ' scroll')
+                (isDefined(props.scrollTarget) ? '' : ' scroll')
         )
 
         const attributes = computed(() =>
-            props.scrollTarget !== void 0 ? {} : { tabindex: 0 }
+            isDefined(props.scrollTarget) ? {} : { tabindex: 0 }
         )
 
         watch(virtualScrollLength, () => {
@@ -173,7 +216,7 @@ export default defineComponent({
         function configureScrollTarget() {
             localScrollTarget = getScrollTarget(
                 getVirtualScrollEl(),
-                props.scrollTarget
+                props.scrollTarget as any
             )
 
             localScrollTarget!.addEventListener(
@@ -184,13 +227,13 @@ export default defineComponent({
         }
 
         function unconfigureScrollTarget() {
-            if (localScrollTarget !== void 0) {
+            if (isDefined(localScrollTarget)) {
                 localScrollTarget.removeEventListener(
                     'scroll',
                     onVirtualScrollEvt,
                     listenOpts.passive
                 )
-                localScrollTarget = void 0
+                localScrollTarget = null
             }
         }
 
@@ -203,7 +246,7 @@ export default defineComponent({
                 create
             )
 
-            if (slots.before !== void 0) {
+            if (isDefined(slots.before)) {
                 child = slots.before().concat(child)
             }
 
@@ -216,8 +259,11 @@ export default defineComponent({
 
         onMounted(() => {
             configureScrollTarget()
+            window.addEventListener('load', setItemSize)
         })
 
+        onUnmounted(() => window.removeEventListener('load', () => {}))
+
         onActivated(() => {
             configureScrollTarget()
         })
@@ -245,6 +291,12 @@ export default defineComponent({
         }
     },
     render(createElement: Function) {
+        /**
+         * Had to do some general Typescript hackery here to get this to work in webpack based builder project.
+         * The original code is written in Vue 2, but this project is using Vue 3.
+         * Some of the types are not compatible, so I had to cast some of the types to any.
+         */
+
         const renderFn = isVue2 ? createElement : h
         const renderSlot = (fn: Function) => (isVue2 ? fn() : () => fn())
 
@@ -255,25 +307,36 @@ export default defineComponent({
             return
         }
 
-        return this.$props.type === '__dltable'
-            ? getTableMiddle(
-                  {
-                      ref: 'rootRef',
-                      class: 'dl-table__middle ' + this.classes
-                  },
-                  this.getVirtualChildren(renderFn),
-                  renderFn
-              )
-            : renderFn(
-                  this.tag,
-                  {
-                      ...this.attrs,
-                      ref: 'rootRef',
-                      class: [this.attrs.class, this.classes],
-                      ...this.attributes
-                  },
-                  renderSlot(() => this.getVirtualChildren(renderFn))
-              )
+        const isDlTable = (this.$props as any).type === '__dltable'
+        const getVirtualChildren = (this as any).getVirtualChildren as Function
+
+        if (isDlTable) {
+            return getTableMiddle(
+                {
+                    ref: 'rootRef',
+                    class: 'dl-table__middle ' + this.classes
+                },
+                getVirtualChildren(renderFn),
+                renderFn
+            )
+        }
+
+        const attrs = this.attrs as Record<string, any>
+        const attributes = this.attributes as Record<string, any>
+        const classes = this.classes as string // todo: does this have to be casted to an object?
+        const attributeClasses = attrs.class as Record<string, any>
+        const tag = this.tag as string
+
+        return renderFn(
+            tag,
+            {
+                ...attrs,
+                ref: 'rootRef',
+                class: [attributeClasses, classes],
+                ...attributes
+            },
+            renderSlot(() => getVirtualChildren(renderFn))
+        )
     }
 })
 </script>

package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts

@@ -279,17 +279,34 @@ export function useVirtualScroll({
     virtualScrollLength,
     getVirtualScrollTarget,
     getVirtualScrollEl,
-    virtualScrollItemSizeComputed // optional
+    virtualScrollItemSizeComputed, // optional
+    debounceValue
 }: {
     virtualScrollLength: ComputedRef<number>
     getVirtualScrollTarget: () => HTMLElement | undefined
     getVirtualScrollEl: () => HTMLElement
     virtualScrollItemSizeComputed?: ComputedRef<number>
+    debounceValue?: number
 }) {
     const vm = getCurrentInstance()
 
     const { props, emit, proxy } = vm
 
+    let scrollAnimationFrameId: number | null = null
+    let changedRangeAnimationFrameId: number | null = null
+
+    onBeforeUnmount(() => {
+        resetAnimationFrame(scrollAnimationFrameId)
+        resetAnimationFrame(changedRangeAnimationFrameId)
+    })
+
+    const resetAnimationFrame = (frameId: number | null) => {
+        if (frameId) {
+            cancelAnimationFrame(frameId)
+        }
+        frameId = null
+    }
+
     let prevScrollStart: number | undefined
     let prevToIndex: number
     let localScrollViewSize: number | undefined
@@ -571,7 +588,9 @@ export function useVirtualScroll({
                 virtualScrollLength.value
             )
 
-            requestAnimationFrame(() => {
+            resetAnimationFrame(changedRangeAnimationFrameId)
+
+            changedRangeAnimationFrameId = requestAnimationFrame(() => {
                 if (
                     virtualScrollSliceRange.value.to !== to &&
                     prevScrollStart === scrollDetails.scrollStart
@@ -590,7 +609,9 @@ export function useVirtualScroll({
             })
         }
 
-        requestAnimationFrame(() => {
+        resetAnimationFrame(scrollAnimationFrameId)
+
+        scrollAnimationFrameId = requestAnimationFrame(() => {
             // if the scroll was changed give up
             // (another call to setVirtualScrollSliceRange before animation frame)
             if (prevScrollStart !== scrollDetails.scrollStart) {
@@ -916,7 +937,10 @@ export function useVirtualScroll({
     }
 
     setVirtualScrollSize()
-    const onVirtualScrollEvt = debounce(localOnVirtualScrollEvt, 35)
+    const onVirtualScrollEvt = debounce(
+        localOnVirtualScrollEvt,
+        debounceValue ?? 100
+    )
 
     onBeforeMount(() => {
         setVirtualScrollSize()

package/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export * from './DlItemSection'
 export * from './DlInfoErrorMessage'
 export * from './DlVirtualScroll'
+export * from './DlTooltip'

package/src/components/types.ts

@@ -1,3 +1,5 @@
 export * from './essential/types'
 export * from './basic/types'
 export * from './compound/types'
+import { TInputSizes as DlInputSizes } from '../utils/input-sizes'
+export type { DlInputSizes }

package/src/demos/BarChartDemo.vue

@@ -14,12 +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 { DlBarChart } from '../components'
+import { ChartOptions } from 'chart.js'
+import { DlBarChart, DlButton } from '../components'
 
 const labelsFn = () => {
     const a = []
@@ -59,14 +104,26 @@ const legendProps = {
     alignItems: 'center'
 }
 
+const options: ChartOptions = {
+    scales: {
+        y: {
+            afterFit: (scaleInstance) => {
+                scaleInstance.width = 50
+            }
+        }
+    }
+}
+
 export default defineComponent({
     name: 'DlChartDemo',
     components: {
-        DlBarChart
+        DlBarChart,
+        DlButton
     },
     data() {
         return {
             data,
+            options,
             legendProps
         }
     },

package/src/demos/ColumnChartDemo.vue

@@ -38,6 +38,21 @@
                         <dl-avatar size="24px">
                             <img :src="url">
                         </dl-avatar>
+                        <dl-tooltip>
+                            <div
+                                style="
+                                    display: flex;
+                                    flex-direction: column;
+                                    align-items: center;
+                                    padding: 10px;
+                                "
+                            >
+                                <dl-avatar size="24px">
+                                    <img :src="url">
+                                </dl-avatar>
+                                <p>rotem.shaham@dataloop.com</p>
+                            </div>
+                        </dl-tooltip>
                         <div />
                     </div>
                 </div>
@@ -51,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 } from '../components'
+import { DlAvatar, DlColumnChart, DlTooltip, DlButton } from '../components'
 
 import { orderBy } from 'lodash'
 
@@ -213,7 +276,9 @@ export default defineComponent({
     name: 'DlColumnChartDemo',
     components: {
         DlColumnChart,
-        DlAvatar
+        DlAvatar,
+        DlTooltip,
+        DlButton
     },
     data() {
         return {