@humandialog/forms.svelte 0.5.21 → 0.5.22

package/components/Fab.svelte

@@ -81,7 +81,6 @@ function getSelectionPos() {
     rect = range.getBoundingClientRect();
     let result = window.innerHeight - rect.top;
     result = Math.floor(result);
-    console.log("selection box", result);
     return result;
   } else
     return 0;

package/components/contextmenu.svelte

@@ -28,7 +28,6 @@ afterUpdate(() => {
     const sel = window.getSelection();
     if (sel && sel.rangeCount > 0 && sel.focusNode && sel.focusNode.nodeType == sel.focusNode.TEXT_NODE) {
       container_rect.height -= 300;
-      console.log("shirnked: ", container_rect);
     }
   }
   let xShifted = false;

package/components/document/rich.edit.svelte

@@ -963,7 +963,6 @@ function on_focus() {
 }
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
-  console.log("rich.edit: on_blur", active_range?.begin?.absolute_index);
   storedSelection = null;
   if (onBlur) {
     onBlur();

package/components/kanban/Kanban.d.ts

@@ -40,6 +40,7 @@ export declare class rKanban_definition {
     getCardOperations: Function | undefined;
     private items;
     getItems(): object[];
+    visibleColumnsNo(): number;
     clear(): void;
 }
 export declare const KanbanColumnTop = -1;

package/components/kanban/Kanban.js

@@ -51,6 +51,29 @@ export class rKanban_definition {
         }
         return this.items;
     }
+    visibleColumnsNo() {
+        // has <Other> column
+        if (this.columns.find((c) => c.state < 0)) {
+            const allItems = this.getItems();
+            const isExplicitState = (e) => {
+                const elementState = e[this.stateAttrib];
+                const colsNo = this.columns.length;
+                for (let i = 0; i < colsNo; i++) {
+                    const def = this.columns[i];
+                    if ((def.state >= 0) && (def.state == elementState))
+                        return true;
+                }
+                return false;
+            };
+            const unknownStateItems = allItems.filter(e => !isExplicitState(e));
+            if (unknownStateItems && (unknownStateItems.length > 0))
+                return this.columns.length;
+            else
+                return this.columns.length - 1;
+        }
+        else
+            return this.columns.length;
+    }
     clear() {
         this.columns = [];
         this.titleAttrib = '';

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

@@ -216,7 +216,9 @@ function showAttachementIcon() {
                     action: (text) => onTitleChanged(text), 
                     active: false,
                     readonly: definition.titleReadOnly,
-                    onFinish: (d) => {titleElement.blur()}}}
+                    onFinish: (d) => {titleElement.blur()},
+                    onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
+                    }}
                 use:conditionalClick={{
                     condition: canOpen, 
                     callback: performOpen}}

package/components/kanban/internal/kanban.column.svelte

@@ -138,6 +138,8 @@ export async function add(after = KanbanColumnTop) {
   if (!inserter)
     return;
   inserter.run(async (detail) => {
+    if (detail.softEnter)
+      return;
     showInserterAfterId = None;
     if (detail.cancel)
       activateAfterDomUpdate = lastActivatedElement;
@@ -202,11 +204,14 @@ function onResizeWindow() {
   styleWidth = getWidthStyle();
 }
 function getWidthStyle() {
-  const assumed_space = 800;
-  const default_column_width = Math.floor(assumed_space / definition.columns.length);
-  const column_width = columnDef.width ? columnDef.width : default_column_width;
+  const container = document.getElementById("__hd_svelte_main_content_container");
+  const containerRect = container?.getBoundingClientRect();
+  const assumed_space = containerRect.width;
+  const columns_no = definition.visibleColumnsNo();
+  const default_column_width = Math.floor(assumed_space / columns_no);
+  const column_width = Math.min(columnDef.width ? columnDef.width : default_column_width, 640);
   if (window.innerWidth >= 640)
-    return `width: ${column_width}px; min-width: 180px; max-width: ${column_width}px;`;
+    return `width: ${column_width}px; min-width: 200px; max-width: ${column_width}px;`;
   else
     return "width: 92%;";
 }
@@ -252,7 +257,7 @@ function getWidthStyle() {
     </header>
     <ul class="w-full border-stone-700 pb-20" bind:this={column_element}>
         {#if showInserterAfterId === KanbanColumnTop}
-            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnTop)}}
+            <Inserter   onInsert={async (title, summary) => {await onInsert(currentColumnIdx, title, summary, KanbanColumnTop)}}
                         bind:this={inserter} />
         {/if}
 
@@ -274,14 +279,14 @@ function getWidthStyle() {
                 </Card>
 
                 {#if showInserterAfterId == element.Id}
-                    <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, showInserterAfterId)}}
+                    <Inserter   onInsert={async (title, summary) => {await onInsert(currentColumnIdx, title, summary, showInserterAfterId)}}
                                 bind:this={inserter} />
                 {/if}
             {/each}
         {/if}
 
         {#if showInserterAfterId === KanbanColumnBottom}
-            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnBottom)}}
+            <Inserter   onInsert={async (title, summary) => {await onInsert(currentColumnIdx, title, summary, KanbanColumnBottom)}}
                         bind:this={inserter} />
         {/if}
 

package/components/kanban/internal/kanban.inserter.svelte

@@ -1,12 +1,29 @@
-<script>import {
+<script>import { tick } from "svelte";
+import {
   startEditing,
   editable
 } from "../../..";
 export let onInsert;
+let onClose;
 export function run(onclose) {
-  startEditing(insertion_paragraph, onclose);
+  onClose = onclose;
+  startEditing(titleElement, onclose);
+}
+let titleElement;
+let title = "";
+let summary = "";
+let editSummary = false;
+let summaryElement;
+async function softEnter(t) {
+  title = t;
+  editSummary = true;
+  await tick();
+  startEditing(summaryElement, onClose);
+}
+async function onSummaryChanged(text) {
+  summary = text;
+  await onInsert(title, summary);
 }
-let insertion_paragraph;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -17,8 +34,29 @@ let insertion_paragraph;
     <h3  class=" text-lg font-semibold min-h-[1.75rem]
                 sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
                 whitespace-nowrap overflow-clip w-full sm:flex-none "
-                use:editable={onInsert}
-                bind:this={insertion_paragraph}>
-        
+                use:editable={{
+                    action: (text) => onInsert(text, ''),
+                    active: false,
+                    onSoftEnter: softEnter
+                }}
+                bind:this={titleElement}>
     </h3>
+
+    {#if editSummary}
+        <p class="  sm:text-xs sm:min-h-[1rem]
+                text-base min-h-[1.5rem]
+                text-stone-400
+                max-h-[75px] sm:max-h-[64px]
+                overflow-hidden"
+                use:editable={{
+                    action: (text) => onSummaryChanged(text), 
+                    active: false,
+                    onFinish: (d) => {editSummary = false}}}
+                bind:this={summaryElement}>
+            {summary}
+        </p>
+    {/if}
+    
+    
+
 </li>

package/components/kanban/kanban.svelte

@@ -304,7 +304,7 @@ export function replace(item, toColumnIdx, afterElement) {
       return;
   }
 }
-async function onInsert(columnIdx, title2, afterId) {
+async function onInsert(columnIdx, title2, summary, afterId) {
   const columnState = definition.columns[columnIdx].state;
   const oa = definition.orderAttrib;
   const sa = definition.stateAttrib;
@@ -313,6 +313,7 @@ async function onInsert(columnIdx, title2, afterId) {
   const columnBottom = allItems.findLast((e) => e[sa] == columnState);
   let newElement = {
     [definition.titleAttrib]: title2,
+    [definition.summaryAttrib]: summary,
     [sa]: columnState
   };
   if (afterId == KanbanColumnTop) {
@@ -432,9 +433,10 @@ export function add(item, columnIdx = -1) {
     <!--hr class="hidden sm:block w-full"-->
 {/if}
 
-<section class="h-full mt-5 flex flex-row no-wrap  sm:justify-center 
+<section    id="__hd_svelte_kanban_columns_container"
+            class="h-full mt-5 flex flex-row no-wrap  
                 overflow-x-auto snap-x snap-mandatory sm:snap-none
-                {user_class}">
+                {user_class}"> <!--sm:justify-center -->
     {#each definition.columns as column, idx (column.id)}
         <Column currentColumnIdx={idx}
                 {onInsert}

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

@@ -250,6 +250,7 @@ export function scrollToView() {
                                         action: (text) => {change_name(text)},
                                         active: false,
                                         readonly: definition.title_readonly,
+                                        onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
                                     }}
                             > 
                             {element_title}

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

@@ -1,27 +1,65 @@
-<script>import { editable, startEditing } from "../../../utils";
+<script>import { tick } from "svelte";
+import { editable, startEditing } from "../../../utils";
 import Icon from "../../icon.svelte";
 import { FaPlus } from "svelte-icons/fa";
 export let onInsert;
 export let icon = false;
+let onClose;
 export function run(onclose) {
-  startEditing(insertion_paragraph, onclose);
+  onClose = onclose;
+  startEditing(titleElement, onclose);
+}
+let titleElement;
+let summaryElement;
+let title = "";
+let summary = "";
+let editSummary = false;
+async function softEnter(text) {
+  title = text;
+  editSummary = true;
+  await tick();
+  startEditing(summaryElement, onClose);
+}
+async function onSummaryChanged(text) {
+  summary = text;
+  await onInsert(title, summary);
 }
-let insertion_paragraph;
 </script>
 
-<section    class="mt-3 flex flex-row my-0  w-full text-lg sm:text-sm text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
-    {#if icon}
-        <!--Icon   size={3} 
-                component={FaPlus}  
-                class="mt-1.5 ml-2 "/-->
-        <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
-    {/if}
+<section    class="mt-3 my-0  w-full text-lg sm:text-sm 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}
+            <!--Icon   size={3} 
+                    component={FaPlus}  
+                    class="mt-1.5 ml-2 "/-->
+            <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-lg font-semibold min-h-[1.75rem]
-                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
-        bind:this={insertion_paragraph}
-        use:editable={onInsert} >
-    </p>
+        <p  class=" ml-3 py-1
+                    text-lg font-semibold min-h-[1.75rem]
+                    sm:text-sm sm:font-semibold 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:text-xs sm:min-h-[1rem]
+                        text-base 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

@@ -175,6 +175,8 @@ export async function addRowAfter(after = null) {
   if (!inserter)
     return;
   inserter.run(async (detail) => {
+    if (detail.softEnter)
+      return;
     show_insertion_row_after_element = null;
     if (detail.cancel)
       activate_after_dom_update = last_activated_element;
@@ -233,9 +235,10 @@ function reorderElements(items2, from = null) {
   }
   pushChanges();
 }
-async function insert(title2, after) {
+async function insert(title2, summary, after) {
   let newElement = {
-    [definition.title]: title2
+    [definition.title]: title2,
+    [definition.summary]: summary
   };
   if (after && orderAttrib) {
     const leftElement = after;
@@ -298,7 +301,7 @@ async function insert(title2, after) {
         </List_element>
         
         {#if show_insertion_row_after_element == element}
-            <Inserter   onInsert={async (text) => {await insert(text, show_insertion_row_after_element)}}
+            <Inserter   onInsert={async (title, summary) => {await insert(title, summary, show_insertion_row_after_element)}}
                         icon={definition.inserter_icon}
                         bind:this={inserter}    />
         {/if}
@@ -306,7 +309,7 @@ async function insert(title2, after) {
 {/if}
 
 {#if show_insertion_row_after_element == END_OF_LIST}
-    <Inserter   onInsert={async (text) => {await insert(text, null)}}
+    <Inserter   onInsert={async (title, summary) => {await insert(text, summary, null)}}
                 icon={definition.inserter_icon}
                 bind:this={inserter}    />
 {/if}

package/components/sidebar/sidebar.list.svelte

@@ -1,7 +1,7 @@
 <script>import Icon from "../icon.svelte";
 import Edit from "../edit.field.svelte";
 import { FaPlus } from "svelte-icons/fa";
-import { getPrev, getNext, swapElements, getLast } from "../../utils";
+import { getPrev, getNext, swapElements, getLast, getFirst, remove, insertAt } from "../../utils";
 import { informModification, pushChanges } from "../../updates";
 import { tick } from "svelte";
 export let objects;
@@ -28,6 +28,26 @@ export function moveUp(element) {
     pushChanges();
   }
 }
+export function moveTop(element) {
+  if (!orderAttrib)
+    return;
+  let current = getFirst(objects);
+  if (current == element)
+    return;
+  const firstOrder = current[orderAttrib];
+  while (current != element) {
+    const next = getNext(objects, current);
+    const nextOrder = next[orderAttrib];
+    current[orderAttrib] = nextOrder;
+    informModification(current, orderAttrib);
+    current = next;
+  }
+  element[orderAttrib] = firstOrder;
+  informModification(element, orderAttrib);
+  objects = remove(objects, element);
+  objects = insertAt(objects, 0, element);
+  pushChanges();
+}
 export function moveDown(element) {
   if (!orderAttrib)
     return;

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         MIN_ORDER?: 0 | undefined;
         reload?: ((_objects: object[]) => void) | undefined;
         moveUp?: ((element: object) => void) | undefined;
+        moveTop?: ((element: object) => void) | undefined;
         moveDown?: ((element: object) => void) | undefined;
         add?: ((onAddHandler: Function) => Promise<void>) | undefined;
     };
@@ -30,6 +31,7 @@ export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarE
     get MIN_ORDER(): 0;
     get reload(): (_objects: object[]) => void;
     get moveUp(): (element: object) => void;
+    get moveTop(): (element: object) => void;
     get moveDown(): (element: object) => void;
     get add(): (onAddHandler: Function) => Promise<void>;
 }

package/components/table/table.svelte

@@ -75,7 +75,6 @@ function override_items_from_slot(...args) {
     last_tick_internal = definition.items_ticket;
     if (definition.items)
       items = definition.items;
-    console.log("override_items_from_slot", definition.items, definition.items_ticket);
   }
   return 0;
 }

package/package.json

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

package/utils.js

@@ -105,13 +105,15 @@ export function editable(node, params)
     let active = false;
     let onRemove = undefined;
     let onFinish = undefined;
+    let onSoftEnter = undefined;
     if(params instanceof Object)
     {
         action = params.action ?? params;
         active = params.active ?? false;
         onRemove = params.remove ?? undefined
         onFinish = params.onFinish ?? undefined
-
+        onSoftEnter = params.onSoftEnter ?? undefined;
+       
         if(params.readonly)
             return;
     }
@@ -131,7 +133,7 @@ export function editable(node, params)
         if(observer)
             observer.disconnect();
 
-        await finish_editing(cancel, false);
+        await finish_editing({cancel: cancel});
     }
 
     const key_listener = async (e) =>
@@ -146,7 +148,7 @@ export function editable(node, params)
                 e.stopPropagation();
                 e.preventDefault();
 
-                await finish_editing(true, false);
+                await finish_editing({ cancel: true });
             }
             break;
 
@@ -154,7 +156,10 @@ export function editable(node, params)
             e.stopPropagation();
             e.preventDefault();
 
-            await finish_editing(false, true);
+            if(e.shiftKey && onSoftEnter)
+                await finish_editing({ softEnter: true});
+            else
+                await finish_editing({ incremental: true});
             break;
 
         case 'Backspace':
@@ -162,15 +167,19 @@ export function editable(node, params)
             {
                 e.stopPropagation();
                 e.preventDefault();
-                //await finish_editing(false, false);
                 onRemove();
             }
             break;
          }
     }
 
-    const finish_editing = async (cancel, incremental) =>
+    //const finish_editing = async (softEnter, cancel, incremental) =>
+        const finish_editing = async (params) =>
     {
+        const softEnter = params.softEnter ?? false;
+        const cancel = params.cancel ?? false;
+        const incremental = params.incremental ?? false;
+
        if(!active)
        {
             node.removeEventListener("blur", blur_listener);
@@ -186,6 +195,10 @@ export function editable(node, params)
         {
             node.innerHTML = org_text;
         }
+        else if(softEnter)
+        {
+            onSoftEnter(node.textContent)
+        }
         else if(action)
         {
             if(active)
@@ -202,7 +215,8 @@ export function editable(node, params)
                                 detail: 
                                 { 
                                     cancel: cancel, 
-                                    incremental: incremental
+                                    incremental: incremental,
+                                    softEnter: softEnter
                                 }
                             });