@humandialog/forms.svelte 0.4.8 → 0.4.9

package/components/Floating_container.svelte

@@ -27,8 +27,10 @@ function focus_first_element() {
   console.log(focusable);
   focusable.focus();
 }
-function on_focus_out() {
-  hide();
+function on_focus_out(e) {
+  if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
+  } else
+    hide();
 }
 </script>
 
@@ -38,6 +40,6 @@ function on_focus_out() {
         on:focusout={on_focus_out}
         bind:this={root_element}>
     <button class="w-0 h-0 fixed bg-transparent " bind:this={invisible_button}></button>
-    <svelte:component this={toolbar} {...props}/>
+    <svelte:component this={toolbar} {...props} hide={() => hide()}/>
 </div>
 

package/components/Grid.menu.svelte

@@ -2,9 +2,9 @@
     import {context_items_store} from '..'
 
     export let operations = []
-
-    $: grid_cols = init(operations);
+    export let hide = undefined;
     
+    $: grid_cols = init(operations);
 
     function init(operations)
     {
@@ -94,7 +94,9 @@
 
     function execute_action(e, operation)
     {
-        
+        if(hide != undefined)
+            hide();
+
         if(!operation)
             return;
 
@@ -105,7 +107,6 @@
         if($context_items_store.focused)
             context_item = $context_items_store[$context_items_store.focused]
         
-        
         operation.action(context_item);
     }
 
@@ -119,7 +120,7 @@
             
             <button class=" py-2.5 px-5 {col}
                             text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
-                            bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700
+                            bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
                             border rounded border-gray-200 dark:border-gray-600 focus:outline-none
                             inline-flex items-center justify-center"
                             on:click={(e) => {execute_action(e, operation)}}>

package/components/Grid.menu.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
+    hide?: any;
     operations?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -13,6 +14,7 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        hide?: any;
         operations?: any[] | undefined;
     };
     events: {

package/components/menu.js

@@ -6,8 +6,9 @@ let toolbar_component = null;
 export function show_menu(x, y, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!!!menu_element) {
+        let app_div = document.getElementById("__hd_svelte_layout_root");
         menu_comopnent = new Menu({
-            target: document.body,
+            target: app_div,
             props: {}
         });
         menu_comopnent.show(x, y, operations);
@@ -20,8 +21,9 @@ export function show_menu(x, y, operations) {
 export function show_floating_toolbar(x, y, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!!!floating_container) {
+        let app_div = document.getElementById("__hd_svelte_layout_root");
         toolbar_component = new Floating_container({
-            target: document.body,
+            target: app_div,
             props: {}
         });
         toolbar_component.show(x, y, toolbar, props);
@@ -32,6 +34,5 @@ export function show_floating_toolbar(x, y, toolbar, props = {}) {
         console.error('what now?');
 }
 export function show_grid_menu(x, y, operations) {
-    console.log('show_grid_menu', operations);
     show_floating_toolbar(x, y, Grid, { operations: operations });
 }

package/desk.svelte

@@ -11,7 +11,9 @@
             auto_hide_sidebar,
             has_selected_item,
             dark_mode_store,
-            data_tick_store } from './stores.js'
+            data_tick_store,
+            set_default_tools_visible,
+            set_dark_mode_default } from './stores.js'
     
     import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
 
@@ -23,6 +25,26 @@
     let lg_content_area_horizontal_dim = ""
     
     let visible_sidebar = "*"
+
+    if(layout.dark != undefined)
+    {
+        console.log('layout.dark', layout.dark)
+
+        if(layout.dark.optional)
+            layout.mainToolbar.darkMode = true;
+
+        if(layout.dark.default)
+            set_dark_mode_default(layout.dark.default)
+    }
+
+    if(layout.operations != undefined)
+    {
+        if(layout.operations.optional)
+            layout.mainToolbar.operations = true;
+
+        if(layout.operations.default)
+            set_default_tools_visible(layout.operations.default)
+    }
     
     $: { visible_sidebar = $main_sidebar_visible_store
         
@@ -113,7 +135,7 @@
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
 
 <AuthorizedView>
-    <div class="{$dark_mode_store}">
+    <div id="__hd_svelte_layout_root" class="{$dark_mode_store}">
         <div class="bg-white dark:bg-gray-900 dark:text-white      min-h-screen h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->

package/operations.svelte

@@ -37,7 +37,12 @@ function on_click(e, operation) {
 <div class="bg-slate-100 w-full h-10 dark:bg-slate-800 overflow-x-clip overflow-y-hidden py-0 text-xs  flex flex-row">
     
     {#each operations as operation}
-        <button type="button" class="py-2.5 px-5 text-xs font-medium text-gray-900 bg-slate-100 hover:bg-slate-200 border-r border-gray-200 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"
+        <button type="button" 
+                class="py-2.5 px-5 
+                text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white 
+                bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
+                border-r border-gray-200 focus:outline-none dark:border-gray-600
+                inline-flex items-center"
                 on:click={(e) => {on_click(e, operation)}}>
             <div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
             <span class="ml-1">{operation.caption}</span>

package/package.json

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

package/stores.d.ts

@@ -1,5 +1,7 @@
 export function has_selected_item(): boolean;
 export function has_data_item(): boolean;
+export function set_dark_mode_default(value: any): void;
+export function set_default_tools_visible(value: any): void;
 export function restore_defults(): void;
 export function toggle_sidebar(index: any): void;
 export function auto_hide_sidebar(): void;

package/stores.js

@@ -21,19 +21,53 @@ export function has_data_item()
 }
 
 
-export const dark_mode_store = writable( (localStorage.dark_mode) || '')
+let has_saved_dark_mode = false;
+function create_dark_mode_store()
+{
+    if(localStorage.dark_mode != undefined)
+        has_saved_dark_mode = true;
+    else
+        has_saved_dark_mode = false;
+
+    return writable( (localStorage.dark_mode) || '')
+}
+
+export const dark_mode_store = create_dark_mode_store();
 dark_mode_store.subscribe( (value) => {  localStorage.dark_mode = value } );
 
-export const main_sidebar_visible_store = writable((sessionStorage.main_sidebar_visible_store) || '*');
-main_sidebar_visible_store.subscribe( (value) => { sessionStorage.main_sidebar_visible_store = value });
+export function set_dark_mode_default(value)
+{
+    if(!has_saved_dark_mode)
+        dark_mode_store.set(value ? 'dark' : '')
+}
+
+export const main_sidebar_visible_store = writable((localStorage.main_sidebar_visible_store) || '*');
+main_sidebar_visible_store.subscribe( (value) => { localStorage.main_sidebar_visible_store = value });
 
 export let previously_visible_sidebar = "";
 
-export const tools_visible_store = writable ((sessionStorage.tools_visible_store && sessionStorage.tools_visible_store == 'true') || false);
-tools_visible_store.subscribe( (value) => { sessionStorage.tools_visible_store = (value ? 'true' : '') } );
+let has_saved_tools_visible = false;
+function create_tools_visible_store()
+{
+    if(localStorage.tools_visible_store != undefined)
+        has_saved_tools_visible = true;
+    else
+        has_saved_tools_visible = false;
+
+    return writable ((localStorage.tools_visible_store && localStorage.tools_visible_store == 'true') || false);
+}
+
+export const tools_visible_store = create_tools_visible_store();
+tools_visible_store.subscribe( (value) => { localStorage.tools_visible_store = (value ? 'true' : '') } );
+
+export function set_default_tools_visible(value)
+{
+    if(!has_saved_tools_visible)
+        tools_visible_store.set(value)
+}
 
-export const bottom_bar_visible_store = writable( (sessionStorage.bottom_bar_visible_store && sessionStorage.bottom_bar_visible_store == 'true') || false);
-bottom_bar_visible_store.subscribe( (value) => { sessionStorage.bottom_bar_visible_store = (value ? 'true' : '') } );
+export const bottom_bar_visible_store = writable( (localStorage.bottom_bar_visible_store && localStorage.bottom_bar_visible_store == 'true') || false);
+bottom_bar_visible_store.subscribe( (value) => { localStorage.bottom_bar_visible_store = (value ? 'true' : '') } );
 
 export const right_sidebar_visible_store = writable(false)
 export const visible_property_tab_store = writable('');