@humandialog/forms.svelte 0.4.39 → 0.4.41

package/components/Fab.svelte

@@ -135,7 +135,7 @@ function toggle_expand(e) {
                                             disable-dbl-tap-zoom">
                                 <div class="    w-[55px] h-[55px]
                                                 text-white bg-zinc-500 group-hover:bg-zinc-500 
-                                                dark:bg-zinc-500 dark:group-hover:bg-blue-700
+                                                dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                                 font-medium rounded-full text-sm text-center shadow-md
                                                 flex items-center justify-center">
                                     <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>

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

@@ -82,31 +82,41 @@ function edit(e) {
 export function activate() {
   activate_row(null, item);
 }
-function activate_row(e, item2) {
-  if (is_row_active) {
-    let can_show_context_menu = true;
-    let n = e.target;
-    while (n) {
-      let is_in_cell = n.getAttribute("role") == "gridcell";
-      if (is_in_cell) {
-        can_show_context_menu = false;
-        break;
-      }
-      n = n.parentElement;
+function edit_row_property(e, part) {
+  if (!is_row_active)
+    return;
+  let click_on_empty_space = true;
+  let n = e.target;
+  while (n) {
+    let is_in_cell = n.getAttribute("role") == "gridcell";
+    if (is_in_cell) {
+      click_on_empty_space = false;
+      break;
     }
-    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);
-      if (context_operations !== null) {
-        if (typeof context_operations === "object") {
-          if (Array.isArray(context_operations))
-            show_menu(pt, context_operations);
-          else if (context_operations.grid)
-            show_grid_menu(pt, context_operations.grid);
-        }
+    n = n.parentElement;
+  }
+  let can_show_context_menu = click_on_empty_space;
+  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(item);
+    if (context_operations !== null) {
+      if (typeof context_operations === "object") {
+        if (Array.isArray(context_operations))
+          show_menu(pt, context_operations);
+        else if (context_operations.grid)
+          show_grid_menu(pt, context_operations.grid);
       }
     }
+  } else if (click_on_empty_space) {
+    if (part == "top" && !definition.title_readonly)
+      force_editing("Title");
+    else if (part == "bottom" && !definition.summary_readonly)
+      force_editing("Summary");
+  }
+}
+function activate_row(e, item2) {
+  if (is_row_active) {
   }
   activate_item("props", item2, toolbar_operations(item2));
   if (e)
@@ -222,7 +232,7 @@ async function edit_date(field, prop_idx) {
     <slot name="left" element={item}/>
     
     <div class="ml-3 w-full py-1" use:selectable={item} on:click={(e) => {activate_row(e, item)}} role="row" tabindex="0">
-        <div class="flex flex-row">
+        <div class="flex flex-row" on:click={(e) => edit_row_property(e, 'top')}>
             <p class="font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
                 {#if definition.title_readonly}
                 <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"> 
@@ -279,7 +289,7 @@ async function edit_date(field, prop_idx) {
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <p class="text-xs text-slate-400" style="min-height: 1rem;">
+            <p class="text-xs text-slate-400" style="min-height: 1rem;"  on:click={(e) => edit_row_property(e, 'bottom')}>
                 {#if definition.summary_readonly}
                     <span   id={element_id} role="gridcell" tabindex="0">
                         {item[summary]}

package/components/list/list.svelte

@@ -1,5 +1,5 @@
-<script>import { setContext, getContext, afterUpdate, tick } from "svelte";
-import { data_tick_store, context_items_store, context_types_store } from "../../stores";
+<script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
+import { data_tick_store, context_items_store, context_types_store, page_title } from "../../stores";
 import { activate_item, get_active, clear_active_item, parse_width_directive } from "../../utils";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
@@ -133,8 +133,8 @@ export function edit(element, property_name) {
 
 
 {#if title}
-    <p class="mt-3 uppercase text-sm text-center">{title}</p>
-    <hr class="w-full">
+    <p class="hidden sm:block mt-3 uppercase text-sm text-center">{title}</p>
+    <hr class="hidden sm:block w-full">
 {/if}
 
 <!--div class="w-full h-full overflow-y-auto"-->

package/components/sidebar/sidebar.brand.svelte

@@ -3,14 +3,18 @@
     export let href = "/";
     export let img = "";
 
+    let user_class = $$props.class ?? "";
+
 </script>
 
-<a href={href} class="flex items-center pl-2.5 mb-5">
-    {#if img}
-        <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
-    {/if}
+<section class={user_class}>
+    <a href={href} class="flex items-center pl-2.5 mb-5">
+        {#if img}
+            <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
+        {/if}
 
-    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-        <slot/>
-    </span>
-</a>
+        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+            <slot/>
+        </span>
+    </a>
+</section>

package/components/sidebar/sidebar.brand.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  SidebarEvents */
 /** @typedef {typeof __propDef.slots}  SidebarSlots */
 export default class Sidebar extends SvelteComponentTyped<{
+    [x: string]: any;
     img?: string | undefined;
     href?: string | undefined;
 }, {
@@ -16,6 +17,7 @@ export type SidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         img?: string | undefined;
         href?: string | undefined;
     };

package/components/sidebar/sidebar.item.svelte

@@ -79,18 +79,17 @@ function on_show_menu(e) {
         on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
-        class="     p-2 border border-transparent rounded-lg
+        class="     border border-transparent rounded-lg
                     text-base font-normal 
-                    text-gray-900 hover:bg-gray-100  
-                    dark:text-white dark:hover:bg-gray-700 {user_class}
+                    text-gray-900 sm:hover:bg-gray-100  
+                    dark:text-white sm:dark:hover:bg-gray-700 {user_class}
                     flex flex-row justify-between"
         class:bg-gray-200={active}
         class:dark:bg-gray-700={active}
-        use:selectable_if_needed={selectable}
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked} 
-                class="inline-flex items-center group">
+                class="flex-1 m-2 inline-flex items-center group">
                 {#if icon}
                     <Icon size={5} component={icon}/>
                 {/if}
@@ -99,12 +98,15 @@ function on_show_menu(e) {
                     <slot/>
                 </span>
             </a>
-            
-            {#if can_show_context_menu(selectable, context_data)}
-                <button class="w-4 h-4 mt-1" on:click={on_show_menu}>
-                    <FaBars/>
-                </button>
-            {/if}
+
+            <section    class="flex-0 w-20 h-10 flex-0 flex flex-row"
+                        use:selectable_if_needed={selectable}>
+                {#if can_show_context_menu(selectable, context_data)}
+                    <button class="w-4 h-4 mt-3 mr-2 ml-auto" on:click={on_show_menu}>
+                        <FaBars/>
+                    </button>
+                {/if}
+            </section>
         </div>
 </li>
 

package/horizontal.toolbar.svelte

@@ -23,7 +23,13 @@
         bottom_bar_visible_store,
         previously_visible_sidebar,
         main_sidebar_visible_store,
-        sidebar_left_pos
+        sidebar_left_pos,
+
+		page_title,
+
+		nav_titles
+
+
     } from "./stores.js";
     import Icon from './components/icon.svelte';
     import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
@@ -63,6 +69,20 @@
         }
     }
 
+    let title = ''
+    $:{
+        if($main_sidebar_visible_store == '*')
+            title = $page_title;
+        else
+        {
+            let nav_title = $nav_titles[$main_sidebar_visible_store];
+            if(nav_title != undefined)
+                title = nav_title
+            else
+                title = ''
+        }
+    }
+
     function toggle_navigator(e)
     {
         if(tabs.length == 1)
@@ -176,19 +196,27 @@
 
 </script>
 
-<div class="ml-auto flex h-10">        
-    <button
-        class="h-full w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
-        on:click={show_options}>
+<div class="flex flex-row w-full">
+    <div class="flex-none left-0 flex h-10">
+        <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
+            <Icon size={6} component={icon}/>
+        </button>
+    </div>
 
-        <Icon size={4} component={FaCog} />
-    </button>
-</div>
+    <div class="grow">
+        
+        <div class="block sm:hidden mt-3 uppercase text-sm text-center">{@html title}</div>
+    </div>
+
+    <div class="flex-none ml-auto flex h-10">        
+        <button
+            class="h-full w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
+            on:click={show_options}>
+
+            <Icon size={4} component={FaCog} />
+        </button>
+    </div>
 
-<div class="right-0 flex h-10">
-    <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
-        <Icon size={6} component={icon}/>
-    </button>
 </div>
 
 {#if tabs.length > 1 &&  $main_sidebar_visible_store != "*"}

package/index.d.ts

@@ -38,6 +38,6 @@ export { default as ListStaticProperty } from './components/list/list.static.sve
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
-export { data_tick_store, has_selected_item, has_data_item } from "./stores";
+export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores';
 export { inform_modification, inform_item, push_changes } from './updates';

package/index.js

@@ -44,6 +44,6 @@ export { default as ListStaticProperty } from './components/list/list.static.sve
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
-export { data_tick_store, has_selected_item, has_data_item } from "./stores";
+export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores'; // tmp
 export { inform_modification, inform_item, push_changes } from './updates'; // tmp

package/package.json

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

package/page.svelte

@@ -6,7 +6,8 @@
         context_types_store,
         context_info_store,
         context_toolbar_operations,
-        page_toolbar_operations     } from './stores.js'
+        page_toolbar_operations,
+        page_title     } from './stores.js'
     
     //import {chnages} from './utils.js'
 
@@ -21,6 +22,7 @@
     
     export let toolbar_operations = undefined;
     export let clears_context = '';
+    export let title = '';
 
     
     switch (c) {
@@ -36,12 +38,15 @@
 
     onMount(() => {
             if(toolbar_operations != undefined && Array.isArray(toolbar_operations))
-            {
                 $page_toolbar_operations = [...toolbar_operations]
-                return () => { $page_toolbar_operations = [] }
+
+            $page_title = title;
+
+            return () => 
+            { 
+                $page_toolbar_operations = [] 
+                $page_title = ''
             }
-            else
-                return () => {}
     })
 
     setContext('ctx', context)

package/page.svelte.d.ts

@@ -11,6 +11,7 @@ export default class Page extends SvelteComponentTyped<{
     in_context?: string | undefined;
     toolbar_operations?: any;
     clears_context?: string | undefined;
+    title?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -32,6 +33,7 @@ declare const __propDef: {
         in_context?: string | undefined;
         toolbar_operations?: any;
         clears_context?: string | undefined;
+        title?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/stores.d.ts

@@ -1,3 +1,4 @@
+export function set_navigator_title(key: any, title: any): void;
 export function has_selected_item(): boolean;
 export function has_data_item(): boolean;
 export function set_dark_mode_default(value: any): void;
@@ -24,6 +25,8 @@ export const context_types_store: import("svelte/store").Writable<{
 }>;
 export const context_toolbar_operations: import("svelte/store").Writable<never[]>;
 export const page_toolbar_operations: import("svelte/store").Writable<never[]>;
+export const page_title: import("svelte/store").Writable<string>;
+export const nav_titles: import("svelte/store").Writable<{}>;
 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;

package/stores.js

@@ -8,6 +8,15 @@ export const context_info_store = writable({data: '', sel: ''})
 export const context_types_store = writable({focused:'', data: null, sel: null})
 export const context_toolbar_operations = writable([]);
 export const page_toolbar_operations = writable([]);
+export const page_title = writable('');
+export const nav_titles = writable({});
+
+export function set_navigator_title(key, title)
+{
+    let titles = get(nav_titles);
+    titles[key] = title;
+    nav_titles.set(titles);
+}
 
 export function has_selected_item()
 {

package/tenant.members.svelte

@@ -70,8 +70,8 @@
             })
         }
 
-        fake_users = [];
-        add_fake_users(fake_users);
+        //fake_users = [];
+        //add_fake_users(fake_users);
 
         await fetch_details();
  
@@ -427,10 +427,10 @@
         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>
+    <!--a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a-->
 
-    {#if fake_users && fake_users.length > 0}
-    <List       objects={fake_users} 
+    {#if reef_users && reef_users.length > 0}
+    <List       objects={reef_users} 
                 title='Members' 
                 toolbar_operations={user_operations} 
                 context_menu={user_context_menu}

package/utils.js

@@ -166,6 +166,11 @@ export function editable(node, action)
         await tick();
         let range = document.createRange();
         range.selectNodeContents(node);
+        let end_offset = range.endOffset;
+        let end_container = range.endContainer;
+        range.setStart(end_container, end_offset)
+        range.setEnd(end_container, end_offset)
+        console.log('range rect: ', range.getBoundingClientRect())
         let sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);