svelte-common 4.13.4 → 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.13.4",
+  "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

@@ -6,7 +6,7 @@ export const SORT_OTHER = "other";
 export const orderByCycle = {
   [SORT_NONE]: SORT_ASCENDING,
   [SORT_ASCENDING]: SORT_DESCENDING,
-  [SORT_DESCENDING]: SORT_NONE
+  [SORT_DESCENDING]: SORT_ASCENDING
 };
 
 /**
@@ -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);
 }
 
 /**
@@ -77,21 +74,47 @@ export function sorter(sortBy, getters = {}) {
         case SORT_ASCENDING:
           return (a, b) => {
             const av = getter(a);
+            const bv = getter(b);
+            if (av === undefined) {
+              return -1;
+            }
+            if (bv === undefined) {
+              return 1;
+            }
+
             if (typeof av === "string") {
-              const bv = getter(b);
               return typeof bv === "string" ? av.localeCompare(bv) : 1;
             }
-            return -1;
+            if (av instanceof Date) {
+              const avt = av.getTime();
+              const bvt = bv.getTime();
+              return avt > bvt ? 1 : avt === bvt ? 0 : -1;
+            }
+
+            return av > bv ? 1 : av == bv ? 0 : -1;
           };
 
         case SORT_DESCENDING:
           return (b, a) => {
             const av = getter(a);
+            const bv = getter(b);
+            if (av === undefined) {
+              return -1;
+            }
+            if (bv === undefined) {
+              return 1;
+            }
+
             if (typeof av === "string") {
-              const bv = getter(b);
               return typeof bv === "string" ? av.localeCompare(bv) : 1;
             }
-            return -1;
+            if (av instanceof Date) {
+              const avt = av.getTime();
+              const bvt = bv.getTime();
+              return avt > bvt ? 1 : avt === bvt ? 0 : -1;
+            }
+
+            return av > bv ? 1 : av == bv ? 0 : -1;
           };
       }
     }