@humandialog/forms.svelte 1.8.0 → 1.8.2

package/components/kanban/internal/kanban.card.svelte

@@ -11,11 +11,13 @@ import {
   informModification,
   pushChanges,
   startEditing,
-  Ricon
+  Ricon,
+  focusEditable
 } from "../../..";
 import { FaRegFileAlt } from "svelte-icons/fa";
 import Properties from "./kanban.props.svelte";
 import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "../Kanban";
+import Editable from "../../r.editable.svelte";
 export let item;
 let definition = getContext("rKanban-definition");
 $:
@@ -97,28 +99,15 @@ function setSelectionAtEnd(element) {
 let topProps;
 let middleProps;
 let bottomProps;
-let titleElement;
-let summaryElement;
 let summaryPlaceholder = false;
 export async function editProperty(field) {
   if (field == "Title") {
-    if (isLinkLike) {
-      startEditing(titleElement);
-    } else {
-      titleElement.focus();
-      await tick();
-      setSelectionAtEnd(titleElement);
-    }
+    focusEditable("#__or_kanban_ctrl_Title");
   } else if (field == "Summary") {
-    if (!!summaryElement) {
-      summaryElement.focus();
-      await tick();
-      setSelectionAtEnd(summaryElement);
-    } else {
+    if (!focusEditable("#__or_kanban_ctrl_Summary")) {
       summaryPlaceholder = true;
       await tick();
-      if (!!summaryElement)
-        summaryElement.focus();
+      focusEditable("#__or_kanban_ctrl_Summary");
     }
   } else {
     const property = definition.properties.find((p) => p.name == field);
@@ -209,23 +198,22 @@ function showAttachementIcon() {
         {@const showIcon = showAttachementIcon()}
             <!-- whitespace-nowrap overflow-clip  -->
             <h4     class = "font-semibold relative"
-                    use:editable={{
-                    action: (text) => onTitleChanged(text),
-                    active: false,
-                    readonly: definition.titleReadOnly,
-                    onFinish: (d) => {titleElement.blur()},
-                    onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
-                    }}
                 use:conditionalClick={{
                     condition: hasOpen,
-                    callback: performOpen}}
-                bind:this={titleElement}>
+                    callback: performOpen}}>
                 {#if isLinkLike}
                     <a class= "font-semibold" href={getHRef()} use:link>
-                        {item[definition.titleAttrib]}
+                        <Editable   self={item} 
+                                    a={definition.titleAttrib} 
+                                    readonly={definition.titleReadOnly}
+                                    focusOnClick={false}
+                                    id="__or_kanban_ctrl_Title"/>
                     </a>
                 {:else}
-                    {item[definition.titleAttrib]}
+                    <Editable   self={item} 
+                                a={definition.titleAttrib} 
+                                readonly={definition.titleReadOnly}
+                                id="__or_kanban_ctrl_Title"/>
                 {/if}
 
 
@@ -258,13 +246,9 @@ function showAttachementIcon() {
     {#if item[definition.summaryAttrib] || summaryPlaceholder}
         {#key item[definition.summaryAttrib]}
             {#if isCardActive}
-                <figcaption use:editable={{
-                                action: (text) => onSummaryChanged(text),
-                                active: true,
-                                readonly: definition.summaryReadOnly,
-                                onFinish: (d) => {summaryPlaceholder = false}}}
-                            bind:this={summaryElement}>
-                    {item[definition.summaryAttrib]}
+                <figcaption><Editable   self={item} 
+                                        a={definition.summaryAttrib} 
+                                        id="__or_kanban_ctrl_Summary"/>
                 </figcaption>
             {:else}
                 <figcaption>

package/components/kanban/kanban.svelte

@@ -432,7 +432,7 @@ export function add(item, columnIdx = -1) {
 {#key renderToken}
 <slot/> <!-- Launch definition settings -->
 
-    <figure class="px-4">
+    <figure class="px-0 sm:px-4">
     <h1><Editable self={self} a={title}/></h1>
     <figcaption><Editable self={self} a={summary}/></figcaption>
     </figure>

package/components/list/internal/list.element.svelte

@@ -8,7 +8,8 @@ import {
   editable,
   startEditing,
   addActiveItem,
-  removeActiveItem
+  removeActiveItem,
+  focusEditable
 } from "../../../utils";
 import { showGridMenu, showMenu } from "../../menu";
 import { pushChanges, informModification } from "../../../updates";
@@ -16,12 +17,10 @@ import { isDeviceSmallerThan } from "../../../utils";
 import Circle from "../../ricons/circle.svelte";
 import CircleCheck from "../../ricons/circle-check.svelte";
 import Ricon from "../../r.icon.svelte";
-import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
-import { FaExternalLinkAlt, FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
-import Tags from "../../tags.svelte";
 import { ext } from "../../../i18n";
+import Editable from "../../r.editable.svelte";
 export let item;
 export let element_title = "";
 export let list_properties = void 0;
@@ -188,28 +187,11 @@ export function editProperty(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__or_list_ctrl_${getItemKey(item)}_${field}`;
-  let element_node = document.getElementById(element_id);
-  if (!element_node) {
+  let element_id = `#__or_list_ctrl_${getItemKey(item)}_${field}`;
+  if (!focusEditable(element_id)) {
     placeholder = field;
     await tick();
-    element_node = document.getElementById(element_id);
-    if (!element_node)
-      return;
-  }
-  if (!element_node.classList.contains("editable")) {
-    return;
-  }
-  if (field == "Title") {
-    if (is_link_like) {
-      startEditing(element_node, () => {
-        placeholder = "";
-      });
-    } else {
-      element_node.focus();
-    }
-  } else {
-    element_node.focus();
+    focusEditable(element_id);
   }
 }
 function setSelectionAtEnd(element) {
@@ -416,36 +398,30 @@ async function onDownloadFile(e) {
             href={element_href}
             on:click={onDownloadFile}>
 
-            <h4 class="-indent-8"
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={isDownloading ? 'loader-circle' : element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else if element_href}
         <a  class="sm:hover:cursor-pointer"
             href={element_href} use:link>
 
-            <h4 class="-indent-8 "
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8 ">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else if element_open_handler}
@@ -453,33 +429,26 @@ async function onDownloadFile(e) {
             href="/#"
             on:click|preventDefault={() => element_open_handler(item)}>
 
-            <h4 class="-indent-8"
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else}
-        <h4 class="-indent-8 "
-            id="__or_list_ctrl_{getItemKey(item)}_Title"
-            use:editable={{
-                action: (text) => {change_property(element_title, text)},
-                active: false,
-                readonly: title_readonly,
-                onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-            }}>
+        <h4 class="-indent-8">
             <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                     text-stone-700 dark:text-stone-400 ">
                     <Ricon icon={element_icon} />
-            </div>{translated_element_title}
+            </div><Editable     self={item} 
+                                a={element_title} 
+                                id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                readonly={title_readonly}/>
         </h4>
     {/if}
 
@@ -493,25 +462,14 @@ async function onDownloadFile(e) {
     </figcaption>
     -------------------------------->
 
-    {#if summary && (item[summary])}
-        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary" use:editable={{
-                    action: (text) => {change_property(summary, text)},
-                    readonly: summary_readonly,
-                    onFinish: (d) => {placeholder='';},
-                    active: true
-                }}>{item[summary]}
-        </figcaption>
-
-    {:else if placeholder=='Summary'}
-        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary"
-                    use:editable={{
-                    action: (text) => {change_property(summary, text)},
-                    readonly: summary_readonly,
-                    onFinish: (d) => {placeholder='';},
-                    active: true
-                }}>&nbsp;
+    {#if (summary && (item[summary])) || (placeholder=='Summary')}
+        <figcaption><Editable   self={item} 
+                            a={summary}
+                            id="__or_list_ctrl_{getItemKey(item)}_Summary"
+                            readonly={summary_readonly} />
         </figcaption>
     {/if}
+
 </figure>
 </div>
 

package/components/list/internal/list.inserter.svelte

@@ -59,39 +59,3 @@ async function onSummaryChanged(text) {
         {/if}
 </figure>
 
-
-<!--section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
-    <div class="flex flex-row">
-        {#if icon}
-
-            <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
-        {/if}
-
-        <p  class=" ml-3 py-1
-                    text-base font-semibold min-h-[1.75rem]
-                    sm:min-h-[1.25rem]
-                    whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
-            bind:this={titleElement}
-            use:editable={{
-                action: (text) => onInsert(text, ''),
-                active: false,
-                onSoftEnter: softEnter
-                }} >
-        </p>
-    </div>
-
-    {#if editSummary}
-        <p  bind:this={summaryElement}
-            class="     ml-10 sm:ml-9
-                        sm:min-h-[1rem]
-                        text-sm min-h-[1.5rem]
-                        text-stone-400"
-                use:editable={{
-                    action: onSummaryChanged,
-                    active: false,
-                    onFinish: (d) => {editSummary=false}
-                }}>
-            {summary}
-        </p>
-    {/if}
-</section-->

package/components/list/list.svelte

@@ -411,10 +411,7 @@ function read_from_def(propName) {
                             {selectionKey}
                             bind:this={rows[i]}
                             >
-
-                <span slot="left" let:element>
-                    <slot name="left" {element}/>
-                </span>
+   
             </ListElement>
 
             {#if show_insertion_row_after_element == element}

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

@@ -43,9 +43,6 @@ declare const __propDef: {
     };
     slots: {
         default: {};
-        left: {
-            element: any;
-        };
     };
 };
 export type ListProps = typeof __propDef.props;

package/components/r.editable.svelte

@@ -2,6 +2,7 @@
   import {editable, makeEditableIdFromFieldName} from '../utils'
   import {setjItemProperty} from '../updates.js'
 	import { afterUpdate } from 'svelte';
+	import {ext} from '../i18n'
 
   export let self
   export let a
@@ -63,9 +64,7 @@
 				}}
 				on:focus={focus}
 				on:blur={blur}
->
-	{self[a]}
-</span>
+>{ext(self[a])}</span>
 
 <!--style>
 	span:empty:focus::before {

package/desk.svelte

@@ -79,29 +79,19 @@
 
     $: { visible_sidebar = $main_sidebar_visible_store
         const navMode = navGetMode()
-        if(navMode == NAV_MODE_SIDEBAR)
+        if(visible_sidebar == "*")
         {
-            if(visible_sidebar == "*")
-            {
-                main_side_panel_visibility = "hidden"
-                lg_content_area_horizontal_dim = ""
-                lg_content_area_horizontal_tools_dim = `sm:left-[50px] sm:w-[calc(100vw-60px)]`
-            }
-            else
-            {
-                main_side_panel_visibility = "fixed lg:block"
-                lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
-                lg_content_area_horizontal_tools_dim = `sm:left-[50px] sm:w-[calc(100vw-60px)] lg:left-[368px] lg:w-[calc(100vw-376px)]`
-            }
+            main_side_panel_visibility = "hidden"
+            lg_content_area_horizontal_dim = ""
+            lg_content_area_horizontal_tools_dim = `sm:left-[50px] sm:w-[calc(100vw-60px)]`
         }
         else
         {
-            main_side_panel_visibility = "hidden"
-            lg_content_area_horizontal_dim = ""
+            main_side_panel_visibility = "fixed block"
+            lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
+            lg_content_area_horizontal_tools_dim = `sm:left-[50px] sm:w-[calc(100vw-60px)] lg:left-[368px] lg:w-[calc(100vw-376px)]`
+        }
         }
-
-        //console.log('main_side_panel_visibility', main_side_panel_visibility)
-    }
 
     let tools_visibility = "hidden"
     let tools_visible = false
@@ -399,15 +389,25 @@
 
 
                 <!--#######################################################-->
-                <!--##  VERTICAL TOOLBAR                 ##################-->
+                <!--##  VERTICAL DESKTOP MAIN TOOLBAR    ##################-->
                 <!--#######################################################-->
-                <div  class="hidden sm:block fixed left-0 top-[50px] sm:top-0 w-[40px] h-screen z-20 inset-0   overflow-hidden">
+                <div    class="hidden sm:block
+                        fixed left-0 top-0 w-[40px] h-screen z-20
+                        inset-0   overflow-hidden">
+
                     <div class="sticky top-0 flex h-full w-12 sm:w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
                         <VerticalToolbar appConfig={layout} mobile={false}/>
                     </div>
                 </div>
+                <!--#######################################################-->
+                <!--##  VERTICAL MOBILE MAIN TOOLBAR     ##################-->
+                <!--#######################################################-->
+
+                <header class=" mobile-main-toolbar block sm:hidden
+                                fixed w-screen bottom-0 h-[50px] z-20
+                                shadow  shadow-stone-900/5 dark:shadow-none
+                                overflow-auto" >
 
-                <header class="block sm:hidden  fixed w-screen bottom-0 h-[50px] sm:h-[40px] z-20 shadow  shadow-stone-900/5 dark:shadow-none     overflow-auto" >
                     <div class="    flex flex-row justify-between  h-full
                                     text-stone-500 bg-stone-200/70 hover:bg-stone-200
                                     dark:text-orange-200 dark:bg-stone-700/70 dark:hover:bg-stone-700
@@ -426,15 +426,16 @@
                 {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-50px)]"}
 
                 <div  class="main-side-bar {main_side_panel_visibility}
-                                left-0 top-0 sm:left-[40px]
-                                top-0
+
+                                left-0 bottom-[50px]
+                                sm:left-[40px] sm:top-0
                                 w-full sm:w-[320px]
-                                h-[calc(100vh-50px)] sm:h-full {lg_main_sidebar_height}
+                                h-[calc(100svh-50px)] sm:h-full
 
-                                z-20 overflow-x-hidden
+                                z-30 overflow-x-hidden
 
                                 bg-stone-50 dark:bg-stone-900
-                                sm:border-r border-stone-300 dark:border-stone-300/50
+                                border-t sm:border-t-0 sm:border-r border-stone-300 dark:border-stone-300/50
                                 sm:shadow-lg sm:shadow-stone-500
                                 sm:dark:shadow-black">
 

package/package.json

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

package/updates.js

@@ -203,7 +203,7 @@ update_request_ticket.subscribe(async (v) => {
                 {
                     modified_items_map.clear();
                     unsavedModificationsTicket.set( get(unsavedModificationsTicket) + 1 )
-                    
+
                     afterPushCallbacks.forEach( cb => cb())
                     afterPushCallbacks = []
                 }

package/utils.js

@@ -366,8 +366,8 @@ export function editable(node, params)
 
     let observer = null;
     let has_changed = false;
+    let org_text = '';
 
-    const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
         if(currentEditable == node)
@@ -403,13 +403,9 @@ export function editable(node, params)
         {
         case 'Esc':
         case 'Escape':
-            if(!active)
-            {
-                e.stopPropagation();
-                e.preventDefault();
-
-                await finish_editing({ cancel: true });
-            }
+            e.stopPropagation();
+            e.preventDefault();
+            await finish_editing({ cancel: true });
             break;
 
         case 'Enter':
@@ -447,16 +443,17 @@ export function editable(node, params)
         const cancel = params.cancel ?? false;
         const incremental = params.incremental ?? false;
 
+        node.removeEventListener("blur", blur_listener);
+        node.removeEventListener("keydown", key_listener);
+        node.removeEventListener("save", save_listener);
+
        if(!active)
-       {
-            node.removeEventListener("blur", blur_listener);
-            node.removeEventListener("keydown", key_listener);
-            node.removeEventListener("save", save_listener);
             node.contentEditable = "false"
+       else
+            node.blur()
 
-            let sel = window.getSelection();
-            sel.removeAllRanges();
-       }
+        let sel = window.getSelection();
+        sel.removeAllRanges();
 
         if(cancel)
         {
@@ -468,17 +465,11 @@ export function editable(node, params)
         }
         else if(action)
         {
-            if(active)
+            if(has_changed)
             {
-                if(has_changed)
-                {
-                    has_changed = false;
-                    await action(node.textContent)
-                }
-
-            }
-            else
+                has_changed = false;
                 await action(node.textContent)
+            }
         }
 
         const finish_event  = new CustomEvent("finish", {
@@ -505,12 +496,6 @@ export function editable(node, params)
     const edit_listener = async (e) =>
     {
         node.contentEditable = "true"
-        node.addEventListener("blur", blur_listener);
-        node.addEventListener("keydown", key_listener);
-
-        currentEditable = node;
-        node.addEventListener("save", save_listener)
-
         node.focus();
 
         /*await tick();
@@ -543,6 +528,8 @@ export function editable(node, params)
                 onSingleChange(node.textContent)
         });
 
+        org_text = node.textContent;
+
         observer.observe(   node,  {
                                 childList: true,
                                 attributes: true,
@@ -553,28 +540,26 @@ export function editable(node, params)
     node.classList.add("editable")
     node.classList.add("focus:outline-none")
 
+    node.addEventListener('focus', focus_listener);
+    node.addEventListener("edit", edit_listener);
+
+    if(onFinish)
+        node.addEventListener("finish", (e) => { onFinish(e.detail) })
+    
     if(active)
-    {
         node.contentEditable = "true"
-        node.addEventListener('focus', focus_listener);
-
-        if(onFinish)
-        {
-            node.addEventListener("finish", (e) => { onFinish(e.detail) })
-        }
-    }
-    else
-    {
-        node.addEventListener("edit", edit_listener);
+    
+    return {
+        destroy() {
 
-        return {
-            destroy() {
+            node.removeEventListener("edit", edit_listener)
+            node.removeEventListener('focus', focus_listener);
+            if(onFinish)
+                node.removeEventListener("finish", (e) => { onFinish(e.detail) })
 
-                node.removeEventListener("edit", edit_listener)
-                node.classList.remove("editable")
-                node.contentEditable = "false"
-            }};
-    }
+            node.classList.remove("editable")
+            
+        }};
 }
 
 export function startEditing(element, finish_callback)