@humandialog/forms.svelte 0.4.14 → 0.4.16

package/components/list/list.title.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: string;
+        editable?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/sidebar/sidebar.item.svelte

@@ -3,7 +3,8 @@ import { context_items_store, auto_hide_sidebar } from "../../stores";
 import {
   selectable as _selectable,
   is_selected,
-  editable as _editable
+  editable as _editable,
+  handle_select
 } from "../../utils";
 export let href;
 export let icon = void 0;
@@ -27,27 +28,38 @@ function editable_if_needed(node, editable2) {
   if (editable2)
     _editable(node, editable2);
 }
+function on_link_clicked(e) {
+  auto_hide_sidebar();
+  if (selectable)
+    handle_select(e);
+  e.stopPropagation();
+}
 </script>
 
 <li>
-    <a
-        href={href}
-        on:click={ (e) => auto_hide_sidebar() } 
+    <!--svelte-ignore a11y-click-events-have-key-events -->
+    <div
+        on:click
         on:contextmenu
-        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
+        on:keydown
+        on:keyup
+        class="p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
         class:bg-gray-200={active}
         class:dark:bg-gray-700={active}
         use:selectable_if_needed={selectable}
-        class:selected={selected(selectable, context_data)}
-                            >
-            {#if icon}
-                <Icon size={5} component={icon}/>
-            {/if}
-            <span   class="ml-3"
-                    use:editable_if_needed={editable}>
-                <slot/>
-            </span>
-    </a>
+        class:selected={selected(selectable, context_data)}>
+            <a  href={href} 
+                on:click={on_link_clicked} 
+                class="inline-flex items-center group">
+                {#if icon}
+                    <Icon size={5} component={icon}/>
+                {/if}
+                <span   class="ml-3 group-hover:underline"
+                        use:editable_if_needed={editable}>
+                    <slot/>
+                </span>
+            </a>
+        </div>
 </li>
 
 

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

@@ -9,7 +9,10 @@ declare const __propDef: {
         editable?: any | undefined;
     };
     events: {
+        click: MouseEvent;
         contextmenu: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/desk.svelte

@@ -15,11 +15,24 @@
             set_default_tools_visible,
             set_dark_mode_default } from './stores.js'
     
-    import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
+    import { AuthorizedView} from '@humandialog/auth.svelte'
     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,
@@ -220,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/index.d.ts

@@ -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";
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "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.4",
+    "@humandialog/auth.svelte": "^1.1.0",
     "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/updates.js

@@ -1,5 +1,5 @@
 import {writable} from 'svelte/store';
-import {Auth} from '@humandialog/auth.svelte/dist/index'
+import {reef} from '@humandialog/auth.svelte/dist/index'
 
 
 const modified_item_store = writable(null);
@@ -75,12 +75,8 @@ update_request_ticket.subscribe(async (v) => {
 
         try
         {
-            console.log('push: ', changes);
-            const res = await Auth.fetch('/json/yav1/Push', 
-                                        {
-                                        method: "POST",
-                                        body: JSON.stringify({ Items: changes }),
-                                        });
+            //console.log('push: ', changes);
+            const res = await reef.post('/Push', { Items: changes });
 
             if(res)
             {

package/utils.d.ts

@@ -4,6 +4,7 @@ export function activate_item(context_level: any, itm: any, operations?: null):
 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;
 };

package/utils.js

@@ -1,6 +1,6 @@
 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}
 
@@ -16,12 +16,23 @@ 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)
@@ -32,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] )
 }
@@ -43,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( [] )
 }
 
@@ -65,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) =>
@@ -80,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);
@@ -111,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) => {});
     }
 
@@ -164,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")