@humandialog/forms.svelte 0.4.37 → 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
@@ -78,8 +79,25 @@ function toggle_expand(e) {
         </button>
 
         {#if operations.length == 3}
-            <small>todo</small>
-        {:else}
+            {@const thrid_operation = operations[2]}
+            <button class=" bg-transparent
+                            w-[55px] h-[55px] 
+                            fixed m-0 absolute bottom-[70px] right-[0px]
+                            
+                            flex items-center justify-center
+                            disable-dbl-tap-zoom"
+                            on:click|stopPropagation={(e) => {on_click(e, thrid_operation)}} >
+                <div class="    w-10 h-10
+                            text-white bg-zinc-500 hover:bg-zinc-500 
+                            font-medium rounded-full text-sm text-center shadow-md
+                            dark:bg-zinc-500 dark:hover:bg-zinc-500
+                            flex items-center justify-center">
+                    <div class="w-5 h-5">
+                        <svelte:component this={thrid_operation.icon}/>
+                    </div>
+                </div>
+            </button>
+        {:else if operations.length > 3}
             <button class=" bg-transparent
                             w-[55px] h-[55px] 
                             fixed m-0 absolute bottom-[70px] right-[0px]

package/components/list/internal/list.element.svelte

@@ -94,6 +94,7 @@ function activate_row(e, item2) {
       }
       n = n.parentElement;
     }
+    can_show_context_menu = false;
     if (can_show_context_menu && context_menu) {
       const pt = new DOMPoint(e.clientX, e.clientY);
       let context_operations = context_menu(item2);
@@ -213,7 +214,7 @@ async function edit_date(field, prop_idx) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
-<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent {selected_class} {focused_class}"
+<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
             on:contextmenu={on_contextmenu}
             role="menu"
             tabindex="-1">
@@ -239,7 +240,7 @@ async function edit_date(field, prop_idx) {
             <!--div class="flex flex-row justify-between text-xs flex-none w-1/2 sm:w-2/3"-->
             <div class="text-xs flex-none w-1/2 sm:w-2/3 grid-{definition.properties.length}">
                 {#each definition.properties as prop, prop_index}
-                    <p class="col-span-1 w-full mr-auto">
+                    <p class="col-span-1 w-full mr-auto mt-0.5">
                         {#if item[prop.a] || placeholder == prop.name}
                             <span role="gridcell" tabindex="0">
                                 {#if prop.type == rList_property_type.Date}

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.37",
+  "version": "0.4.39",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -52,7 +52,6 @@
   "exports": {
     "./package.json": "./package.json",
     "./components/Fab.svelte": "./components/Fab.svelte",
-    "./components/Fab2.svelte": "./components/Fab2.svelte",
     "./components/Floating_container.svelte": "./components/Floating_container.svelte",
     "./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
     "./components/button.svelte": "./components/button.svelte",

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}

package/components/Fab2.svelte

@@ -1,89 +0,0 @@
-<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
-let expanded = false;
-$:
-  update($page_toolbar_operations, $context_toolbar_operations);
-let operations = [];
-function update(...args) {
-  if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
-    operations = $context_toolbar_operations;
-  else
-    operations = $page_toolbar_operations;
-}
-function on_click(operation) {
-  if (!operation)
-    return;
-  if (!operation.action)
-    return;
-  let focused_item = null;
-  if ($context_items_store.focused)
-    focused_item = $context_items_store[$context_items_store.focused];
-  operation.action(focused_item);
-}
-function toggle_expand(e) {
-  expanded = !expanded;
-}
-</script>
-
-{#if operations && operations.length > 0}
-        {#if operations.length == 1}
-            {@const operation = operations[0]}
-            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                            font-medium rounded-full text-sm text-center shadow-md
-                            mr-2 mb-2 w-10 h-10 
-                            dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                            flex items-center justify-center
-                            disable-dbl-tap-zoom"
-                            on:click|stopPropagation={(e) => {on_click(operation)}} >
-                <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-            </button>
-        {:else}
-            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                            font-medium rounded-full text-sm text-center shadow-md
-                            mr-2 mb-2 w-10 h-10 
-                            dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                            flex items-center justify-center
-                            disable-dbl-tap-zoom"
-                            on:click|stopPropagation={toggle_expand}>
-                    <div class="w-5 h-5">
-                        <svg    xmlns="http://www.w3.org/2000/svg" 
-                                viewBox="0 0 192 512" 
-                                style=" stroke: currentColor;
-                                        fill: currentColor;
-                                        stroke-width: 0;
-                                        width: 100%;
-                                        height: auto;
-                                        max-height: 100%;">
-                            <path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" />
-                        </svg>
-                    </div>
-            </button>
-            {#if expanded}
-                <ul class="list-none m-0 absolute bottom-[60px] right-0">
-                    {#each operations as operation}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="flex flex-row px-1 py-0 justify-end group"
-                            on:click|stopPropagation={(e) => {on_click(operation)}}>
-                            <div>
-                                <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
-                            </div>
-                            <button class=" text-white bg-blue-700 group-hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                                            font-medium rounded-full text-sm text-center shadow-md
-                                            mr-1 mb-2 w-10 h-10 
-                                            dark:bg-blue-600 dark:group-hover:bg-blue-700 dark:focus:ring-blue-800
-                                            flex items-center justify-center
-                                            disable-dbl-tap-zoom">
-                                <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-                            </button>
-                        </li>
-                    {/each}
-                </ul>
-            {/if}
-        {/if}
-{/if}
-
-<style>
-
-.disable-dbl-tap-zoom {
-  touch-action: manipulation;
-}
-</style>

package/components/Fab2.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type Fab2Props = typeof __propDef.props;
-export type Fab2Events = typeof __propDef.events;
-export type Fab2Slots = typeof __propDef.slots;
-export default class Fab2 extends SvelteComponentTyped<Fab2Props, Fab2Events, Fab2Slots> {
-}
-export {};