@humandialog/forms.svelte 0.4.38 → 0.4.39

package/components/Fab.svelte

@@ -7,6 +7,7 @@ $:
   update($page_toolbar_operations, $context_toolbar_operations);
 let operations = [];
 function update(...args) {
+  expanded = false;
   if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
     operations = $context_toolbar_operations;
   else

package/components/list/list.svelte

@@ -137,6 +137,7 @@ export function edit(element, property_name) {
     <hr class="w-full">
 {/if}
 
+<!--div class="w-full h-full overflow-y-auto"-->
 
 {#if items && items.length > 0 && !!item_key }
     {#each items as element, i (element[item_key])}
@@ -166,3 +167,5 @@ export function edit(element, property_name) {
                 bind:this={inserter}    />
 {/if}
 
+<!--/div-->
+

package/desk.svelte

@@ -13,7 +13,8 @@
             dark_mode_store,
             data_tick_store,
             set_default_tools_visible,
-            set_dark_mode_default } from './stores.js'
+            set_dark_mode_default,
+            sidebar_left_pos } from './stores.js'
     
     import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handle_select, is_device_smaller_than } from './utils'
@@ -186,11 +187,15 @@
             <!--#######################################################-->
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
+            {#if true}
+            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[40px]"}
+            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-40px)]"}
+
             <div  class="{main_side_panel_visibility}  
-                            left-[40px]  sm:left-[40px]
+                            {sidebar_left}  sm:left-[40px]
                             top-[40px]  sm:top-0 
                             h-[calc(100vh-40px)] sm:h-full {lg_main_sidebar_height}
-                            w-[calc(100vw-40px)] sm:w-[320px] 
+                            {sidebar_small_width} sm:w-[320px] 
                             z-20 overflow-x-hidden">
 
                 <div class=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-4 px-0">
@@ -199,6 +204,7 @@
                     </Configurable>
                 </div>
             </div>    
+            {/if}
 
             <section on:click|capture={auto_hide_sidebar}>
 

package/horizontal.toolbar.svelte

@@ -22,7 +22,8 @@
         tools_visible_store,
         bottom_bar_visible_store,
         previously_visible_sidebar,
-        main_sidebar_visible_store
+        main_sidebar_visible_store,
+        sidebar_left_pos
     } from "./stores.js";
     import Icon from './components/icon.svelte';
     import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
@@ -66,6 +67,7 @@
     {
         if(tabs.length == 1)
         {
+            $sidebar_left_pos = 0;
             toggle_sidebar(tabs[0]);
         }
         else
@@ -79,6 +81,7 @@
                     sidebar = previously_visible_sidebar;
             }
 
+            $sidebar_left_pos = 40;
             toggle_sidebar(sidebar)
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.38",
+  "version": "0.4.39",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",

package/stores.d.ts

@@ -27,6 +27,7 @@ export const page_toolbar_operations: import("svelte/store").Writable<never[]>;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;
+export let sidebar_left_pos: import("svelte/store").Writable<number>;
 export const tools_visible_store: import("svelte/store").Writable<any>;
 export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
 export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;

package/stores.js

@@ -46,6 +46,7 @@ export const main_sidebar_visible_store = writable((localStorage.main_sidebar_vi
 main_sidebar_visible_store.subscribe( (value) => { localStorage.main_sidebar_visible_store = value });
 
 export let previously_visible_sidebar = "";
+export let sidebar_left_pos = writable(0)
 
 let has_saved_tools_visible = false;
 function create_tools_visible_store()

package/tenant.members.svelte

@@ -42,6 +42,8 @@
     let reef_users = [];
     let new_reef_user_id = 1;
 
+    let fake_users;
+
     async function init()
     {
         reef_users = [];
@@ -68,6 +70,9 @@
             })
         }
 
+        fake_users = [];
+        add_fake_users(fake_users);
+
         await fetch_details();
  
     }
@@ -84,7 +89,11 @@
 
             handled_no++;
             if(handled_no == reef_users.length)
+            {
+                
+                
                 list?.update_objects(reef_users);
+            }
         } )
     }
 
@@ -294,6 +303,74 @@
         return !!s;
     }
 
+    function add_fake_users(reef_users)
+    {
+        const names = [
+            "Evangeline Burnett",
+            "Veronica Shaffer",
+            "Evan Moyer",
+            "Maisey Knox",
+            "Princess Taylor",
+            "Lilli Brown",
+            "Celine Terrell",
+            "Alexander Simmons",
+            "Leslie Rowland",
+            "Amira Reeves",
+            "Remi Parks",
+            "Daniela Holder",
+            "Sonny Watkins",
+            "Kiran Patton",
+            "Nadia O'Brien",
+            "Aine Lyons",
+            "Arran Mccoy",
+            "Aliya Hart",
+            "Zara Ross",
+            "Chad Ramirez",
+            "Aron Briggs",
+            "Nicole Hall",
+            "Mitchell Hendricks",
+            "Lila Chandler",
+            "Carter Padilla",
+            "Christian Thompson",
+            "Ishaq Smith",
+            "Sofia Blanchard",
+            "Taha Kelly",
+            "Jensen Huber",
+            "Jaya Hewitt",
+            "Hari Nielsen",
+            "Celeste Higgins",
+            "Soraya Farrell",
+            "Jacob Copeland",
+            "Robbie Soto",
+            "Krishan Kelley",
+            "Erica Ferrell",
+            "Moshe Valenzuela",
+            "Ahmed Mathews",
+            "Emilie Moore",
+            "Anisa Gamble",
+            "Esmee Haines",
+            "Francesca Fischer",
+            "Md Mcdaniel",
+            "Saarah Zamora",
+            "Tomos Ponce",
+            "Sonia Barrera",
+            "Pedro Hogan",
+            "Connie Weeks"
+        ]
+        const how_many = 50
+        for(let i=0; i<how_many; i++)
+        {
+            reef_users.push(
+                {
+                    [name_attrib]: names[i],
+                    [email_attrib]: 'u@fake.com',
+                    [ref_attrib]: `./User/${1000+i}`,
+                    __hd_internal_item_id: 1000+i
+                }
+            )
+        }
+    }
+
     async function on_new_user_requested()
     {
         if(!name_input?.validate())
@@ -328,6 +405,8 @@
             list?.update_objects(reef_users);
         }
 
+
+
         new_user.name = '';
         new_user.email = '';
         new_user.maintainer = false;
@@ -345,13 +424,13 @@
 </script>
 
 <Page   self={data_item} 
-        cl="!bg-white dark:!bg-slate-900 w-full h-full flex flex-col overflow-y-hidden overflow-x-hidden py-1 px-1 border-0" 
+        cl="!bg-white dark:!bg-slate-900 w-full h-full flex flex-col overflow-y-auto overflow-x-hidden py-1 px-1 border-0" 
         toolbar_operations={page_operations}
         clears_context='props sel'>
     <a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a>
 
-    {#if reef_users && reef_users.length > 0}
-    <List       objects={reef_users} 
+    {#if fake_users && fake_users.length > 0}
+    <List       objects={fake_users} 
                 title='Members' 
                 toolbar_operations={user_operations} 
                 context_menu={user_context_menu}