@humandialog/forms.svelte 0.4.7 → 0.4.9

package/components/Floating_container.svelte

@@ -3,15 +3,17 @@ let x;
 let y;
 let visible = false;
 let toolbar;
+let props = {};
 let root_element;
 let invisible_button;
 $:
   display = visible ? "fixed" : "hidden";
-export async function show(_x, _y, _toolbar) {
+export async function show(_x, _y, _toolbar, _props = {}) {
   x = _x;
   y = _y;
   visible = true;
   toolbar = _toolbar;
+  props = _props;
   await tick();
   focus_first_element();
 }
@@ -25,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>
 
@@ -36,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}/>
+    <svelte:component this={toolbar} {...props} hide={() => hide()}/>
 </div>
 

package/components/Floating_container.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        show?: ((_x: number, _y: number, _toolbar: any) => Promise<void>) | undefined;
+        show?: ((_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
         hide?: (() => void) | undefined;
     };
     events: {
@@ -13,7 +13,7 @@ export type FloatingContainerProps = typeof __propDef.props;
 export type FloatingContainerEvents = typeof __propDef.events;
 export type FloatingContainerSlots = typeof __propDef.slots;
 export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
-    get show(): (_x: number, _y: number, _toolbar: any) => Promise<void>;
+    get show(): (_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>;
     get hide(): () => void;
 }
 export {};

package/components/Grid.menu.svelte

@@ -0,0 +1,132 @@
+<script>
+    import {context_items_store} from '..'
+
+    export let operations = []
+    export let hide = undefined;
+    
+    $: grid_cols = init(operations);
+
+    function init(operations)
+    {
+        let cols_no = 0;
+        let current_row_cols_no = 0;
+
+        for(let i=0; i<operations.length; i++)
+        {
+            let operation = operations[i];
+            if(operation.separator)
+            {
+                if(current_row_cols_no > cols_no)
+                    cols_no = current_row_cols_no;
+
+                current_row_cols_no = 0;
+            }
+            else
+            {
+                let cols = operation.columns ?? 1;
+                current_row_cols_no += cols;
+            }
+        }
+
+        if(current_row_cols_no > cols_no)
+            cols_no = current_row_cols_no;
+
+        switch(cols_no)
+        {
+            case 1:
+                return "grid-cols-1";
+                
+            case 2:
+                return "grid-cols-2";
+                
+            case 3:
+                return "grid-cols-3";
+                
+            case 4:
+                return "grid-cols-4";
+                
+            case 5:
+                return "grid-cols-5";
+                
+            case 6:
+                return "grid-cols-6";
+                
+            case 7:
+                return "grid-cols-7";
+                
+            case 8:
+                return "grid-cols-8";
+                
+            case 9:
+                return "grid-cols-9";
+                
+            case 10:
+                return "grid-cols-10";
+        }
+    }
+
+    function col_span(n)
+    {
+        switch(n)
+        {
+        case 1:
+            return "col-span-1";
+        case 2:
+            return "col-span-2";
+        case 3:
+            return "col-span-3";
+        case 4:
+            return "col-span-4";
+        case 5:
+            return "col-span-5";
+        case 6:
+            return "col-span-6";
+        case 7:
+            return "col-span-7";
+        case 8:
+            return "col-span-8";
+        case 9:
+            return "col-span-9";
+        case 10:
+            return "col-span-10";
+        }
+    }
+
+    function execute_action(e, operation)
+    {
+        if(hide != undefined)
+            hide();
+
+        if(!operation)
+            return;
+
+        if(!operation.action)
+            return;
+
+        let context_item = null
+        if($context_items_store.focused)
+            context_item = $context_items_store[$context_items_store.focused]
+        
+        operation.action(context_item);
+    }
+
+</script>
+
+
+<div  class="grid gap-2 {grid_cols}">  
+    {#each operations as operation}
+        {#if !operation.separator}
+            {@const col=col_span(operation.columns ?? 1)}
+            
+            <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 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)}}>
+                <div>{operation.caption}</div>
+            </button>
+        {/if}
+    {/each}
+</div>
+

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @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>;
+}, {}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hide?: any;
+        operations?: any[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/inputbox.ltop.svelte.d.ts

@@ -6,8 +6,8 @@ export default class Inputbox extends SvelteComponentTyped<{
     label?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     typename?: string | undefined;
+    c?: string | undefined;
     a?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
@@ -28,8 +28,8 @@ declare const __propDef: {
         label?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         typename?: string | undefined;
+        c?: string | undefined;
         a?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;

package/components/menu.d.ts

@@ -1,2 +1,3 @@
 export declare function show_menu(x: number, y: number, operations: any): void;
-export declare function show_floating_toolbar(x: number, y: number, toolbar: any): void;
+export declare function show_floating_toolbar(x: number, y: number, toolbar: any, props?: {}): void;
+export declare function show_grid_menu(x: number, y: number, operations: any): void;

package/components/menu.js

@@ -1,12 +1,14 @@
 import Menu from './contextmenu.svelte';
 import Floating_container from './Floating_container.svelte';
+import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 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);
@@ -16,17 +18,21 @@ export function show_menu(x, y, operations) {
     else
         console.error('what now?');
 }
-export function show_floating_toolbar(x, y, toolbar) {
+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);
+        toolbar_component.show(x, y, toolbar, props);
     }
     else if (toolbar_component)
-        toolbar_component.show(x, y, toolbar);
+        toolbar_component.show(x, y, toolbar, props);
     else
         console.error('what now?');
 }
+export function show_grid_menu(x, y, 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/form.box.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Form extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     fit?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,8 +21,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         fit?: boolean | undefined;
     };
     events: {

package/index.d.ts

@@ -22,7 +22,7 @@ export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
-export { show_menu } from './components/menu';
+export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores';

package/index.js

@@ -27,7 +27,7 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
-export { show_menu } from './components/menu';
+export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores'; // tmp

package/operations.svelte

@@ -1,4 +1,4 @@
-<script>import { show_floating_toolbar, show_menu } from "./components/menu.js";
+<script>import { show_floating_toolbar, show_menu, show_grid_menu } from "./components/menu.js";
 import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
 $:
   update($page_toolbar_operations, $context_toolbar_operations);
@@ -12,35 +12,37 @@ function update(...args) {
 function on_click(e, operation) {
   if (!operation)
     return;
-  if (operation.menu) {
-    let owner = e.target;
-    while (owner && owner.tagName != "BUTTON")
-      owner = owner.parentElement;
-    if (!owner)
-      return;
-    let rect = owner.getBoundingClientRect();
-    show_menu(rect.left, rect.bottom, operation.menu);
-  } else if (operation.toolbar) {
-    let owner = e.target;
-    while (owner && owner.tagName != "BUTTON")
-      owner = owner.parentElement;
-    if (!owner)
-      return;
-    let rect = owner.getBoundingClientRect();
-    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
-  } else if (operation.action) {
+  if (operation.action) {
     let focused_item = null;
     if ($context_items_store.focused)
       focused_item = $context_items_store[$context_items_store.focused];
     operation.action(focused_item);
+    return;
   }
+  let owner = e.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (!owner)
+    return;
+  let rect = owner.getBoundingClientRect();
+  if (operation.menu)
+    show_menu(rect.left, rect.bottom, operation.menu);
+  else if (operation.toolbar)
+    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
+  else if (operation.grid)
+    show_grid_menu(rect.left, rect.bottom, operation.grid);
 }
 </script>
 
 <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.7",
+  "version": "0.4.9",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -70,6 +70,7 @@
     "./components/Fab.svelte": "./components/Fab.svelte",
     "./components/file.loader.svelte": "./components/file.loader.svelte",
     "./components/Floating_container.svelte": "./components/Floating_container.svelte",
+    "./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
     "./components/icon.svelte": "./components/icon.svelte",
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",

package/page.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  PageEvents */
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type PageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/page.svelte.d.ts

@@ -4,11 +4,11 @@
 export default class Page extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
-    cl?: string | undefined;
     typename?: string | undefined;
     focused_only?: boolean | undefined;
     in_context?: string | undefined;
+    cl?: string | undefined;
+    c?: string | undefined;
     toolbar_operations?: any;
     clears_context?: string | undefined;
 }, {
@@ -25,11 +25,11 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
-        cl?: string | undefined;
         typename?: string | undefined;
         focused_only?: boolean | undefined;
         in_context?: string | undefined;
+        cl?: string | undefined;
+        c?: string | undefined;
         toolbar_operations?: any;
         clears_context?: string | undefined;
     };

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('');

package/tile.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Tile extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tiles.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TilesEvents */
 /** @typedef {typeof __propDef.slots}  TilesSlots */
 export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type TilesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/tiles.vertical.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TilesEvents */
 /** @typedef {typeof __propDef.slots}  TilesSlots */
 export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,8 +16,8 @@ export type TilesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;