@humandialog/forms.svelte 0.4.13 → 0.4.15

package/desk.svelte

@@ -16,10 +16,43 @@
             set_dark_mode_default } from './stores.js'
     
     import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
-    import { handle_select } from './utils'
+    import { handle_select, is_device_smaller_than } from './utils'
+	import { onMount } from 'svelte';
     
     export let layout;
 
+    onMount( () => {
+        window.addEventListener('resize', on_resize)
+        return () => {
+            window.removeEventListener('resize', on_resize)
+        }
+    })
+
+    function on_resize()
+    {
+        auto_hide_sidebar();
+    }
+
+    const sizes = {
+            bottom: 240,
+            toolbar: 40,
+            operations: 40,
+            sidebar: 320
+        }
+
+    $: outerWidth = 0
+    $: innerWidth = 0
+    $: outerHeight = 0
+    $: innerHeight = 0
+
+    const media_break_sm = 640; //px	@media (min-width: 640px) { ... }
+    const media_break_md = 768; //px	@media (min-width: 768px) { ... }
+    const media_break_lg = 1024; //px	@media (min-width: 1024px) { ... }
+    const media_break_xl = 1280; //px	@media (min-width: 1280px) { ... }
+    const media_break_2xl = 1536; //px
+    let test = "ala\n    ma\n\tkota"
+
+    $: is_small = is_device_smaller_than("sm")
     
     let main_side_panel_visibility = "hidden"
     let lg_content_area_horizontal_dim = ""
@@ -54,7 +87,7 @@
         else
         {
             main_side_panel_visibility = "lg:block"
-            lg_content_area_horizontal_dim = "lg:left-[360px] lg:w-[calc(100vw-360px)]"
+            lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
         }      
     }
     
@@ -63,7 +96,6 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
-    let lg_main_side_panel_height = "lg:h-[calc(100vh-240px)]" 
     let fab_bottom = "bottom-0"
                                 
     let content_top = ""
@@ -75,34 +107,39 @@
 
         if(!has_selected_item())
             bottom_bar_visible = false;
-        
+
         if(tools_visible)
         {
             tools_visibility = "fixed"
-            content_top = "top-20 sm:top-10"
+
+            if(is_small)
+                content_top = `top-[80px] sm:top-[40px]`
+            else
+                content_top = `top-[80px] sm:top-[40px]`
+            
             if(bottom_bar_visible)
-                content_height = "h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]"    
+                content_height = `h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]`    
             else    
-                content_height = "h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]" 
+                content_height = `h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
         {
             tools_visibility = "hidden"
-            content_top = "top-10 sm:top-0"
+            content_top = `top-[40px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = "h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]"           
+                content_height = `h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]`           
             else
-                content_height = "h-[calc(100vh-40px)] sm:h-screen"
+                content_height = `h-[calc(100vh-40px)] sm:h-screen`
         }
         
         
         
         if(bottom_bar_visible)
         {
-            lg_main_sidebar_height = "lg:h-[calc(100vh-240px)]"    
+            lg_main_sidebar_height = `lg:h-[calc(100vh-240px)]`    
             bottom_bar_visibility = "fixed"
-            fab_bottom = "bottom-[240px]";
+            fab_bottom = `bottom-[240px]`;
         }
         else
         {    
@@ -113,20 +150,10 @@
         
     }
     
-    let sm_main_side_panel_width = "sm:w-[320px]"
-    let lg_main_content_height = "lg:h-[calc(100vh-280px)]" 
-
-    $: outerWidth = 0;
-    $: innerWidth = 0;
-    $: outerHeight = 0;
-    $: innerHeight = 0;
-    const media_break_sm = 640; //px	@media (min-width: 640px) { ... }
-    const media_break_md = 768; //px	@media (min-width: 768px) { ... }
-    const media_break_lg = 1024; //px	@media (min-width: 1024px) { ... }
-    const media_break_xl = 1280; //px	@media (min-width: 1280px) { ... }
-    const media_break_2xl = 1536; //px
-    let test = "ala\n    ma\n\tkota"
-
+    
+    
+   
+    
     //$: screen.width = innerWidth;  
 </script>
 
@@ -164,9 +191,12 @@
             <!--#######################################################-->
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
-            <div  class="{main_side_panel_visibility} fixed left-0 top-10 w-screen h-[calc(100vh-40px)] z-10 overflow-x-hidden 
-                            sm:left-10 sm:top-0 {sm_main_side_panel_width} sm:h-full
-                            {lg_main_sidebar_height}" >
+            <div  class="{main_side_panel_visibility} fixed 
+                            left-0  sm:left-[40px]
+                            top-[40px]  sm:top-0 
+                            h-[calc(100vh-40px)] sm:h-full {lg_main_sidebar_height}
+                            w-screen sm:w-[320px] 
+                            z-10 overflow-x-hidden">
 
                 <div class=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-4 px-0">
                     <Configurable config={layout.sidebar[visible_sidebar]}>
@@ -178,15 +208,18 @@
             <!--##  HORIZONTAL TOOLS                 ######################-->
             <!--###########################################################-->
 
-            <div  class="   {tools_visibility} left-0 top-10 w-screen h-[40px] 
-                            sm:left-[40px] sm:top-0 sm:w-[calc(100vw-40px)]    
+            <div  class="   {tools_visibility} 
+                            w-screen sm:w-[calc(100vw-40px)] 
+                            h-[40px] 
+                            left-0 sm:left-[40px]     
+                            top-[40px] sm:top-0
                             {lg_content_area_horizontal_dim}
                             z-0 overflow-hidden " >
 
                 <Operations/>
             </div>
 
-            <div class="{tools_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-20">
+            <div class="!hidden {tools_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-20">
                 <Fab/>
             </div>
 
@@ -200,9 +233,8 @@
                             {lg_content_area_horizontal_dim}
                             z-0 overflow-x-hidden" 
                             
-                            on:click={(event) => {
-                                auto_hide_sidebar()}} on:keydown={(event) => {
-                                auto_hide_sidebar()}}>
+                            on:click={(e) => auto_hide_sidebar() } 
+                            on:keydown={(e) => auto_hide_sidebar()}>
                     <Configurable config={layout.mainContent}>
                         <div slot='alt'></div>
                     </Configurable>

package/horizontal.toolbar.svelte

@@ -71,7 +71,7 @@
             let sidebar = $main_sidebar_visible_store;
             if(sidebar == "*")
             {
-                if(!previously_visible_sidebar)
+                if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
                     sidebar = Object.keys(app_config.sidebar)[0];
                 else
                     sidebar = previously_visible_sidebar;
@@ -83,9 +83,14 @@
 
     function show_options(e)
     {
-        let rect = e.target.getBoundingClientRect();
-        let x = rect.left;
-        let y = rect.bottom;
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
         let options = [];
 
         if(show_sign_in_out_icons)
@@ -149,7 +154,8 @@
                     });
         }
         
-        show_menu(x, y, options);    
+        let pt = new DOMPoint(rect.left, rect.bottom)
+        show_menu(pt, options);    
     }
 
 </script>

package/index.d.ts

@@ -7,7 +7,7 @@ export { default as Layout } from './desk.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
 export { default as Checkbox } from './components/checkbox.svelte';
-export { default as Date } from './components/date.svelte';
+export { default as DatePicker } from './components/date.svelte';
 export { default as Edit } from './components/edit.field.svelte';
 export { default as FileLoader } from './components/file.loader.svelte';
 export { default as Input } from './components/inputbox.ltop.svelte';
@@ -28,6 +28,13 @@ export { default as Sidebar } from './components/sidebar/sidebar.svelte';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
 export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
 export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
-export { select_item, activate_item, clear_active_item, is_active, is_selected, editable, start_editing, selectable, handle_select } from './utils';
+export { default as List } from './components/list/list.svelte';
+export { default as ListTitle } from './components/list/list.title.svelte';
+export { default as ListSummary } from './components/list/list.summary.svelte';
+export { default as ListInserter } from './components/list/list.inserter.svelte';
+export { default as ListDateProperty } from './components/list/list.date.svelte';
+export { default as ListComboProperty } from './components/list/list.combo.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 { context_toolbar_operations, page_toolbar_operations, context_items_store } 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

@@ -1,4 +1,5 @@
 // @ts-ignore
+import { List } from "flowbite-svelte";
 //export { default as Row } from "./page.row.svelte";
 export { default as Page } from "./page.svelte";
 export { default as Tile } from "./tile.svelte";
@@ -11,7 +12,7 @@ export { default as Layout } from './desk.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
 export { default as Checkbox } from './components/checkbox.svelte';
-export { default as Date } from './components/date.svelte';
+export { default as DatePicker } from './components/date.svelte';
 export { default as Edit } from './components/edit.field.svelte';
 export { default as FileLoader } from './components/file.loader.svelte';
 export { default as Input } from './components/inputbox.ltop.svelte';
@@ -33,6 +34,13 @@ export { default as Sidebar } from './components/sidebar/sidebar.svelte';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
 export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
 export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
-export { select_item, activate_item, clear_active_item, is_active, is_selected, editable, start_editing, selectable, handle_select } from './utils';
+export { default as List } from './components/list/list.svelte';
+export { default as ListTitle } from './components/list/list.title.svelte';
+export { default as ListSummary } from './components/list/list.summary.svelte';
+export { default as ListInserter } from './components/list/list.inserter.svelte';
+export { default as ListDateProperty } from './components/list/list.date.svelte';
+export { default as ListComboProperty } from './components/list/list.combo.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 { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores'; // tmp
+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/operations.svelte

@@ -1,5 +1,6 @@
 <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";
+export let mobile = false;
 $:
   update($page_toolbar_operations, $context_toolbar_operations);
 let operations = [];
@@ -25,24 +26,29 @@ function on_click(e, operation) {
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();
+  let x = rect.left;
+  let y = mobile ? rect.top : rect.bottom;
   if (operation.menu)
-    show_menu(rect.left, rect.bottom, operation.menu);
+    show_menu(rect, operation.menu);
   else if (operation.toolbar)
-    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
+    show_floating_toolbar(rect, operation.toolbar);
   else if (operation.grid)
-    show_grid_menu(rect.left, rect.bottom, operation.grid);
+    show_grid_menu(rect, 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">
+<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"
+        class:flex-row-reverse={mobile}>
     
     {#each operations as operation}
         <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
+                border-gray-200 focus:outline-none dark:border-gray-600
                 inline-flex items-center"
+                class:border-r={!mobile}
+                class:border-l={mobile}
                 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/operations.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        mobile?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.0.2",
+    "@humandialog/auth.svelte": "^1.0.4",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"
@@ -74,6 +74,15 @@
     "./components/icon.svelte": "./components/icon.svelte",
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
+    "./components/list/internal/list.element.svelte": "./components/list/internal/list.element.svelte",
+    "./components/list/internal/list.inserter.svelte": "./components/list/internal/list.inserter.svelte",
+    "./components/list/list.combo.svelte": "./components/list/list.combo.svelte",
+    "./components/list/list.date.svelte": "./components/list/list.date.svelte",
+    "./components/list/list.inserter.svelte": "./components/list/list.inserter.svelte",
+    "./components/list/list.summary.svelte": "./components/list/list.summary.svelte",
+    "./components/list/list.svelte": "./components/list/list.svelte",
+    "./components/list/list.title.svelte": "./components/list/list.title.svelte",
+    "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",
     "./components/radio.svelte": "./components/radio.svelte",
     "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",

package/page.svelte

@@ -8,6 +8,7 @@
         context_toolbar_operations,
         page_toolbar_operations     } from './stores.js'
     
+    //import {chnages} from './utils.js'
 
     export let context = "data"
     export let self = null
@@ -67,6 +68,8 @@
     let t = 0
     $: {
         t = $data_tick_store
+        //chnages.just_changed_context = false;
+
         if (t > last_tick) {
             last_tick = t
             if (self != null)
@@ -92,9 +95,12 @@
 
     function clear_selection(e)
     {
+        //console.log('page click', chnages.just_changed_context)
         if(!clears_context)
             return;
 
+       
+
         let contexts = clears_context.split(' ');
         contexts.forEach(c => 
         {
@@ -102,8 +108,8 @@
             $context_info_store[c] = '';
         })
 
-        e.stopPropagation();
-       
+        //e.stopPropagation();
+    
         $context_toolbar_operations = [];
         $data_tick_store = $data_tick_store + 1;
     }

package/stores.js

@@ -1,5 +1,6 @@
 
 import {writable, get} from 'svelte/store';
+import {SCREEN_SIZES} from './utils.js'
 
 export const data_tick_store = writable(1);
 export const context_items_store = writable({focused:'', data: null, sel: null})
@@ -93,12 +94,12 @@ export function toggle_sidebar(index)
 
 export function auto_hide_sidebar()
 {
-//    console.log("sw: " + screen.width)
+    //console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
     
-    if(screen.width < 1024)
+    if(window.innerWidth < SCREEN_SIZES.lg)
         hide_sidebar()
 }
-    
+
 export function hide_sidebar()
 {
     previously_visible_sidebar = get(main_sidebar_visible_store);

package/utils.d.ts

@@ -1,8 +1,10 @@
+export function is_device_smaller_than(br: any): boolean;
 export function select_item(itm: any): void;
 export function activate_item(context_level: any, itm: any, operations?: null): void;
 export function clear_active_item(context_level: any): void;
 export function is_selected(itm: any): boolean;
 export function is_active(context_level: any, itm: any): boolean;
+export function get_active(context_level: any): any;
 export function editable(node: any, action: any): {
     destroy(): void;
 };
@@ -16,3 +18,9 @@ export function should_be_comapact(): boolean;
 export namespace icons {
     const symbols: null;
 }
+export namespace SCREEN_SIZES {
+    const sm: number;
+    const md: number;
+    const lg: number;
+    const xl: number;
+}

package/utils.js

@@ -1,15 +1,38 @@
 import { getContext, tick } from "svelte";
 import {get} from 'svelte/store'
-import { context_items_store, context_toolbar_operations } from "./stores";
+import { context_items_store, context_toolbar_operations, data_tick_store } from "./stores";
 
 export let icons = {symbols :null}
 
+export const SCREEN_SIZES = {
+    sm: 640, //px	@media (min-width: 640px) { ... }
+    md: 768, //px	@media (min-width: 768px) { ... }
+    lg: 1024, //px	@media (min-width: 1024px) { ... }
+    xl: 1280, //px	@media (min-width: 1280px) { ... }
+}
+
+export function is_device_smaller_than(br)
+{
+    return window.innerWidth < SCREEN_SIZES[br]
+}
+
+//export const chnages = {
+//    just_changed_context: false
+//}
+
 export function select_item(itm)
 {
     let data_context = get(context_items_store);
     data_context['sel'] = itm;
     data_context.focused = 'sel';
     context_items_store.set( {...data_context} )
+
+    let ticket = get(data_tick_store)
+    ticket++;
+    data_tick_store.set(ticket)
+
+    //chnages.just_changed_context = true;
+
 }
 
 export function activate_item(context_level, itm, operations=null)
@@ -20,6 +43,12 @@ export function activate_item(context_level, itm, operations=null)
     data_context.focused = context_level;
     context_items_store.set( {...data_context} )
 
+    let ticket = get(data_tick_store)
+    ticket++;
+    data_tick_store.set(ticket)
+
+    //chnages.just_changed_context = true;
+
     if(operations && Array.isArray(operations))
         context_toolbar_operations.set( [...operations] )
 }
@@ -31,6 +60,12 @@ export function clear_active_item(context_level)
     data_context.focused = context_level;
     context_items_store.set( {...data_context} )
 
+    let ticket = get(data_tick_store)
+    ticket++;
+    data_tick_store.set(ticket)
+
+    //chnages.just_changed_context = true;
+
     context_toolbar_operations.set( [] )
 }
 
@@ -53,13 +88,21 @@ export function is_active(context_level, itm)
         return false;
 }
 
+export function get_active(context_level)
+{
+    let data_context = get(context_items_store);
+    if(data_context != undefined)
+        return data_context[context_level]
+    else
+        return null;
+}
 
 export function editable(node, action)
 {
     const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
-        await finish_editing(true);
+        await finish_editing(false, false);
     }
 
     const key_listener = async (e) =>
@@ -68,20 +111,20 @@ export function editable(node, action)
         {
         case 'Esc':
         case 'Escape':
-            await finish_editing(true);
+            await finish_editing(true, false);
             e.stopPropagation();
             e.preventDefault();
             break;
 
         case 'Enter':
-            await finish_editing(false);
+            await finish_editing(false, true);
             e.stopPropagation();
             e.preventDefault();
             break;
         }
     }
 
-    const finish_editing = async (cancel) =>
+    const finish_editing = async (cancel, incremental) =>
     {
         node.removeEventListener("blur", blur_listener);
         node.removeEventListener("keydown", key_listener);
@@ -99,7 +142,15 @@ export function editable(node, action)
             await action(node.textContent)
         }
 
-        node.dispatchEvent(new Event("finish"))
+        const finish_event  = new CustomEvent("finish", {
+                                detail: 
+                                { 
+                                    cancel: cancel, 
+                                    incremental: incremental
+                                }
+                            });
+
+        node.dispatchEvent(finish_event);
         node.removeEventListener("finish", (e) => {});
     }
 
@@ -152,7 +203,7 @@ export function start_editing(element, finish_callback)
 
         if(finish_callback)
         {
-            editable_node.addEventListener("finish", (e) => {finish_callback()})
+            editable_node.addEventListener("finish", (e) => { finish_callback(e.detail) })
         }
 
         const edit_event = new Event("edit")
@@ -178,8 +229,7 @@ export function selectable(node, itm)
         }
         catch(err)
         {
-            console.error(err);
-            console.log(node);
+            console.error(err, node);
         }
     }};
 }

package/vertical.toolbar.svelte

@@ -76,9 +76,15 @@
 
     function show_options(e)
     {
-        let rect = e.target.getBoundingClientRect();
-        let x = rect.right;
-        let y = rect.top;
+
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
         let options = [];
 
         if(show_sign_in_out_icons)
@@ -142,7 +148,8 @@
                     });
         }
         
-        show_menu(x, y, options);    
+        let pt = new DOMPoint(rect.right, rect.top)
+        show_menu(pt, options);    
     }
     
 </script>