@dataloop-ai/components 0.18.81 → 0.18.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.81",
+  "version": "0.18.83",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTable/DlTable.vue

@@ -593,10 +593,7 @@ import {
 import DlTr from './components/DlTr.vue'
 import DlTh from './components/DlTh.vue'
 import DlTd from './components/DlTd.vue'
-import {
-    commonVirtPropsList,
-    ScrollDetails
-} from '../../shared/DlVirtualScroll/useVirtualScroll'
+import { commonVirtPropsList } from '../../shared/DlVirtualScroll/useVirtualScroll'
 import DlVirtualScroll from '../../shared/DlVirtualScroll/DlVirtualScroll.vue'
 import { useTableFilter } from './hooks/tableFilter'
 import { useTableSort } from './hooks/tableSort'
@@ -625,6 +622,7 @@ import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { v4 } from 'uuid'
 import { flatTreeData } from '../DlTreeTable/utils/flatTreeData'
 import { stopAndPrevent } from '../../../utils'
+import { DlVirtualScrollEvent } from '../../types'
 
 const commonVirtPropsObj = {} as Record<string, any>
 commonVirtPropsList.forEach((p) => {
@@ -658,12 +656,15 @@ export default defineComponent({
             tableHeaderStyle,
             tableHeaderClass,
             dense,
-            draggable
+            draggable,
+            virtualScroll
         } = toRefs(props)
 
         const rootRef = ref<HTMLDivElement>(null)
         const virtScrollRef = ref(null)
-        const hasVirtScroll = computed(() => props.virtualScroll === true)
+        const hasVirtScroll = computed<boolean>(
+            () => virtualScroll.value === true
+        )
 
         const groupOptions = computed(() =>
             (props.columns as DlTableColumn[]).map((item) => ({
@@ -1174,7 +1175,7 @@ export default defineComponent({
             }
         }
 
-        function onVScroll(info: ScrollDetails) {
+        function onVScroll(info: DlVirtualScrollEvent) {
             emit('virtual-scroll', info)
         }
 

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -236,7 +236,6 @@ export default defineComponent({
     setup(props, { emit, slots }) {
         const dlTableRef = ref(null)
         const selectedData = ref([])
-        const vScroll = ref(false)
         const borderState = ref([])
         const denseState = ref([])
         const resizableState = ref([])
@@ -381,7 +380,6 @@ export default defineComponent({
             dlTableRef,
             isRowSelected,
             hasFlatTreeData,
-            vScroll,
             headerSelectedValue,
             selectedData,
             denseState,

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

@@ -79,7 +79,6 @@ export default defineComponent({
             required: false,
             default: false
         },
-        onVirtualScroll: { type: Function, default: null },
         items: {
             type: Array,
             default: () => [] as Record<string, any>[]

package/src/components/shared/DlVirtualScroll/types/VirtualScrollParamsType.ts

@@ -1,6 +1,6 @@
 import { ComputedRef } from 'vue-demi'
 
-export type VirtualScrollParamsType = {
+export type DlVirtualScrollParamsType = {
     virtualScrollLength: ComputedRef<number>
     getVirtualScrollTarget: () => HTMLElement | undefined
     getVirtualScrollEl: () => HTMLElement

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

@@ -0,0 +1,9 @@
+export * from './types'
+
+export type DlVirtualScrollEvent = {
+    index: number
+    from: number
+    to: number
+    direction: 'decrease' | 'increase'
+    ref: any // A reference to the vue proxy component
+}

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

@@ -15,7 +15,7 @@ import {
     Ref
 } from 'vue-demi'
 import { noop } from '../../../utils/events'
-import { VirtualScrollParamsType } from './types/VirtualScrollParamsType'
+import { DlVirtualScrollParamsType } from './types/VirtualScrollParamsType'
 
 export interface ScrollDetails {
     scrollStart: number
@@ -282,7 +282,7 @@ export function useVirtualScroll({
     getVirtualScrollEl,
     virtualScrollItemSizeComputed, // optional
     debounceValue
-}: VirtualScrollParamsType) {
+}: DlVirtualScrollParamsType) {
     const vm = getCurrentInstance()
 
     const { props, emit, proxy } = vm

package/src/components/shared/types.ts

@@ -5,3 +5,5 @@ export enum DlTextTransformOptions {
     LOWERCASE = 'lowercase',
     DEFAULT = 'default' // Default behavior is to make only the first letter of the sentence is capital
 }
+
+export * from './DlVirtualScroll/types'

package/src/demos/DlCardDemo.vue

@@ -76,7 +76,7 @@
 
         <div>Text Card</div>
         <DlCard
-            title="This is a long long long long long long text title wooo"
+            title="This-test--tes-tes-t-est-set-se-tse-t-est-set-se-ts-et-set-se-ts-et-set-tse-tse-tes-t"
             text="sdaljfaldksfj;asdjfal;ksdf;ajksd;faj;lskdf;alkjsdflk;ajsd;lfjas;ldjfa;ldsjfals;dj"
             :links="interactiveProps.links"
         />