svelte-common 4.22.21 → 5.0.0

package/README.md

@@ -38,16 +38,22 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
     *   [Parameters](#parameters-3)
 *   [filter](#filter)
     *   [Parameters](#parameters-4)
-*   [initializeServiceWorker](#initializeserviceworker)
+*   [Pagination](#pagination)
     *   [Parameters](#parameters-5)
+    *   [page](#page)
+        *   [Parameters](#parameters-6)
+    *   [page](#page-1)
+    *   [pageNavigationElement](#pagenavigationelement)
+*   [initializeServiceWorker](#initializeserviceworker)
+    *   [Parameters](#parameters-7)
 *   [toggleOrderBy](#toggleorderby)
-    *   [Parameters](#parameters-6)
+    *   [Parameters](#parameters-8)
 *   [sortable](#sortable)
-    *   [Parameters](#parameters-7)
+    *   [Parameters](#parameters-9)
 *   [sorter](#sorter)
-    *   [Parameters](#parameters-8)
+    *   [Parameters](#parameters-10)
 *   [keyPrefixStore](#keyprefixstore)
-    *   [Parameters](#parameters-9)
+    *   [Parameters](#parameters-11)
 
 ## AttributeDefinition
 
@@ -121,6 +127,32 @@ Generate filter function.
 
 Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** 
 
+## Pagination
+
+Pagination support store.
+
+### Parameters
+
+*   `source`  
+*   `itemsPerPage`   (optional, default `10`)
+
+### page
+
+Set current page
+
+#### Parameters
+
+*   `n` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** 
+
+### page
+
+Returns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** current page
+
+### pageNavigationElement
+
+*   **See**: @link <https://getbootstrap.com/docs/4.0/components/pagination>
+*   **See**: @link <https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination>
+
 ## initializeServiceWorker
 
 Create a store holding a service worker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.22.21",
+  "version": "5.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,7 @@
     "prepare": "vite build",
     "start": "vite",
     "test": "npm run test:ava && npm run test:cafe",
-    "test:cafe": "testcafe $BROWSER:headless tests/cafe/*.*js --esm -s build/test --page-request-timeout 5000 --app-init-delay 8000 --app vite",
+    "test:cafe": "testcafe $BROWSER:headless tests/cafe/*-cafe.mjs --esm -s build/test --page-request-timeout 5000 --app-init-delay 8000 --app vite",
     "test:ava": "ava --timeout 2m tests/*-ava.mjs tests/*-ava-node.mjs",
     "cover": "c8 -x 'tests/**/*' --temp-directory build/tmp ava --timeout 2m tests/*-ava.mjs tests/*-ava-node.mjs && c8 report -r lcov -o build/coverage --temp-directory build/tmp",
     "docs": "documentation readme --section=API ./src/**/*.mjs",
@@ -33,29 +33,29 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "svelte-command": "^1.1.40",
-    "svelte-entitlement": "^1.2.52"
+    "svelte-command": "^1.1.42",
+    "svelte-entitlement": "^1.2.53"
   },
   "devDependencies": {
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/commit-analyzer": "^10.0.1",
     "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/release-notes-generator": "^11.0.1",
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
-    "ava": "^5.3.0",
-    "c8": "^7.13.0",
+    "@semantic-release/release-notes-generator": "^11.0.3",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "ava": "^5.3.1",
+    "c8": "^8.0.0",
     "documentation": "^14.0.2",
-    "mf-styling": "^1.7.56",
-    "npm-pkgbuild": "^11.8.6",
-    "semantic-release": "^21.0.2",
-    "stylelint": "^15.6.2",
+    "mf-styling": "^1.8.1",
+    "npm-pkgbuild": "^11.8.9",
+    "semantic-release": "^21.0.5",
+    "stylelint": "^15.9.0",
     "stylelint-config-standard": "^33.0.0",
-    "svelte": "^3.59.1",
-    "testcafe": "^2.6.0",
+    "svelte": "^4.0.0",
+    "testcafe": "^3.0.0",
     "vite": "^4.3.9"
   },
   "optionalDependencies": {
     "mf-hosting-cloudflare": "^1.0.5",
-    "mf-hosting-frontend": "^1.9.3"
+    "mf-hosting-frontend": "^1.9.5"
   },
   "repository": {
     "type": "git",

package/src/attribute.mjs

@@ -53,9 +53,11 @@ export function* tokens(string) {
           break;
         }
 
+      case ".":
       case "+":
       case "-":
-      case ".":
+      case "*":
+      case "/":
       case "(":
       case ")":
       case "[":
@@ -119,7 +121,9 @@ export function setAttribute(object, name, value) {
     }
   }
 
-  lastObject[lastKey] = value;
+  if (lastKey) {
+    lastObject[lastKey] = value;
+  }
 }
 
 /**

package/src/index.svelte

@@ -55,5 +55,6 @@
     SORT_DESCENDING
   } from "./sorting.mjs";
   export { filter } from "./filter.mjs";
+  export { Pagination, pageNavigation } from "./pagination.mjs";
   export { initializeServiceWorker } from "./service-worker.mjs";
 </script>

package/src/pagination.mjs

@@ -0,0 +1,106 @@
+/**
+ * Pagination support store.
+ */
+export class Pagination {
+  subscriptions = new Set();
+  data;
+  itemsPerPage;
+  #page = 0;
+
+  constructor(source, itemsPerPage = 10) {
+    this.data = [...source];
+    this.itemsPerPage = itemsPerPage;
+  }
+
+  /**
+   * Set current page
+   * @param {number} n
+   */
+  set page(n) {
+    if (this.#page !== n && n > 0 && n <= this.numberOfPages) {
+      this.#page = n;
+      this.subscriptions.forEach(subscription => subscription(this));
+    }
+  }
+
+  /**
+   * @return {number} current page
+   */
+  get page() {
+    return this.#page;
+  }
+
+  subscribe(s) {
+    this.subscriptions.add(s);
+
+    s(this);
+
+    return () => this.subscriptions.delete(s);
+  }
+
+  get numberOfPages() {
+    return this.data.length / this.itemsPerPage;
+  }
+
+  *items() {
+    const n = this.page;
+
+    for (const item of this.data.slice(
+      n * this.itemsPerPage,
+      (n + 1) * this.itemsPerPage
+    )) {
+      yield item;
+    }
+  }
+
+  /**
+   * @see @link https://getbootstrap.com/docs/4.0/components/pagination
+   * @see @link https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination
+   */
+  get pageNavigationElement() {
+    const nav = document.createElement("nav");
+    nav.setAttribute("aria-label", "pagination");
+
+    this.subscribe(pg => {
+      const items = [];
+
+      function add(innerText, eh) {
+        const a = document.createElement("a");
+        a.setAttribute("href", "#");
+        a.innerText = innerText;
+        a.onclick = eh;
+        items.push(a);
+        return a;
+      }
+
+      add("<<", event => (this.page = 1));
+      add("<", event => (this.page = this.page - 1));
+
+      for (let n = 1; n < this.numberOfPages; n++) {
+        if (
+          this.numberOfPages > 10 &&
+          (n <= 3 ||
+            n > this.numberOfPages - 3 ||
+            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(">", event => (this.page = this.page + 1));
+      add(">>", event => (this.page = this.numberOfPages));
+
+      nav.replaceChildren(...items);
+    });
+
+    return nav;
+  }
+}
+
+export function pageNavigation(elem, pg) {
+  elem.replaceChildren(pg.pageNavigationElement);
+}