@humandialog/forms.svelte 1.6.3 → 1.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/vertical.toolbar.svelte +56 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humandialog/forms.svelte",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.4",
|
|
4
4
|
"description": "Basic Svelte UI components for Object Reef applications",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@playwright/test": "^1.28.1",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"prettier-plugin-svelte": "^2.8.1",
|
|
20
20
|
"svelte": "^3.54.0",
|
|
21
21
|
"svelte-check": "^2.9.2",
|
|
22
|
+
"svelte-spa-history-router": "^2.1.1",
|
|
22
23
|
"tailwindcss": "^3.3.3",
|
|
23
24
|
"tslib": "^2.4.1",
|
|
24
25
|
"typescript": "^4.9.3",
|
package/vertical.toolbar.svelte
CHANGED
|
@@ -90,7 +90,10 @@
|
|
|
90
90
|
const tab = {
|
|
91
91
|
key: key,
|
|
92
92
|
icon: ctab.icon,
|
|
93
|
-
onclick: (e) => on_navigator_tab_clicked(e, key)
|
|
93
|
+
onclick: (e) => on_navigator_tab_clicked(e, key),
|
|
94
|
+
mountObserver: ctab.mountObserver,
|
|
95
|
+
badgeObtainerAsync: ctab.badgeObtainerAsync,
|
|
96
|
+
badgeObtainer: ctab.badgeObtainer
|
|
94
97
|
}
|
|
95
98
|
|
|
96
99
|
tabs.push(tab);
|
|
@@ -388,6 +391,26 @@
|
|
|
388
391
|
newGroupParams.name = '';
|
|
389
392
|
newGroupModalVisible = false;
|
|
390
393
|
}
|
|
394
|
+
|
|
395
|
+
function mountNavigator(node, tab)
|
|
396
|
+
{
|
|
397
|
+
if(!tab.mountObserver)
|
|
398
|
+
return;
|
|
399
|
+
|
|
400
|
+
const onDestroy = tab.mountObserver(rerenderTabs)
|
|
401
|
+
|
|
402
|
+
return {
|
|
403
|
+
destroy() {
|
|
404
|
+
if(onDestroy)
|
|
405
|
+
onDestroy()
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
function rerenderTabs()
|
|
411
|
+
{
|
|
412
|
+
tabs = [...tabs]
|
|
413
|
+
}
|
|
391
414
|
|
|
392
415
|
</script>
|
|
393
416
|
|
|
@@ -398,11 +421,41 @@
|
|
|
398
421
|
{#each tabs as tab}
|
|
399
422
|
{@const isSelected = $navKey == tab.key}
|
|
400
423
|
<button
|
|
401
|
-
class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
|
|
424
|
+
class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100 relative"
|
|
402
425
|
class:bg-orange-500={isSelected}
|
|
403
|
-
on:click={tab.onclick}
|
|
426
|
+
on:click={tab.onclick}
|
|
427
|
+
use:mountNavigator={tab}>
|
|
404
428
|
|
|
405
429
|
<Icon s="xl" component={tab.icon}/>
|
|
430
|
+
|
|
431
|
+
{#if !isSelected}
|
|
432
|
+
{#if tab.badgeObtainer}
|
|
433
|
+
{@const badge=tab.badgeObtainer()}
|
|
434
|
+
{#if badge > 0}
|
|
435
|
+
{#if badge > 9}
|
|
436
|
+
9+
|
|
437
|
+
{:else}
|
|
438
|
+
{badge}
|
|
439
|
+
{/if}
|
|
440
|
+
{/if}
|
|
441
|
+
{:else if tab.badgeObtainerAsync}
|
|
442
|
+
{#await tab.badgeObtainerAsync() then badge}
|
|
443
|
+
{#if badge > 0}
|
|
444
|
+
<div class="absolute
|
|
445
|
+
inline-flex items-center justify-center
|
|
446
|
+
w-5 h-5
|
|
447
|
+
text-[10px] font-bold text-white bg-red-500 border-2 border-white rounded-full bottom-2 end-0 dark:border-gray-900">
|
|
448
|
+
{#if badge > 9}
|
|
449
|
+
9+
|
|
450
|
+
{:else}
|
|
451
|
+
{badge}
|
|
452
|
+
{/if}
|
|
453
|
+
</div>
|
|
454
|
+
{/if}
|
|
455
|
+
{/await}
|
|
456
|
+
{/if}
|
|
457
|
+
{/if}
|
|
458
|
+
|
|
406
459
|
</button>
|
|
407
460
|
{/each}
|
|
408
461
|
</div>
|