svelte-common 5.0.1 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "publishConfig": {
     "access": "public"
   },

package/src/pagination.mjs

@@ -1,11 +1,12 @@
 /**
  * Pagination support store.
+ * Pages go from 1 ... numberOfPages
  */
 export class Pagination {
   subscriptions = new Set();
   data;
   itemsPerPage;
-  #page = 0;
+  #page = 1;
 
   constructor(source, itemsPerPage = 10) {
     this.data = [...source];
@@ -17,7 +18,7 @@ export class Pagination {
    * @param {number} n
    */
   set page(n) {
-    if (this.#page !== n && n > 0 && n <= this.numberOfPages) {
+    if (this.#page !== n && n >= 1 && n <= this.numberOfPages) {
       this.#page = n;
       this.subscriptions.forEach(subscription => subscription(this));
     }
@@ -43,7 +44,7 @@ export class Pagination {
   }
 
   *items() {
-    const n = this.page;
+    const n = this.page - 1;
 
     for (const item of this.data.slice(
       n * this.itemsPerPage,
@@ -64,17 +65,25 @@ export class Pagination {
     this.subscribe(pg => {
       const items = [];
 
-      function add(innerText, eh) {
+      const add = (innerText, targetPage, label) => {
         const a = document.createElement("a");
         a.setAttribute("href", "#");
+        if (label) {
+          a.setAttribute("aria-label", label);
+        }
         a.innerText = innerText;
-        a.onclick = eh;
+        if (targetPage === this.page) {
+          a.disabled = true;
+          a.setAttribute("aria-current", "page");
+        } else {
+          a.onclick = () => (this.page = targetPage);
+        }
         items.push(a);
         return a;
-      }
+      };
 
-      add("<<", event => (this.page = 1));
-      add("<", event => (this.page = this.page - 1));
+      add("<<", 1, "First Page");
+      add("<", this.page - 1, "Previous Page");
 
       for (let n = 1; n < this.numberOfPages; n++) {
         if (
@@ -84,15 +93,12 @@ export class Pagination {
             n % 10 === 0 ||
             (n < this.page + 3 && n > this.page - 3))
         ) {
-          const a = add(String(n), event => (this.page = n));
-          if (n === this.page) {
-            a.setAttribute("aria-current", "page");
-          }
+          add(String(n), n);
         }
       }
 
-      add(">", event => (this.page = this.page + 1));
-      add(">>", event => (this.page = this.numberOfPages));
+      add(">", this.page + 1, "Next Page");
+      add(">>", this.numberOfPages, "Last Page");
 
       nav.replaceChildren(...items);
     });