svelte-common 4.19.4 → 4.19.7

package/README.md

@@ -61,7 +61,7 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.19.4",
+  "version": "4.19.7",
   "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.11",
+    "mf-styling": "^1.7.14",
     "npm-pkgbuild": "^10.14.8",
     "semantic-release": "^19.0.5",
     "stylelint": "^14.11.0",
     "stylelint-config-standard": "^28.0.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,20 +20,23 @@ export function toggleOrderBy(orderBy) {
 }
 
 /**
- * Add sortable toggle button to a node.
- * Synchronizes store value with node "aria-sort" attribute.
+ * Add sortable toggle button to a th node.
+ * Synchronizes store value with th nodes "aria-sort" attribute.
  * @param {Node} the header node
  * @param {WritableStore} to keep in sync with sorting properties
  */
 export function sortable(th, store) {
-  store.subscribe(orderBy =>
+  const storeSubscription = store.subscribe(orderBy =>
     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}`);
   button.setAttribute("class", "alter-sorting");
-
   button.onclick = () => {
     const orderBy = {};
 
@@ -50,9 +53,7 @@ export function sortable(th, store) {
           }
         }
 
-        if (sort === SORT_NONE) {
-          delete orderBy[peer.id];
-        } else {
+        if (sort !== SORT_NONE) {
           orderBy[peer.id] = sort;
         }
       }
@@ -61,6 +62,12 @@ export function sortable(th, store) {
   };
 
   th.appendChild(button);
+
+  return {
+    destroy() {
+      storeSubscription();
+    }
+  };
 }
 
 /**

package/src/util.mjs

@@ -96,7 +96,10 @@ function liveDuration(seconds) {
 */
 
 /**
- * Create a store where all the object keys are prefixed.
+ * Create a derived store where all the object keys are prefixed.
+ * ```
+ * { a: 1, b: 2 } -> { prefix_a: 1 prefix_b: 2 }
+ * ```
  * @param {WriteableStore} store
  * @param {string} prefix
  * @returns {WriteableStore}