refactor(pagination): chose a more sensible event name and prefix it (#…

…112)

README.md

@@ -160,7 +160,7 @@ This behaviour matches the way [Observable](https://observablehq.com) handles an
 In case of a custom event that is meant to be catched by an other component of this library, the name of this event has to be prefixed too.
 
 ```js
-this.dispatchEvent(new Event("leu-selected", { bubbles: true, composed: true }))
+this.dispatchEvent(new Event("leu:select", { bubbles: true, composed: true }))
 ```
 
 ### Dependencies

src/components/pagination/Pagination.js

@@ -57,13 +57,13 @@ export class LeuPagination extends LitElement {
   numberUpdate(number) {
     this.page = number
 
-    const min = (this.boundPage - 1) * this.itemsPerPage
-    const max = Math.min(min + this.itemsPerPage, this.numOfItems)
+    const startIndex = (this.boundPage - 1) * this.itemsPerPage
+    const endIndex = Math.min(startIndex + this.itemsPerPage, this.numOfItems)
     this.dispatchEvent(
-      new CustomEvent("range-updated", {
+      new CustomEvent("leu:pagechange", {
         detail: {
-          min,
-          max,
+          startIndex,
+          endIndex,
         },
         bubbles: false,
       })

src/components/pagination/stories/pagination.stories.js

@@ -70,7 +70,7 @@ function Template({ min, max }, { id }) {
     <leu-pagination
       numOfItems=${items.length}
       itemsPerPage="5"
-      @range-updated=${(e) => {
+      @leu:pagechange=${(e) => {
         updateStorybookArgss(id, {
           min: e.detail.min,
           max: e.detail.max,

src/components/table/Table.js

@@ -24,8 +24,8 @@ export class LeuTable extends LitElement {
 
     _shadowLeft: { type: Boolean, state: true },
     _shadowRight: { type: Boolean, state: true },
-    _min: { type: Number, state: true },
-    _max: { type: Number, state: true },
+    _startIndex: { type: Number, state: true },
+    _endIndex: { type: Number, state: true },
   }
 
   constructor() {
@@ -56,9 +56,9 @@ export class LeuTable extends LitElement {
     /** @internal */
     this._scrollRef = createRef()
     /** @internal */
-    this._min = 0
+    this._startIndex = 0
     /** @internal */
-    this._max = null
+    this._endIndex = null
   }
 
   firstUpdated() {
@@ -121,7 +121,7 @@ export class LeuTable extends LitElement {
 
   get _data() {
     return this.itemsPerPage && this.itemsPerPage > 0
-      ? this._sortedData.slice(this._min, this._max)
+      ? this._sortedData.slice(this._startIndex, this._endIndex)
       : this._sortedData
   }
 
@@ -194,9 +194,9 @@ export class LeuTable extends LitElement {
             <leu-pagination
               .numOfItems=${this._sortedData.length}
               .itemsPerPage=${this.itemsPerPage}
-              @range-updated=${(e) => {
-                this._min = e.detail.min
-                this._max = e.detail.max
+              @leu:pagechange=${(e) => {
+                this._startIndex = e.detail.startIndex
+                this._endIndex = e.detail.endIndex
                 // after render
                 setTimeout(() => {
                   this.shadowToggle(this._scrollRef.value)