@webitel/ui-sdk 25.10.49 → 25.10.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.49",
+  "version": "25.10.50",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/components/wt-table/wt-table.vue

@@ -14,6 +14,7 @@
     lazy
     scroll-height="flex"
     scrollable
+    :virtual-scroller-options="virtualScroll"
     @sort="sort"
     @update:expanded-rows="expandedRows = $event"
     @column-resize-end="columnResize"
@@ -202,12 +203,22 @@
 
 <script lang="ts" setup>
 import type { DataTableProps } from 'primevue';
+import { VirtualScrollerLazyEvent } from 'primevue/virtualscroller';
 import { computed, defineProps, ref, useSlots,useTemplateRef, withDefaults } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters.js';
 import type { WtTableHeader } from './types/WtTable';
 
+/**
+ * Number of items to render outside the visible area for virtual scrolling.
+ * This helps maintain smooth scrolling performance by pre-rendering items
+ * that are about to come into view, reducing the chance of blank spaces
+ * during fast scrolling.
+ */
+const VIRTUAL_SCROLL_TOLERATED_ITEMS = 10;
+const DEFAULT_ITEM_SIZE = 40;
+
 interface Props extends DataTableProps{
   /**
    * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets 140px. '
@@ -252,6 +263,12 @@ interface Props extends DataTableProps{
   resizableColumns?: boolean
   reorderableColumns?: boolean
   rowExpansionDisabled?: (row: object) => boolean;
+
+  //lazy loading
+  lazy?: boolean;
+  onLoading?: (event: VirtualScrollerLazyEvent) => Promise<any>;
+  loading?: boolean;
+  itemSize?: number | undefined;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -270,6 +287,8 @@ const props = withDefaults(defineProps<Props>(), {
   resizableColumns: false,
   reorderableColumns: false,
   rowExpansionDisabled: () => false,
+  lazy: false,
+  itemSize: DEFAULT_ITEM_SIZE
 });
 
 const { t } = useI18n();
@@ -417,6 +436,17 @@ const toggleRow = (row) => {
     expandedRows.value.push(row);
   }
 };
+
+const virtualScroll = computed(() => {
+  if (!props.lazy) return;
+
+  return {
+    lazy: props.lazy,
+    onLazyLoad: props.onLoading,
+    itemSize: props.itemSize, // The height/width of item according to orientation
+    numToleratedItems: VIRTUAL_SCROLL_TOLERATED_ITEMS, // Number of items to pre-render outside visible area
+  };
+});
 </script>
 
 <style lang="scss">

package/types/components/wt-table/wt-table.vue.d.ts

@@ -1,5 +1,6 @@
 import type { DataTableProps } from 'primevue';
 import type { WtTableHeader } from './types/WtTable';
+import { VirtualScrollerLazyEvent } from 'primevue/virtualscroller';
 interface Props extends DataTableProps {
     /**
      * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets 140px. '
@@ -46,6 +47,10 @@ interface Props extends DataTableProps {
     resizableColumns?: boolean;
     reorderableColumns?: boolean;
     rowExpansionDisabled?: (row: object) => boolean;
+    lazy?: boolean;
+    onLoading?: (event: VirtualScrollerLazyEvent) => Promise<any>;
+    loading?: boolean;
+    itemSize?: number | undefined;
 }
 declare const emit: (event: "sort" | "update:selected" | "reorder:row" | "column-resize" | "column-reorder", ...args: any[]) => void;
 declare const tableKey: import("vue").Ref<number, number>;
@@ -73,6 +78,12 @@ declare const columnResize: ({ element }: {
 declare const columnReorder: () => void;
 declare const isRowExpanded: (row: any) => boolean;
 declare const toggleRow: (row: any) => void;
+declare const virtualScroll: import("vue").ComputedRef<{
+    lazy: true;
+    onLazyLoad: (event: VirtualScrollerLazyEvent) => Promise<any>;
+    itemSize: number;
+    numToleratedItems: number;
+}>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_68: string, __VLS_69: {
     index: any;
@@ -115,6 +126,7 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
     columnReorder: typeof columnReorder;
     isRowExpanded: typeof isRowExpanded;
     toggleRow: typeof toggleRow;
+    virtualScroll: typeof virtualScroll;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sort: (...args: any[]) => void;
     "update:selected": (...args: any[]) => void;
@@ -130,6 +142,7 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
 }>, {
     headers: WtTableHeader[];
     data: Array<unknown>;
+    lazy: boolean;
     sortable: boolean;
     selectable: boolean;
     gridActions: boolean;
@@ -145,6 +158,7 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
     resizableColumns: boolean;
     reorderableColumns: boolean;
     rowExpansionDisabled: (row: object) => boolean;
+    itemSize: number | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sort: (...args: any[]) => void;
@@ -161,6 +175,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
 }>, {
     headers: WtTableHeader[];
     data: Array<unknown>;
+    lazy: boolean;
     sortable: boolean;
     selectable: boolean;
     gridActions: boolean;
@@ -176,6 +191,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     resizableColumns: boolean;
     reorderableColumns: boolean;
     rowExpansionDisabled: (row: object) => boolean;
+    itemSize: number | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;