svelte-common 4.19.3 → 4.19.6

package/README.md

@@ -61,13 +61,14 @@ Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G
 
 ## sortable
 
-Add sortable toggle button with img element to a node.
+Add sortable toggle button to a node.
 Synchronizes store value with node "aria-sort" attribute.
 
 ### Parameters
 
-*   `th` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** header node
+*   `th`  
 *   `store`  
+*   `the` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** header node
 *   `to` **WritableStore** keep in sync with sorting properties
 
 ## sorter

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.19.3",
+  "version": "4.19.6",
   "publishConfig": {
     "access": "public"
   },
@@ -39,17 +39,17 @@
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@sveltejs/vite-plugin-svelte": "^1.0.4",
+    "@sveltejs/vite-plugin-svelte": "^1.0.5",
     "ava": "^4.3.3",
     "documentation": "^14.0.0",
-    "mf-styling": "^1.7.8",
+    "mf-styling": "^1.7.13",
     "npm-pkgbuild": "^10.14.8",
     "semantic-release": "^19.0.5",
     "stylelint": "^14.11.0",
     "stylelint-config-standard": "^28.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.0",
     "testcafe": "^2.0.0",
-    "vite": "^3.0.9"
+    "vite": "^3.1.0"
   },
   "optionalDependencies": {
     "mf-hosting": "^1.7.3"

package/src/components/Tab.svelte

@@ -3,7 +3,17 @@
 
   export let id;
 
+  let header, content;
   const tabs = getContext("TABS");
+  tabs.tab[id] = { header, content };
 </script>
 
-<slot />
+{#if false}
+  <div bind:this={header}>
+    <slot name="header" />
+  </div>
+
+  <div bind:this={content}>
+    <slot />
+  </div>
+{/if}

package/src/components/Tabs.svelte

@@ -1,9 +1,14 @@
 <script>
   import { setContext } from "svelte";
 
-  const tabs = {};
+  const tabs = { tab: {}};
 
   setContext("TABS", tabs);
 </script>
 
 <slot />
+
+{#each Object.entries(tabs.tab) as t}
+{t[0]}
+<svelte:component this={t[1].header}/>
+{/each}

package/src/sorting.mjs

@@ -20,7 +20,7 @@ export function toggleOrderBy(orderBy) {
 }
 
 /**
- * Add sortable toggle button with img element to a node.
+ * Add sortable toggle button to a node.
  * Synchronizes store value with node "aria-sort" attribute.
  * @param {Node} the header node
  * @param {WritableStore} to keep in sync with sorting properties
@@ -30,12 +30,13 @@ export function sortable(th, store) {
     th.setAttribute("aria-sort", orderBy[th.id] || SORT_NONE)
   );
 
+  if (!th.getAttribute("aria-sort")) {
+    th.setAttribute("aria-sort", SORT_NONE);
+  }
+
   const button = document.createElement("button");
   button.setAttribute("aria-label", `toggle sort of ${th.id}`);
-  const img = document.createElement("img");
-  //img.setAttribute("alt", "sorting order indicator");
-
-  button.appendChild(img);
+  button.setAttribute("class", "alter-sorting");
 
   button.onclick = () => {
     const orderBy = {};
@@ -53,9 +54,7 @@ export function sortable(th, store) {
           }
         }
 
-        if (sort === SORT_NONE) {
-          delete orderBy[peer.id];
-        } else {
+        if (sort !== SORT_NONE) {
           orderBy[peer.id] = sort;
         }
       }