@ -146,9 +146,17 @@ export default Vue.extend({
return Math . floor ( this . filesListWidth / this . itemWidth )
} ,
/ * *
* Index of the first item to be rendered
* /
startIndex ( ) {
return Math . max ( 0 , this . index - this . bufferItems )
} ,
/ * *
* Number of items to be rendered at the same time
* For list view this is the same as ` rowCount ` , for grid view this is ` rowCount ` * ` columnCount `
* /
shownItems ( ) {
/ / I f i n g r i d m o d e , w e n e e d t o m u l t i p l y t h e n u m b e r o f r o w s b y t h e n u m b e r o f c o l u m n s
if ( this . gridMode ) {
@ -157,6 +165,7 @@ export default Vue.extend({
return this . rowCount
} ,
renderedItems ( ) : RecycledPoolItem [ ] {
if ( ! this . isReady ) {
return [ ]
@ -185,6 +194,13 @@ export default Vue.extend({
} )
} ,
/ * *
* The total number of rows that are available
* /
totalRowCount ( ) {
return Math . floor ( this . dataSources . length / this . columnCount )
} ,
tbodyStyle ( ) {
const isOverScrolled = this . startIndex + this . rowCount > this . dataSources . length
const lastIndex = this . dataSources . length - this . startIndex - this . shownItems
@ -192,6 +208,7 @@ export default Vue.extend({
return {
paddingTop : ` ${ Math . floor ( this . startIndex / this . columnCount ) * this . itemHeight } px ` ,
paddingBottom : isOverScrolled ? 0 : ` ${ hiddenAfterItems * this . itemHeight } px ` ,
minHeight : ` ${ this . totalRowCount * this . itemHeight + this . beforeHeight } px ` ,
}
} ,
} ,
@ -199,6 +216,13 @@ export default Vue.extend({
scrollToIndex ( index ) {
this . scrollTo ( index )
} ,
totalRowCount ( ) {
if ( this . scrollToIndex ) {
this . $nextTick ( ( ) => this . scrollTo ( this . scrollToIndex ) )
}
} ,
columnCount ( columnCount , oldColumnCount ) {
if ( oldColumnCount === 0 ) {
/ / W e ' r e i n i t i a l i z i n g , t h e s c r o l l p o s i t i o n