@humandialog/forms.svelte 1.6.3 → 1.6.5

package/kicks.js

@@ -104,15 +104,12 @@ function checkKicks(informObservers=true)
     console.log(s.isActive, appId, tid)
     if(s.isActive && appId && tid)
     {
-        reef.fetch(`/dev/kicks?app_id=${appId}&tenant_id=${encodeURIComponent(tid)}&last_check=${lastCheckAt}`).then(res => {
+        const cloudAddr = reef.get_general_cloud_address()
+        reef.fetch(`${cloudAddr}/dev/kicks?app_id=${appId}&tenant_id=${encodeURIComponent(tid)}&last_check=${lastCheckAt}`).then(res => {
             if(res.ok)
             {
                 res.json().then( result =>
                 {
-                    // todo 
-                    //console.log('kicks:', result)  
-
-
                     let changedLabels = []
                     result.allKicks.forEach(current => {
                         

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -19,6 +19,7 @@
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
+    "svelte-spa-history-router": "^2.1.1",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
@@ -26,7 +27,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.14",
+    "@humandialog/auth.svelte": "^1.8.15",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",

package/vertical.toolbar.svelte

@@ -90,7 +90,10 @@
                         const tab = {
                             key: key,
                             icon: ctab.icon,
-                            onclick: (e) => on_navigator_tab_clicked(e, key)
+                            onclick: (e) => on_navigator_tab_clicked(e, key),
+                            mountObserver: ctab.mountObserver,
+                            badgeObtainerAsync: ctab.badgeObtainerAsync,
+                            badgeObtainer: ctab.badgeObtainer
                         }
 
                         tabs.push(tab); 
@@ -388,6 +391,26 @@
         newGroupParams.name = '';
         newGroupModalVisible = false;
     }
+
+    function mountNavigator(node, tab)
+    {
+        if(!tab.mountObserver)
+            return;
+
+        const onDestroy = tab.mountObserver(rerenderTabs)
+
+        return {
+            destroy() {
+                if(onDestroy)
+                    onDestroy()
+            }
+        }
+    }
+
+    function rerenderTabs()
+    {
+        tabs = [...tabs]
+    }
     
 </script>
 
@@ -398,11 +421,41 @@
         {#each tabs as tab}
             {@const isSelected = $navKey == tab.key}
             <button
-                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
+                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100 relative"
                 class:bg-orange-500={isSelected}
-                on:click={tab.onclick}>
+                on:click={tab.onclick}
+                use:mountNavigator={tab}>
                 
                 <Icon s="xl" component={tab.icon}/>
+
+                {#if !isSelected}
+                    {#if tab.badgeObtainer}
+                        {@const badge=tab.badgeObtainer()}
+                        {#if badge > 0}
+                            {#if badge > 9}
+                                9+
+                            {:else}
+                                {badge}
+                            {/if}
+                        {/if}
+                    {:else if tab.badgeObtainerAsync}
+                        {#await tab.badgeObtainerAsync() then badge}
+                            {#if badge > 0}
+                                <div class="absolute 
+                                            inline-flex items-center justify-center 
+                                            w-5 h-5 
+                                            text-[10px] font-bold text-white bg-red-500 border-2 border-white rounded-full bottom-2 end-0 dark:border-gray-900">
+                                    {#if badge > 9}
+                                        9+
+                                    {:else}
+                                        {badge}
+                                    {/if}
+                                </div>
+                            {/if}
+                        {/await}
+                    {/if}
+                {/if}
+
             </button>
         {/each}
     </div>