svelte-common 4.15.0 → 4.15.1

package/README.md

@@ -32,6 +32,8 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
     *   [Parameters](#parameters-1)
 *   [sortable](#sortable)
     *   [Parameters](#parameters-2)
+*   [sorter](#sorter)
+    *   [Parameters](#parameters-3)
 
 ## initializeServiceWorker
 
@@ -58,13 +60,24 @@ Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G
 ## sortable
 
 Add sortable toggle to a node.
-Synchronizes store value with node sortable attribute.
+Synchronizes store value with node "aria-sort" attribute.
 
 ### Parameters
 
 *   `node` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** 
 *   `store`  
-*   `where` **Store** to keep in sync with sorting properties
+*   `to` **WritableStore** keep in sync with sorting properties
+
+## sorter
+
+Generate a sort function for a given sort by set.
+
+### Parameters
+
+*   `sortBy` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+*   `getters` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**  (optional, default `{}`)
+
+Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** sorter
 
 # install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.15.0",
+  "version": "4.15.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.2",
     "ava": "^4.3.1",
     "documentation": "^14.0.0",
-    "mf-styling": "^1.5.0",
+    "mf-styling": "^1.5.5",
     "npm-pkgbuild": "^10.14.8",
     "semantic-release": "^19.0.5",
     "stylelint": "^14.11.0",

package/src/sorting.mjs

@@ -20,35 +20,30 @@ export function toggleOrderBy(orderBy) {
 }
 
 /**
- * Add sortable toggle to a node.
+ * Add sortable toggle button to a node.
  * Synchronizes store value with node "aria-sort" attribute.
- * @param {Node} node
+ * @param {Node} th header node
  * @param {WritableStore} to keep in sync with sorting properties
  */
-export function sortable(node, store) {
-  node.setAttribute("aria-sort", SORT_NONE);
+export function sortable(th, store) {
+  const button = document.createElement("button");
+  const img = document.createElement("img");
+  button.appendChild(img);
 
-  store.subscribe(orderBy => {
-    for (const peer of node.parentElement.children) {
-      if (peer.getAttribute("aria-sort")) {
-        peer.setAttribute("aria-sort", orderBy[peer.id] || SORT_NONE);
-      }
-    }
-  });
+  store.subscribe(orderBy =>
+    th.setAttribute("aria-sort", orderBy[th.id] || SORT_NONE)
+  );
 
-  node.onclick = () => {
+  button.onclick = () => {
     const orderBy = {};
 
-    node.setAttribute(
-      "aria-sort",
-      toggleOrderBy(node.getAttribute("aria-sort"))
-    );
+    th.setAttribute("aria-sort", toggleOrderBy(th.getAttribute("aria-sort")));
 
-    for (const peer of node.parentElement.children) {
+    for (const peer of th.parentElement.children) {
       let sort = peer.getAttribute("aria-sort");
 
       if (sort) {
-        if (peer !== node) {
+        if (peer !== th) {
           if (sort !== SORT_NONE) {
             sort = SORT_NONE;
             peer.setAttribute("aria-sort", sort);
@@ -60,6 +55,8 @@ export function sortable(node, store) {
     }
     store.set(orderBy);
   };
+
+  th.appendChild(button);
 }
 
 /**