svelte-common 4.19.20 → 4.21.0

package/README.md

@@ -38,6 +38,8 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
     *   [Parameters](#parameters-4)
 *   [keyPrefixStore](#keyprefixstore)
     *   [Parameters](#parameters-5)
+*   [getAttribute](#getattribute)
+    *   [Parameters](#parameters-6)
 
 ## filter
 
@@ -108,6 +110,18 @@ Create a derived store where all the object keys are prefixed.
 
 Returns **WriteableStore** 
 
+## getAttribute
+
+Deliver attribute value.
+The name may be a property path like 'a.b.c'.
+
+### Parameters
+
+*   `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+*   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+
+Returns **any** value associated with the given property name
+
 # install
 
 With [npm](http://npmjs.org) do:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.19.20",
+  "version": "4.21.0",
   "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.3.1",
+    "@sveltejs/vite-plugin-svelte": "^1.4.0",
     "ava": "^5.1.0",
     "documentation": "^14.0.0",
     "mf-styling": "^1.7.27",
-    "npm-pkgbuild": "^10.15.17",
+    "npm-pkgbuild": "^10.15.18",
     "semantic-release": "^19.0.5",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-standard": "^29.0.0",
-    "svelte": "^3.53.1",
+    "svelte": "^3.54.0",
     "testcafe": "^2.1.0",
-    "vite": "^3.2.4"
+    "vite": "^3.2.5"
   },
   "optionalDependencies": {
     "mf-hosting": "^1.7.9"

package/src/components/Tab.svelte

@@ -8,11 +8,10 @@
   tabs.tab[id] = { header, content };
 </script>
 
-{#if false}
   <div bind:this={header}>
     <slot name="header" />
   </div>
-
+  {#if tabs.current === id}
   <div bind:this={content}>
     <slot />
   </div>

package/src/components/Tabs.svelte

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

package/src/filter.mjs

@@ -1,3 +1,5 @@
+import { getAttribute } from "./util.mjs";
+
 /**
  * Generate filter function
  * @param {Object} filterBy
@@ -7,9 +9,9 @@
 export function filter(filterBy, getters = {}) {
   if (filterBy) {
     const filters = Object.entries(filterBy).map(([key, value]) => {
-      const getter = getters[key] || (object => object && object[key]);
+      const getter = getters[key] || getAttribute;
       return a => {
-        const av = getter(a);
+        const av = getter(a, key);
 
         if (value instanceof RegExp) {
           return value.test(av);

package/src/sorting.mjs

@@ -1,3 +1,5 @@
+import { getAttribute } from "./util.mjs";
+
 export const SORT_NONE = "none";
 export const SORT_ASCENDING = "ascending";
 export const SORT_DESCENDING = "descending";
@@ -81,7 +83,7 @@ export function sortable(th, store) {
 export function sorter(sortBy, getters = {}) {
   if (sortBy) {
     for (const [key, value] of Object.entries(sortBy)) {
-      const getter = getters[key] || (object => object[key]);
+      const getter = getters[key] || getAttribute;
 
       let rev = 1;
 
@@ -90,10 +92,9 @@ export function sorter(sortBy, getters = {}) {
           rev = -1;
 
         case SORT_ASCENDING:
-
           return (a, b) => {
-            let av = getter(a);
-            let bv = getter(b);
+            let av = getter(a, key);
+            let bv = getter(b, key);
 
             if (av === undefined) {
               return bv === undefined ? 0 : -rev;

package/src/util.mjs

@@ -164,3 +164,63 @@ export function keyPrefixStore(store, prefix) {
     }
   };
 }
+
+/**
+ * Split property path into tokens
+ * @param {string} string 
+ * @return {Iterator<string>}
+ */
+ function* tokens(string) {
+  let identifier = "";
+
+  for (const c of string) {
+    switch (c) {
+      case ".":
+      case "[":
+      case "]":
+        if (identifier.length) {
+          yield identifier;
+          identifier = "";
+        }
+        yield c;
+        break;
+      default:
+        identifier += c;
+    }
+  }
+
+  if (identifier.length) {
+    yield identifier;
+  }
+}
+
+/**
+ * Deliver attribute value.
+ * The name may be a property path like 'a.b.c'.
+ * @param {Object} object
+ * @param {string} name
+ * @returns {any} value associated with the given property name
+ */
+export function getAttribute(object, name) {
+  if (object && object[name] !== undefined) {
+    return object[name];
+  }
+
+  for (const token of tokens(name)) {
+    switch (token) {
+      case ".":
+      case "[":
+      case "]":
+        break;
+
+      default:
+        if (object === undefined) {
+          break;
+        }
+
+        object = object[token];
+    }
+  }
+
+  return object;
+}