2022-09-12 07:13:52 +00:00
const VirtualScrollerProps = [
{
2022-09-14 14:26:41 +00:00
name : 'id' ,
type : 'string' ,
default : 'null' ,
description : 'Unique identifier of the element.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'style' ,
type : 'any' ,
default : 'null' ,
description : 'Inline style of the component.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'class' ,
type : 'string' ,
default : 'null' ,
description : 'Style class of the component.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'items' ,
type : 'array' ,
default : 'null' ,
description : 'An array of objects to display.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'itemSize' ,
type : 'number|array' ,
default : 'null' ,
description : 'The height/width of item according to orientation.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'scrollHeight' ,
type : 'string' ,
default : 'null' ,
description : 'Height of the scroll viewport.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'scrollWidth' ,
type : 'string' ,
default : 'null' ,
description : 'Width of the scroll viewport.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'orientation' ,
type : 'string' ,
default : 'vertical' ,
2022-09-12 07:13:52 +00:00
description : "The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'."
} ,
{
2022-09-14 14:26:41 +00:00
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.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'delay' ,
type : 'number' ,
default : '0' ,
description : 'Delay in scroll before new data is loaded.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'lazy' ,
type : 'boolean' ,
default : 'false' ,
description : 'Defines if data is loaded and interacted with in lazy manner.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'disabled' ,
type : 'boolean' ,
default : 'false' ,
description : 'If disabled, the VirtualScroller feature is eliminated and the content is displayed directly.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'loaderDisabled' ,
type : 'boolean' ,
default : 'false' ,
description : 'Used to implement a custom loader instead of using the loader feature in the VirtualScroller.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'loading' ,
type : 'boolean' ,
default : 'false' ,
description : 'Whether the data is loaded.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'showSpacer' ,
type : 'boolean' ,
default : 'true' ,
description : 'Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'showLoader' ,
type : 'boolean' ,
default : 'false' ,
description : 'Whether to show loader.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'tabindex' ,
type : 'number|string' ,
default : '0' ,
description : 'Index of the element in tabbing order.'
2023-05-05 06:37:18 +00:00
} ,
{
name : 'pt' ,
type : 'any' ,
default : 'null' ,
2023-08-01 14:01:12 +00:00
description : 'Used to pass attributes to DOM elements inside the component.'
2022-09-12 07:13:52 +00:00
}
] ;
const VirtualScrollerEvents = [
{
2022-09-14 14:26:41 +00:00
name : 'scroll' ,
description : 'Callback to invoke when scroll position changes.' ,
2022-09-12 07:13:52 +00:00
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event' ,
type : 'any' ,
description : 'Browser event.'
2022-09-12 07:13:52 +00:00
}
]
} ,
{
2022-09-14 14:26:41 +00:00
name : 'scroll-index-change' ,
2022-09-12 07:13:52 +00:00
description : "Callback to invoke when scroll position and item's range in view changes." ,
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event.first' ,
type : 'number' ,
description : 'First index of the new data range to be loaded.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'event.last' ,
type : 'number' ,
description : 'Last index of the new data range to be loaded.'
2022-09-12 07:13:52 +00:00
}
]
} ,
{
2022-09-14 14:26:41 +00:00
name : 'lazy-load' ,
description : 'Callback to invoke in lazy mode to load new data.' ,
2022-09-12 07:13:52 +00:00
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event.first' ,
type : 'number' ,
description : 'First index of the new data range to be loaded.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'event.last' ,
type : 'number' ,
description : 'Last index of the new data range to be loaded.'
2022-09-12 07:13:52 +00:00
}
]
}
] ;
const VirtualScrollerSlots = [
{
2022-09-14 14:26:41 +00:00
name : 'item' ,
2023-04-07 06:50:09 +00:00
description : 'Content for the item.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'content' ,
2023-04-07 06:50:09 +00:00
description : 'Custom content for the component.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'loader' ,
2023-04-07 06:50:09 +00:00
description : 'Custom content for the loader items.'
} ,
{
name : 'loadingicon' ,
description : 'Custom loading icon template.'
2022-09-12 07:13:52 +00:00
}
] ;
module . exports = {
virtualscroller : {
2022-09-14 14:26:41 +00:00
name : 'VirtualScroller' ,
description : 'VirtualScroller is a performant approach to handle huge data efficiently.' ,
2022-09-12 07:13:52 +00:00
props : VirtualScrollerProps ,
events : VirtualScrollerEvents ,
slots : VirtualScrollerSlots
}
} ;