@humandialog/forms.svelte 0.4.44 → 0.5.1

package/updates.d.ts

@@ -1,3 +1,3 @@
-export function inform_modification(itm: any, field_name: any, type_name: any): void;
-export function inform_item(itm: any, type_name: any): void;
-export function push_changes(): void;
+export function informModification(itm: any, field_name: any, type_name?: undefined): boolean;
+export function informItem(itm: any, type_name?: undefined): boolean;
+export function pushChanges(): void;

package/updates.js

@@ -3,8 +3,23 @@ import {reef} from '@humandialog/auth.svelte/dist/index'
 
 
 const modified_item_store = writable(null);
-export function inform_modification(itm, field_name, type_name)
+export function informModification(itm, field_name, type_name=undefined)
 {
+    if(type_name == undefined)
+    {
+        if(itm.$type)
+            type_name = itm.$type;
+        else if(itm.oclType)
+            type_name = itm.oclType;
+        else if(itm.$ref)
+        {
+            let segments = itm.$ref.split('/')
+            type_name = segments[1];
+        }
+        else
+            return false;
+    }
+
     let item_entry = {
         Id: [type_name] + itm.Id,
         type_name: type_name,
@@ -16,10 +31,26 @@ export function inform_modification(itm, field_name, type_name)
     };
     
     modified_item_store.set(item_entry);
+    return true;
 };
 
-export function inform_item(itm, type_name)
+export function informItem(itm, type_name=undefined)
 {
+    if(type_name == undefined)
+    {
+        if(itm.$type)
+            type_name = itm.$type;
+        else if(itm.oclType)
+            type_name = itm.oclType;
+        else if(itm.$ref)
+        {
+            let segments = itm.$ref.split('/')
+            type_name = segments[1];
+        }
+        else
+            return false;
+    }
+
     let item_entry = {
         Id: [type_name] + itm.Id,
         type_name: type_name,
@@ -28,11 +59,12 @@ export function inform_item(itm, type_name)
     };
     
     modified_item_store.set(item_entry);
+    return true;
 };
 
 const update_request_ticket = writable(0);
 let last_update_ticket = 0;
-export function push_changes()
+export function pushChanges()
 {
     update_request_ticket.update(n => n + 1);
 }

package/utils.d.ts

@@ -1,20 +1,29 @@
-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): {
+export function isDeviceSmallerThan(br: any): boolean;
+export function selectItem(itm: any): void;
+export function activateItem(context_level: any, itm: any, operations?: null): void;
+export function clearActiveItem(context_level: any): void;
+export function isSelected(itm: any): boolean;
+export function isActive(context_level: any, itm: any): boolean;
+export function getActive(context_level: any): any;
+export function editable(node: any, params: any): {
     destroy(): void;
-};
-export function start_editing(element: any, finish_callback: any): void;
+} | undefined;
+export function startEditing(element: any, finish_callback: any): void;
 export function selectable(node: any, itm: any): {
     destroy(): void;
 };
-export function handle_select(e: any): void;
-export function parse_width_directive(c: any): string;
-export function should_be_comapact(): boolean;
+export function handleSelect(e: any): void;
+export function parseWidthDirective(c: any): string;
+export function shouldBeComapact(): boolean;
+export function insertAt(array: any, index: any, element: any): any;
+export function insertAfter(array: any, after: any, element: any): any;
+export function getPrev(array: any, element: any): any;
+export function getNext(array: any, element: any): any;
+export function getFirst(array: any): any;
+export function getLast(array: any): any;
+export function removeAt(array: any, index: any): any;
+export function remove(array: any, element: any): any;
+export function swapElements(array: any, e1: any, e2: any): any;
 export namespace icons {
     const symbols: null;
 }

package/utils.js

@@ -1,6 +1,6 @@
 import { getContext, tick } from "svelte";
 import {get} from 'svelte/store'
-import { context_items_store, context_toolbar_operations, data_tick_store } from "./stores";
+import { contextItemsStore, contextToolbarOperations, data_tick_store } from "./stores";
 
 export let icons = {symbols :null}
 
@@ -11,7 +11,7 @@ export const SCREEN_SIZES = {
     xl: 1280, //px	@media (min-width: 1280px) { ... }
 }
 
-export function is_device_smaller_than(br)
+export function isDeviceSmallerThan(br)
 {
     return window.innerWidth < SCREEN_SIZES[br]
 }
@@ -20,12 +20,12 @@ export function is_device_smaller_than(br)
 //    just_changed_context: false
 //}
 
-export function select_item(itm)
+export function selectItem(itm)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     data_context['sel'] = itm;
     data_context.focused = 'sel';
-    context_items_store.set( {...data_context} )
+    contextItemsStore.set( {...data_context} )
 
     let ticket = get(data_tick_store)
     ticket++;
@@ -35,13 +35,13 @@ export function select_item(itm)
 
 }
 
-export function activate_item(context_level, itm, operations=null)
+export function activateItem(context_level, itm, operations=null)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     data_context['sel'] = itm; //null;
     data_context[context_level] = itm;
     data_context.focused = context_level;
-    context_items_store.set( {...data_context} )
+    contextItemsStore.set( {...data_context} )
 
     let ticket = get(data_tick_store)
     ticket++;
@@ -50,15 +50,15 @@ export function activate_item(context_level, itm, operations=null)
     //chnages.just_changed_context = true;
 
     if(operations && Array.isArray(operations))
-        context_toolbar_operations.set( [...operations] )
+        contextToolbarOperations.set( [...operations] )
 }
 
-export function clear_active_item(context_level)
+export function clearActiveItem(context_level)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     data_context[context_level] = null;
     data_context.focused = context_level;
-    context_items_store.set( {...data_context} )
+    contextItemsStore.set( {...data_context} )
 
     let ticket = get(data_tick_store)
     ticket++;
@@ -66,12 +66,12 @@ export function clear_active_item(context_level)
 
     //chnages.just_changed_context = true;
 
-    context_toolbar_operations.set( [] )
+    contextToolbarOperations.set( [] )
 }
 
-export function is_selected(itm)
+export function isSelected(itm)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
         return true;
     else
@@ -79,70 +79,112 @@ export function is_selected(itm)
 }
 
 
-export function is_active(context_level, itm)
+export function isActive(context_level, itm)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     if(data_context != undefined && data_context[context_level] != undefined && data_context[context_level] == itm)
         return true;
     else
         return false;
 }
 
-export function get_active(context_level)
+export function getActive(context_level)
 {
-    let data_context = get(context_items_store);
+    let data_context = get(contextItemsStore);
     if(data_context != undefined)
         return data_context[context_level]
     else
         return null;
 }
 
-export function editable(node, action)
+export function editable(node, params)
 {
+    let action;
+    let active = false;
+    let onRemove = undefined;
+    if(params instanceof Object)
+    {
+        action = params.action ?? params;
+        active = params.active ?? false;
+        onRemove = params.remove ?? undefined
+    }
+    else
+        action = params;
+
+    let observer = null;
+    let has_changed = false;
+
     const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
         let cancel = !node.textContent
+        if(observer)
+            observer.disconnect();
+
         await finish_editing(cancel, false);
     }
 
     const key_listener = async (e) =>
     {
+        //e.ctrlKey
         switch(e.key)
         {
         case 'Esc':
         case 'Escape':
-            await finish_editing(true, false);
-            e.stopPropagation();
-            e.preventDefault();
+            if(!active)
+            {
+                e.stopPropagation();
+                e.preventDefault();
+
+                await finish_editing(true, false);
+            }
             break;
 
         case 'Enter':
-            await finish_editing(false, true);
             e.stopPropagation();
             e.preventDefault();
+
+            await finish_editing(false, true);
             break;
-        }
+
+        case 'Backspace':
+            if(onRemove && node.textContent.length == 0)
+            {
+                e.stopPropagation();
+                e.preventDefault();
+                //await finish_editing(false, false);
+                onRemove();
+            }
+            break;
+         }
     }
 
     const finish_editing = async (cancel, incremental) =>
     {
-        node.removeEventListener("blur", blur_listener);
-        node.removeEventListener("keydown", key_listener);
-        node.contentEditable = "false"
-
-        let sel = window.getSelection();
-        sel.removeAllRanges();
+       if(!active)
+       {
+            node.removeEventListener("blur", blur_listener);
+            node.removeEventListener("keydown", key_listener);
+            node.contentEditable = "false"
+       
+            let sel = window.getSelection();
+            sel.removeAllRanges();
+       }
 
-        //console.log('cell_content', node.textContent)
-        
         if(cancel)
         {
             node.innerHTML = org_text;
         }
         else if(action)
         {
-            await action(node.textContent)
+            if(active)
+            {
+                if(has_changed)
+                    await action(node.textContent)
+            }
+            else
+                await action(node.textContent)
+            
         }
 
         const finish_event  = new CustomEvent("finish", {
@@ -154,7 +196,9 @@ export function editable(node, action)
                             });
 
         node.dispatchEvent(finish_event);
-        node.removeEventListener("finish", (e) => {});
+
+        if(!active)
+            node.removeEventListener("finish", (e) => {});
     }
 
     const edit_listener = async (e) =>
@@ -162,7 +206,7 @@ export function editable(node, action)
         node.contentEditable = "true"
         node.addEventListener("blur", blur_listener);
         node.addEventListener("keydown", key_listener);
-        
+
         node.focus();
 
         await tick();
@@ -172,6 +216,8 @@ export function editable(node, action)
         let end_container = range.endContainer;
         range.setStart(end_container, end_offset)
         range.setEnd(end_container, end_offset)
+        //range.setStart(node, 0)
+        //range.setEnd(node, 0)
        // console.log('range rect: ', range.getBoundingClientRect())
         let sel = window.getSelection();
         sel.removeAllRanges();
@@ -179,18 +225,42 @@ export function editable(node, action)
         
     }
 
-    node.addEventListener("edit", edit_listener);
+    const focus_listener = async (e) =>
+    {
+        node.addEventListener("blur", blur_listener);
+        node.addEventListener("keydown", key_listener);
+        has_changed = false;
+        
+        observer = new MutationObserver(() => { has_changed = true; });
+        observer.observe(   node,  {
+                                childList: true,
+                                attributes: true,
+                                characterData: true,
+                                subtree: true } );
+    }
+
     node.classList.add("editable")
     node.classList.add("focus:outline-none")
-    return {
-        destroy() {
-            node.removeEventListener("edit", edit_listener)
-            node.classList.remove("editable")
-            node.contentEditable = "false"
-        }};
+
+    if(active)
+    {
+        node.contentEditable = "true"
+        node.addEventListener('focus', focus_listener);
+    }
+    else
+    {
+        node.addEventListener("edit", edit_listener);
+        
+        return {
+            destroy() {
+                node.removeEventListener("edit", edit_listener)
+                node.classList.remove("editable")
+                node.contentEditable = "false"
+            }};
+    }
 }
 
-export function start_editing(element, finish_callback)
+export function startEditing(element, finish_callback)
 {
     let editable_node = null;
     
@@ -222,7 +292,7 @@ export function selectable(node, itm)
 {
     const select_listener = (e) =>
     {
-        select_item(itm);
+        selectItem(itm);
     }
 
     node.setAttribute("selectable", "true")
@@ -241,12 +311,12 @@ export function selectable(node, itm)
     }};
 }
 
-export function handle_select(e)
+export function handleSelect(e)
 {
     let node = e.target;
     if(!node)
     {
-        select_item(null);
+        selectItem(null);
         return;
     }
 
@@ -266,12 +336,12 @@ export function handle_select(e)
     if(selection_node)
         selection_node.dispatchEvent(new Event("select"))
     else
-        select_item(null);
+        selectItem(null);
 }
 
 
 
-export function parse_width_directive(c)
+export function parseWidthDirective(c)
 {   
     let cs = '';
     switch (c)
@@ -313,8 +383,88 @@ export function parse_width_directive(c)
     return cs;
 }
 
-export function should_be_comapact()
+export function shouldBeComapact()
 {
     let is_in_table = getContext('rTable-definition');
     return !!is_in_table;
-}
+}
+
+    
+
+export function insertAt(array, index, element)
+{
+    array.splice(index, 0, element);
+    return array;
+}
+
+export function insertAfter(array, after, element)
+{
+    let after_idx = array.findIndex((t) => t == after);
+
+    if(after_idx == array.length - 1)
+    {
+        array.push(element)
+        return array;
+    }
+    else
+    {
+        return insertAt(array, after_idx+1, element)
+    }
+}
+
+export function getPrev(array, element)
+{
+    let idx = array.findIndex((t) => t == element);
+    if(idx < 1)
+        return null;
+    else
+        return array[idx-1];
+}
+
+export function getNext(array, element)
+{
+    let idx = array.findIndex((t) => t == element);
+    if(idx >= array.length-1)
+        return null;
+    else
+        return array[idx+1];
+}
+
+export function getFirst(array)
+{
+    if(array.length > 0)
+        return array[0];
+    else
+        return null;
+}
+
+export function getLast(array)
+{
+    if(array.length > 0)
+        return array[array.length-1];
+    else
+        return null;
+}
+
+export function removeAt(array, index)
+{
+    array.splice(index, 1)
+    return array;
+}
+
+export function remove(array, element)
+{
+    let idx = array.findIndex((t) => t == element);
+    return array.removeAt(idx);
+}
+
+export function swapElements(array, e1, e2)
+{
+    let idx1 = array.findIndex((t) => t == e1);
+    let idx2 = array.findIndex((t) => t == e2);
+
+    array[idx1] = e2;
+    array[idx2] = e1;
+
+    return array;
+}

package/vertical.toolbar.svelte

@@ -7,7 +7,7 @@
     import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
     import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
-    import {show_menu} from './components/menu'
+    import {showMenu} from './components/menu'
     //import Menu from './components/contextmenu.svelte'
 
     import {dark_mode_store, 
@@ -22,7 +22,7 @@
     import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
 	import { push } from 'svelte-spa-router';
 
-    export let app_config;
+    export let appConfig;
     export let mobile=false;
     
     
@@ -36,8 +36,8 @@
     let sign_out_href = '';
 
     $:{
-        config = app_config.mainToolbar;
-        has_selection_details = app_config.selectionDetails;
+        config = appConfig.mainToolbar;
+        has_selection_details = appConfig.selectionDetails;
         is_logged_in = $session.is_active;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signin_href;
@@ -45,9 +45,9 @@
 
         tabs = new Array();
 
-        Object.keys(app_config.sidebar).forEach( (key) =>    
+        Object.keys(appConfig.sidebar).forEach( (key) =>    
             { 
-                const ctab = app_config.sidebar[key];
+                const ctab = appConfig.sidebar[key];
                 const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
                 if(can_show)
                     tabs.push({key: key, icon: ctab.icon}); 
@@ -161,18 +161,18 @@
         }
         
         let pt = new DOMPoint(rect.right, rect.top)
-        show_menu(pt, options);    
+        showMenu(pt, options);    
     }
     
 </script>
 
 
-    <div class="px-0 w-10">
+    <div class="no-print px-0 w-10">
         {#each tabs as tab}
-            {@const is_selected = $main_sidebar_visible_store == tab.key}
+            {@const isSelected = $main_sidebar_visible_store == tab.key}
             <button
-                class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
-                class:bg-orange-500={is_selected}
+                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
+                class:bg-orange-500={isSelected}
                 on:click={()=> (on_tab_clicked(tab.key))}>
                 
                 <Icon size={6} component={tab.icon}/>
@@ -182,10 +182,10 @@
 
     {#if !mobile}
     
-        <div class="mt-auto h-auto items-center w-full">
+        <div class="no-print mt-auto h-auto items-center w-full">
             
             <button
-                class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
+                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 on:click={show_options}>
 
                 <Icon size={4} component={FaCog} />
@@ -196,3 +196,12 @@
 
 
     <!--Menu bind:this={menu}/-->
+
+<style>
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+</style>

package/vertical.toolbar.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  VerticalEvents */
 /** @typedef {typeof __propDef.slots}  VerticalSlots */
 export default class Vertical extends SvelteComponentTyped<{
-    app_config: any;
+    appConfig: any;
     mobile?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -14,7 +14,7 @@ export type VerticalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        app_config: any;
+        appConfig: any;
         mobile?: boolean | undefined;
     };
     events: {