2021-07-16 09:39:45 +00:00
const VirtualScrollerProps = [
2021-12-05 17:20:13 +00:00
{
name : "id" ,
type : "string" ,
default : "null" ,
description : "Unique identifier of the element."
} ,
{
name : "style" ,
type : "any" ,
default : "null" ,
description : "Inline style of the component."
} ,
{
name : "class" ,
type : "string" ,
default : "null" ,
description : "Style class of the component."
} ,
2021-07-16 09:39:45 +00:00
{
name : "items" ,
type : "array" ,
default : "null" ,
description : "An array of objects to display."
} ,
{
name : "itemSize" ,
type : "number|array" ,
default : "null" ,
description : "The height/width of item according to orientation."
} ,
{
name : "scrollHeight" ,
type : "string" ,
default : "null" ,
description : "Height of the scroll viewport."
} ,
{
name : "scrollWidth" ,
type : "string" ,
default : "null" ,
description : "Width of the scroll viewport."
} ,
{
name : "orientation" ,
type : "string" ,
default : "vertical" ,
description : "The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'."
} ,
{
name : "numToleratedItems" ,
type : "number" ,
default : "null" ,
description : "Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view."
} ,
{
name : "delay" ,
type : "number" ,
default : "0" ,
description : "Delay in scroll before new data is loaded."
} ,
{
name : "lazy" ,
type : "boolean" ,
default : "false" ,
description : "Defines if data is loaded and interacted with in lazy manner."
} ,
{
2021-12-05 17:20:13 +00:00
name : "disabled" ,
2021-07-16 09:39:45 +00:00
type : "boolean" ,
default : "false" ,
2021-12-05 17:20:13 +00:00
description : "If disabled, the VirtualScroller feature is eliminated and the content is displayed directly."
2021-07-16 09:39:45 +00:00
} ,
{
2021-12-05 17:20:13 +00:00
name : "loaderDisabled" ,
type : "boolean" ,
default : "false" ,
description : "Used to implement a custom loader instead of using the loader feature in the VirtualScroller."
2021-07-16 09:39:45 +00:00
} ,
{
2021-12-05 17:20:13 +00:00
name : "loading" ,
type : "boolean" ,
default : "false" ,
description : "Whether the data is loaded."
} ,
{
name : "showSpacer" ,
type : "boolean" ,
default : "true" ,
description : "Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller."
} ,
{
name : "showLoader" ,
type : "boolean" ,
default : "false" ,
description : "Whether to show loader."
2022-07-29 01:01:07 +00:00
} ,
{
name : "tabindex" ,
type : "number|string" ,
default : "0" ,
description : "Index of the element in tabbing order."
2021-07-16 09:39:45 +00:00
}
] ;
const VirtualScrollerEvents = [
2021-12-05 17:20:13 +00:00
{
name : "scroll" ,
description : "Callback to invoke when scroll position changes." ,
arguments : [
{
name : "event" ,
type : "any" ,
description : "Browser event."
}
]
} ,
2021-07-16 09:39:45 +00:00
{
name : "scroll-index-change" ,
description : "Callback to invoke when scroll position and item's range in view changes." ,
arguments : [
{
name : "event.first" ,
type : "number" ,
description : "First index of the new data range to be loaded."
} ,
{
name : "event.last" ,
type : "number" ,
description : "Last index of the new data range to be loaded."
}
]
} ,
{
name : "lazy-load" ,
description : "Callback to invoke in lazy mode to load new data." ,
arguments : [
{
name : "event.first" ,
type : "number" ,
description : "First index of the new data range to be loaded."
} ,
{
name : "event.last" ,
type : "number" ,
description : "Last index of the new data range to be loaded."
}
]
}
] ;
const VirtualScrollerSlots = [
{
name : "item" ,
description : "Content for the item"
} ,
2021-08-17 14:09:43 +00:00
{
name : "content" ,
description : "Custom content for the component"
2021-08-31 08:32:47 +00:00
} ,
2021-07-16 09:39:45 +00:00
{
name : "loader" ,
description : "Custom content for the loader items"
}
] ;
module . exports = {
virtualscroller : {
name : "VirtualScroller" ,
description : "VirtualScroller is a performant approach to handle huge data efficiently." ,
props : VirtualScrollerProps ,
events : VirtualScrollerEvents ,
slots : VirtualScrollerSlots
}
2021-12-05 17:20:13 +00:00
} ;