improved algorithm in pages computed method

[tomagnew]

The computed "pages" method uses a very expensive for loop in the function:

for (let index = 0; index < this.pageCount; index++) {
   ... // execute items logic
}

Using a pageCount of 100,000 pages slows the control down noticeably. At 1,000,000 pages the control has a 2 to 3 second lag time in the UI.

The code in this P/R executes the same logic only on three very small ranges including the low and high margin page ranges, plus the range around the selected page index. The result is excellent performance on even one trillion pages.

If interested, watch https://youtu.be/RJoCskujh2s for details on this fix.

[codecov-io]

Codecov Report

Merging #39 into master will increase coverage by 3.74%. The diff coverage is 94.11%.

@@            Coverage Diff             @@
##           master      #39      +/-   ##
==========================================
+ Coverage   82.22%   85.96%   +3.74%     
==========================================
  Files           1        1              
  Lines          45       57      +12     
  Branches       14       16       +2     
==========================================
+ Hits           37       49      +12     
  Misses          5        5              
  Partials        3        3

Impacted Files	Coverage Δ
src/components/Paginate.vue	85.96% <94.11%> (+3.74%)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update e3e3743...89c8f4f. Read the comment docs.

[lokyoung]

Hi @tomagnew . I'm really appreciated of your work. I will take review at the code and publish a new version. Thanks.

[tomagnew]

Hi @lokyoung , you're very welcome. I like this component and am planning on using it in many projects. Thank you.

[lokyoung]

@tomagnew I just make some simple updates.

• Remove the indentation between template and style tag since there is a convention for vue.
• Use camel case for the two variable selectedRange_low and selectedRange_high. In JavaScript, we often use camel case. BTW, i'm also a Ruby developer, in Ruby we use snake case so i feel so kind to see that case lol.

So impressed for your work, Thanks!

[lokyoung]

@tomagnew I have published a new version v1.1.0. You can check if it's ok. And issue please feel free to contact me.

[tomagnew]

Looks good!