@humandialog/forms.svelte 1.7.21 → 1.7.23

package/components/paginator.svelte

@@ -10,6 +10,13 @@
     let visiblePages = []
     $: update()
 
+    export function updateParams(p, allP)
+    {
+        pageNo = p
+        allPagesNo = allP
+        update()
+    }
+
     export function updatePageNo(p)
     {
         pageNo = p

package/components/paginator.svelte.d.ts

@@ -6,11 +6,13 @@ export default class Paginator extends SvelteComponentTyped<{
     allPagesNo: any;
     onPage: any;
     visiblePagesNo?: number | undefined;
+    updateParams?: ((p: any, allP: any) => void) | undefined;
     updatePageNo?: ((p: any) => void) | undefined;
     updateAllPagesNo?: ((allP: any) => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
+    get updateParams(): (p: any, allP: any) => void;
     get updatePageNo(): (p: any) => void;
     get updateAllPagesNo(): (allP: any) => void;
 }
@@ -24,6 +26,7 @@ declare const __propDef: {
         allPagesNo: any;
         onPage: any;
         visiblePagesNo?: number | undefined;
+        updateParams?: ((p: any, allP: any) => void) | undefined;
         updatePageNo?: ((p: any) => void) | undefined;
         updateAllPagesNo?: ((allP: any) => void) | undefined;
     };

package/desk.svelte

@@ -1,6 +1,7 @@
 <script>
     import HorizontalToolbar from './horizontal.toolbar.svelte'
     import VerticalToolbar from './vertical.toolbar.svelte'
+    import HorizontalNavigatorTabs from './horizontal.nav.tabs.svelte'
     import Configurable from './internal/configurable.content.svelte'
     import Operations from './operations.svelte'
     import Fab from './components/Fab.svelte'
@@ -109,6 +110,7 @@
     let vertical_toolbar_visibility = "hidden sm:block"
     let content_left = "left-0 sm:left-[40px]";
     let content_width = "w-screen  sm:w-[calc(100vw-40px)] ";
+    let horizontal_nav_tabs_visibility = "hidden"
                                 
     let content_top = ""
     let content_height = ""              
@@ -198,18 +200,25 @@
             vertical_toolbar_visibility = "hidden sm:block"
             content_left = "left-0 sm:left-[40px]";
             content_width = "w-screen  sm:w-[calc(100vw-40px)]";
+
+            horizontal_nav_tabs_visibility = "hidden"
             return false;
         }
         else
         {
             if(navIsVisible())
-            {
-                vertical_toolbar_visibility = "block"
-                content_left = "left-[50px]";
-                content_width = "w-[calc(100vw-50px)] ";
-                return true;
-            }
+                horizontal_nav_tabs_visibility = "block"
             else
+                horizontal_nav_tabs_visibility = "hidden"
+
+            //if(navIsVisible())
+            //{
+            //    vertical_toolbar_visibility = "block"
+            //    content_left = "left-[50px]";
+            //    content_width = "w-[calc(100vw-50px)] ";
+            //    return true;
+            //}
+            //else
             {
                 vertical_toolbar_visibility = "hidden sm:block"
                 content_left = "left-0 sm:left-[40px]";
@@ -384,6 +393,12 @@
                     </div>    
                 </div>
 
+                 <header class="{horizontal_nav_tabs_visibility}  fixed w-screen bottom-0 h-[50px] sm:h-[40px] z-20 shadow  shadow-stone-900/5 dark:shadow-none     overflow-auto" >
+                        <div class=" flex flex-row justify-between  h-full  bg-stone-950   text-stone-100 ">
+                            <HorizontalNavigatorTabs appConfig={layout}/>
+                        <div>
+                </header> 
+
                 <!--VerticalToolbar /-->
 
                 <!--#######################################################-->
@@ -557,5 +572,5 @@
 
 :global(body.dark) {
   --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23/var(--tw-bg-opacity));
+  background-color: rgb(12 10 9/var(--tw-bg-opacity));
 }</style>

package/horizontal.nav.tabs.svelte

@@ -0,0 +1,183 @@
+<script>
+    import {contextItemsStore,
+            context_info_store,
+            contextToolbarOperations,
+            data_tick_store,
+            navKey
+        } from "./stores.js";     
+    import Icon from './components/icon.svelte';
+    import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
+	import { navGetKey, navHide, navIsVisible, navShow, navToggle } from './utils';
+    
+    export let appConfig = undefined;
+    export let clearsContext = 'sel props'
+    
+    export let definedTabs = undefined
+    export let mainToolbarConfig = undefined
+    
+    let tabs = new Array();
+    let config = null;
+    
+    
+    let is_logged_in = false;
+    
+    $:  {
+        if(appConfig)
+        {
+            config = appConfig.mainToolbar;
+        }
+        else
+        {
+            config = mainToolbarConfig;
+        }
+
+        is_logged_in = $session.isActive;
+        
+        tabs = new Array();
+
+        if(definedTabs && Array.isArray(definedTabs) && definedTabs.length > 0)
+        {
+            tabs = [...definedTabs]
+        }
+        else
+        {
+            Object.keys(appConfig.sidebar).forEach( (key) =>    
+                { 
+                    const ctab = appConfig.sidebar[key];
+                    const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
+                    if(can_show)
+                    {
+                        const tab = {
+                            key: key,
+                            icon: ctab.icon,
+                            onclick: (e) => on_navigator_tab_clicked(e, key),
+                            mountObserver: ctab.mountObserver,
+                            badgeObtainerAsync: ctab.badgeObtainerAsync,
+                            badgeObtainer: ctab.badgeObtainer
+                        }
+
+                        tabs.push(tab); 
+                    }
+                });
+
+            // there is no current visible sidebar
+            if(navIsVisible())
+            {
+                const selectedNav = navGetKey()
+                if(tabs.every( (e) => e.key != selectedNav))
+                {
+                    if(tabs.length)
+                        navShow(tabs[0].key);
+                    else
+                        navHide();
+                }
+            }
+        }
+    }
+
+    function on_navigator_tab_clicked(e, key)
+    {
+        e.stopPropagation();    
+        navToggle(key);
+    }
+    
+
+    function clearSelection()
+    {
+        if (!clearsContext) return;
+
+		let contexts = clearsContext.split(' ');
+		contexts.forEach((c) => {
+			$contextItemsStore[c] = null;
+			$context_info_store[c] = '';
+		});
+
+		//e.stopPropagation();
+
+		$contextToolbarOperations = [];
+		$data_tick_store = $data_tick_store + 1;
+    }
+
+    function mountNavigator(node, tab)
+    {
+        if(!tab.mountObserver)
+            return;
+
+        const onDestroy = tab.mountObserver(rerenderTabs)
+
+        return {
+            destroy() {
+                if(onDestroy)
+                    onDestroy()
+            }
+        }
+    }
+
+    function rerenderTabs()
+    {
+        tabs = [...tabs]
+    }
+    
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<section class="no-print w-full" on:click={clearSelection}>
+    <div class="left-0 flex justify-around h-12">
+        {#each tabs as tab}
+            {@const isSelected = $navKey == tab.key}
+            <button
+                class="w-16 h-full flex justify-center items-center text-stone-300 hover:text-stone-100 relative"
+                class:bg-orange-500={isSelected}
+                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>
+
+    
+</section>
+
+    <!--Menu bind:this={menu}/-->
+
+
+
+<style>
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+</style>

package/horizontal.nav.tabs.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  HorizontalProps */
+/** @typedef {typeof __propDef.events}  HorizontalEvents */
+/** @typedef {typeof __propDef.slots}  HorizontalSlots */
+export default class Horizontal extends SvelteComponentTyped<{
+    appConfig?: any;
+    clearsContext?: string | undefined;
+    definedTabs?: any;
+    mainToolbarConfig?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HorizontalProps = typeof __propDef.props;
+export type HorizontalEvents = typeof __propDef.events;
+export type HorizontalSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appConfig?: any;
+        clearsContext?: string | undefined;
+        definedTabs?: any;
+        mainToolbarConfig?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.21",
+  "version": "1.7.23",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -27,7 +27,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.18",
+    "@humandialog/auth.svelte": "^1.8.19",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -166,6 +166,7 @@
     "./desk.svelte": "./desk.svelte",
     "./dialog.svelte": "./dialog.svelte",
     "./form.box.svelte": "./form.box.svelte",
+    "./horizontal.nav.tabs.svelte": "./horizontal.nav.tabs.svelte",
     "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",
     "./i18n-preprocess": "./i18n-preprocess.js",
     "./i18n": "./i18n.js",