@humandialog/forms.svelte 0.5.20 → 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/combo/combo.svelte

@@ -26,6 +26,7 @@ export let inContext = "sel";
 export let cached = false;
 export let filtered = false;
 export let pushChangesImmediately = true;
+export let hasNone = isAssociation;
 let is_compact = getContext("rIs-table-component") || compact;
 if (!definition) {
   definition = new rCombo_definition();
@@ -265,14 +266,18 @@ async function on_choose(itm) {
   if (onSelect) {
     if (itm == new_item_option)
       await onNewItemCreated(itm.Key, itm.Name);
-    else
-      await onSelect(item, itm.Key, itm.Name);
+    else {
+      if (itm)
+        await onSelect(item, itm.Key, itm.Name);
+      else
+        await onSelect(item, null, null);
+    }
     tick_request_internal = tick_request_internal + 1;
   } else {
     if (isAssociation) {
       if (choiceCallback) {
         let body = {
-          choice: itm.Key
+          choice: itm ? itm.Key : null
         };
         let path;
         if (item.$ref)
@@ -297,15 +302,19 @@ async function on_choose(itm) {
         let result = await reef.post(
           path,
           {
-            [a]: itm.Key
+            [a]: itm ? itm.Key : null
           }
         );
         if (result) {
-          let name = definition.element_name ?? "$display";
-          item[a] = {
-            $ref: itm.Key,
-            [name]: itm.Name
-          };
+          if (itm) {
+            let name = definition.element_name ?? "$display";
+            item[a] = {
+              $ref: itm.Key,
+              [name]: itm.Name
+            };
+          } else {
+            item[a] = null;
+          }
           tick_request_internal = tick_request_internal + 1;
         }
       }
@@ -319,14 +328,14 @@ async function on_choose(itm) {
         let fields = calc_path_fields_param();
         if (fields)
           path += fields;
-        let value = itm.Key ?? itm.Name;
+        let value = itm ? itm.Key ?? itm.Name : null;
         let result = await reef.post(path, { choice: value });
         if (result) {
           item[a] = result;
           tick_request_internal = tick_request_internal + 1;
         }
       } else {
-        item[a] = itm.Key ?? itm.Name;
+        item[a] = itm ? itm.Key ?? itm.Name : null;
         tick_request_internal = tick_request_internal + 1;
         if (item && a && typename) {
           informModification(item, a, typename);
@@ -336,8 +345,12 @@ async function on_choose(itm) {
       }
     }
   }
-  if (!!changed)
-    changed(itm.Key, itm.Name);
+  if (!!changed) {
+    if (itm)
+      changed(itm.Key, itm.Name);
+    else
+      changed(null, null);
+  }
 }
 function on_keydown(e) {
   switch (e.key) {
@@ -588,6 +601,22 @@ function on_focus_out(e) {
         <ul class="py-1">
 
             {#if definition.source && definition.source.length}
+                {#if hasNone}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <li class="rounded p-2 flex flex-row items-center {font_size}" 
+                        class:bg-stone-100={highlighted_option == null}
+                        class:dark:bg-stone-700={highlighted_option == null}
+                        class:dark:hover:bg-stone-700={highlighted_option == null}
+                        on:mousemove={() => on_mouse_move(null)}
+                        on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
+                        tabindex="-1">
+
+                        <div class="ml-2">
+                            &lt;none&gt;
+                        </div>
+                    </li>
+                {/if}
+
                 {@const _filtered_source = filtered_source ? filtered_source : definition.source}
                 {#if _filtered_source.length > 0}
                     {#each _filtered_source as item (item.Key)}

package/components/combo/combo.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         cached?: boolean | undefined;
         filtered?: boolean | undefined;
         pushChangesImmediately?: boolean | undefined;
+        hasNone?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
         hide?: (() => void) | undefined;
     };

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

@@ -18,6 +18,7 @@ export declare class rKanban_definition {
     titleReadOnly: boolean;
     titleHref: string | undefined;
     titleHrefFunc: Function | undefined;
+    titleHasAttachment: Function | undefined;
     summaryAttrib: string;
     summaryOnChange: Function | undefined;
     summaryReadOnly: boolean;
@@ -39,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

@@ -17,6 +17,7 @@ export class rKanban_definition {
     titleReadOnly = false;
     titleHref = undefined;
     titleHrefFunc = undefined;
+    titleHasAttachment = undefined;
     summaryAttrib = '';
     summaryOnChange = undefined;
     summaryReadOnly = false;
@@ -50,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

@@ -12,8 +12,7 @@ import {
   pushChanges,
   startEditing
 } from "../../..";
-import { FaArrowsAlt, FaTrash, FaPlus, FaExternalLinkAlt } from "svelte-icons/fa";
-import MoveOperations from "./kanban.move.menu.svelte";
+import { FaRegFileAlt } from "svelte-icons/fa";
 import Properties from "./kanban.props.svelte";
 import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "../Kanban";
 export let item;
@@ -148,6 +147,28 @@ function getHRef() {
   else
     return "";
 }
+function performOpen(e) {
+  e.stopPropagation();
+  if (isLinkLike)
+    followDefinedHRef();
+  else
+    definition.onOpen(item);
+}
+function conditionalClick(node, { condition, callback }) {
+  if (condition) {
+    node.addEventListener("click", callback);
+    return {
+      destroy() {
+        node.removeEventListener("click", callback);
+      }
+    };
+  }
+}
+function showAttachementIcon() {
+  if (!definition.titleHasAttachment)
+    return false;
+  return definition.titleHasAttachment(item);
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -183,43 +204,38 @@ function getHRef() {
     
 
     {#if isCardActive}
-        {#if isLinkLike}
+        {@const hasOpen = !!definition.onOpen}
+        {@const canOpen = isLinkLike || hasOpen}
+        {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
+        {@const showIcon = showAttachementIcon()}
             <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 truncate w-full sm:flex-none
-                        relative 
-                        sm:hover:cursor-pointer underline"
-                on:click|stopPropagation={followDefinedHRef}
+                        relative {openableClass}"
                 use:editable={{
                     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}}
                 bind:this={titleElement}>
                     {item[definition.titleAttrib]}
-            </h3>
-        {:else}
-            <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 truncate w-full sm:flex-none
-                        relative"
-                        use:editable={{
-                            action: (text) => onTitleChanged(text), 
-                            active: true,
-                            readonly: definition.titleReadOnly,
-                            onFinish: (d) => {titleElement.blur()}}}
-                        bind:this={titleElement}>
-                {item[definition.titleAttrib]}
 
-                {#if definition.onOpen}
-                <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
-                        on:click={(e) => definition.onOpen(item)}>
-                    <FaExternalLinkAlt/>
-                </button>
+                {#if showIcon}
+                    <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">
+                        <FaRegFileAlt/>
+                    </span>
                 {/if}
             </h3>
-        {/if}
+
+            <!--Tooltip type='light' triggeredBy="#attachement">Has attachement</Tooltip-->
         
+          
+                        
     {:else}
         <h3  class=" text-lg font-semibold min-h-[1.75rem]
                     sm:text-sm sm:font-semibold sm:min-h-[1.25rem]

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

@@ -9,6 +9,8 @@ export let currentColumnIdx;
 export let onInsert;
 let column_element;
 export function getHeight() {
+  if (!column_element)
+    return 0;
   return column_element.getBoundingClientRect().height;
 }
 let titleElement;
@@ -20,6 +22,8 @@ export const SET_RIGHT = 1;
 export const CLEAR_LEFT = 2;
 export const CLEAR_RIGHT = 3;
 export function setBorder(what_to_do) {
+  if (!column_element)
+    return;
   switch (what_to_do) {
     case SET_LEFT:
       column_element.classList.add("border-l");
@@ -52,8 +56,31 @@ $:
   force_rerender($data_tick_store, $contextItemsStore);
 export function reload() {
   let allItems = definition.getItems();
-  if (definition.stateAttrib)
-    column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+  if (definition.stateAttrib) {
+    if (columnDef.state < 0) {
+      const isExplicitState = (e) => {
+        const elementState = e[definition.stateAttrib];
+        const colsNo = definition.columns.length;
+        for (let i = 0; i < colsNo; i++) {
+          const def = definition.columns[i];
+          if (def.state >= 0 && def.state == elementState)
+            return true;
+        }
+        return false;
+      };
+      column_items = allItems.filter((e) => !isExplicitState(e));
+    } else
+      column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+  }
+}
+export function isVisible() {
+  if (columnDef.state < 0) {
+    if (column_items && column_items.length > 0)
+      return true;
+    else
+      return false;
+  } else
+    return true;
 }
 function setup_data(...args) {
   reload();
@@ -111,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;
@@ -175,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%;";
 }
@@ -187,6 +219,8 @@ function getWidthStyle() {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
+{#if (columnDef.state >=0) || ((column_items && column_items.length > 0))}
+
 <section class="    snap-center 
                     sm:snap-align-none 
                     flex-none sm:flex-1
@@ -194,6 +228,8 @@ function getWidthStyle() {
                     min-h-[calc(100vh-5rem)] 
                     rounded-md border border-transparent  
                     {selected_class} {focused_class}"
+                    
+                    
         style={styleWidth}
         use:selectable={columnDef}
         on:click={activate}>
@@ -221,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}
 
@@ -243,17 +279,17 @@ 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}
 
     </ul>
 </section>
-
+{/if}

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         CLEAR_RIGHT?: 3 | undefined;
         setBorder?: ((what_to_do: number) => void) | undefined;
         reload?: (() => void) | undefined;
+        isVisible?: (() => boolean) | undefined;
         findCardByItem?: ((item: object) => any) | undefined;
         activateByItemId?: ((id: number) => void) | undefined;
         add?: ((after?: object | number) => Promise<void>) | undefined;
@@ -43,6 +44,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get CLEAR_RIGHT(): 3;
     get setBorder(): (what_to_do: number) => void;
     get reload(): () => void;
+    get isVisible(): () => boolean;
     get findCardByItem(): (item: object) => any;
     get activateByItemId(): (id: number) => void;
     get add(): (after?: number | object) => Promise<void>;

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/internal/kanban.props.svelte

@@ -107,9 +107,11 @@ async function editTags(field, propIdx) {
                         a={prop.a}
                         onSelect={prop.onSelect}
                         isAssociation={prop.association}
+                        hasNone={prop.hasNone}
                         icon={false}
                         definition={prop.combo_definition}
                         s="xs"
+                        changed={(k,n) => { /*fake assignment for component rer-ender*/ item[prop.a] = item[prop.a]; }} 
                         bind:this={propElements[idx]}/>
             {:else if prop.type == rList_property_type.Static}
                 <p

package/components/kanban/kanban.combo.svelte

@@ -6,6 +6,7 @@ export let name = "";
 export let a = "";
 export let onSelect = void 0;
 export let association = false;
+export let hasNone = association;
 export let top = false;
 export let middle = true;
 export let bottom = false;
@@ -23,6 +24,7 @@ if (!a && name) {
 }
 combo_property.onSelect = onSelect;
 combo_property.association = association;
+combo_property.hasNone = hasNone;
 if (top)
   combo_property.position = KanbanCardTop;
 else if (bottom)

package/components/kanban/kanban.combo.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         a?: string | undefined;
         onSelect?: undefined;
         association?: boolean | undefined;
+        hasNone?: boolean | undefined;
         top?: boolean | undefined;
         middle?: boolean | undefined;
         bottom?: boolean | undefined;

package/components/kanban/kanban.svelte

@@ -125,7 +125,12 @@ export async function reload(data, selectElement = KEEP_SELECTION) {
   }
 }
 export function getColumnIdx(item) {
-  return definition.columns.findIndex((c2) => c2.state == item[definition.stateAttrib]);
+  let idx = definition.columns.findIndex((c2) => c2.state == item[definition.stateAttrib]);
+  if (idx >= 0)
+    return idx;
+  else {
+    return definition.columns.findIndex((c2) => c2.state < 0);
+  }
 }
 export function edit(item, field) {
   const columnIdx = getColumnIdx(item);
@@ -299,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;
@@ -308,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) {
@@ -427,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/kanban/kanban.title.svelte

@@ -4,11 +4,13 @@ export let onChange = void 0;
 export let readOnly = false;
 export let href = void 0;
 export let hrefFunc = void 0;
+export let hasAttachment = void 0;
 let definition = getContext("rKanban-definition");
 definition.titleAttrib = a;
 definition.titleOnChange = onChange;
 definition.titleReadOnly = readOnly;
 definition.titleHref = href;
 definition.titleHrefFunc = hrefFunc;
+definition.titleHasAttachment = hasAttachment;
 </script>
 

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         readOnly?: boolean | undefined;
         href?: string | undefined;
         hrefFunc?: Function | undefined;
+        hasAttachment?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/List.d.ts

@@ -19,6 +19,7 @@ export declare class rList_property_combo extends rList_property {
     constructor();
     association: boolean;
     combo_definition: rCombo_definition;
+    hasNone: boolean;
 }
 export declare class rList_property_tags extends rList_property {
     constructor();

package/components/list/List.js

@@ -25,6 +25,7 @@ export class rList_property_combo extends rList_property {
     }
     association = false;
     combo_definition;
+    hasNone = false;
 }
 export class rList_property_tags extends rList_property {
     constructor() {

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

@@ -90,6 +90,7 @@ async function edit_date(field, prop_idx) {
                                 a={prop.a}
                                 onSelect={prop.onSelect}
                                 isAssociation={prop.association}
+                                hasNone={prop.hasNone}
                                 icon={false} 
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}

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.combo.svelte

@@ -5,6 +5,7 @@ export let name;
 export let a = "";
 export let onSelect = void 0;
 export let association = false;
+export let hasNone = association;
 let definition = getContext("rList-definition");
 let combo_property = new rList_property_combo();
 combo_property.name = name;
@@ -13,6 +14,7 @@ if (!combo_property.a)
   combo_property.a = combo_property.name;
 combo_property.onSelect = onSelect;
 combo_property.association = association;
+combo_property.hasNone = hasNone;
 definition.properties.push(combo_property);
 setContext("rCombo-definition", combo_property.combo_definition);
 </script>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         a?: string | undefined;
         onSelect?: undefined;
         association?: boolean | undefined;
+        hasNone?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.item.svelte

@@ -8,6 +8,7 @@ import {
   editable as _editable,
   handleSelect,
   activateItem,
+  startEditing,
   getActive
 } from "../../utils";
 import { showMenu } from "../menu";
@@ -18,11 +19,48 @@ export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
 export let item = void 0;
+export let summary = void 0;
 let isOnPage = getContext("rIs-page-component");
+let summaryElement = null;
+let summaryPlaceholder = false;
+let summaryEditable = void 0;
 $:
   context_data = $contextItemsStore;
 $:
   isRowActive = calculateIsRowActive($contextItemsStore);
+$:
+  summaryText = calculateSummary(summary);
+function calculateSummary(...args) {
+  if (!summary) {
+    summaryEditable = void 0;
+    return "";
+  }
+  if (summary instanceof Object) {
+    summaryEditable = summary.editable;
+    if (summary.content)
+      return summary.content;
+    else
+      return "";
+  } else {
+    summaryEditable = void 0;
+    return summary;
+  }
+}
+export async function editSummary() {
+  if (!summaryEditable)
+    return;
+  if (!!summaryElement)
+    startEditing(summaryElement, (d) => {
+      summaryPlaceholder = false;
+    });
+  else {
+    summaryPlaceholder = true;
+    await tick();
+    startEditing(summaryElement, (d) => {
+      summaryPlaceholder = false;
+    });
+  }
+}
 let user_class = $$props.class ?? "";
 let root;
 function calculateIsRowActive(...args) {
@@ -130,34 +168,50 @@ function activateRow(e) {
         class="     border border-transparent rounded-lg
                     text-lg sm:text-base font-normal 
                     text-stone-900 sm:hover:bg-stone-100  
-                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}
-                    flex flex-row justify-between"
+                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}"
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
         class:selected={selected(selectable, context_data)}>
-            <a  href={href} 
-                on:click={on_link_clicked} 
-                class="flex-1 ml-2 my-3 sm:my-2 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 class="flex flex-row justify-between">
+                <a  href={href} 
+                    on:click={on_link_clicked} 
+                    class="flex-1 ml-2 mt-3 sm:mt-2 inline-flex items-center group"
+                    class:mb-3={!summary}
+                    class:sm:mb-2={!summary}
+                    >
+                    {#if icon}
+                        <Icon size={5} component={icon}/>
+                    {/if}
+                    <span   class="ml-3 group-hover:underline"
+                            use:editable_if_needed={editable}>
+                        <slot/>
+                    </span>
+                </a>
 
-            {#if !isOnPage}
-            <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
-                        use:selectable_if_needed={selectable}>
-                {#if can_show_context_menu(selectable, context_data)}
-                    <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
-                        <FaBars/>
-                    </button>
+                {#if !isOnPage}
+                <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
+                            use:selectable_if_needed={selectable}>
+                    {#if can_show_context_menu(selectable, context_data)}
+                        <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
+                            <FaBars/>
+                        </button>
+                    {/if}
+                </section>
                 {/if}
-            </section>
+            </div>
+
+            {#if summary}
+                <p class="text-xs ml-10 mb-2 mr-2
+                        text-stone-900 dark:text-stone-400
+                        cursor-default"
+                    use:selectable_if_needed={selectable}
+                    use:editable_if_needed={summaryEditable}
+                    bind:this={summaryElement}>
+                    {summaryText}
+                </p>
             {/if}
-        </div>
+
+    </div>
 </li>
 
 

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         editable?: any | undefined;
         operations?: any | undefined;
         item?: object | undefined;
+        summary?: string | object | undefined;
+        editSummary?: (() => Promise<void>) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -25,5 +27,6 @@ export type SidebarProps = typeof __propDef.props;
 export type SidebarEvents = typeof __propDef.events;
 export type SidebarSlots = typeof __propDef.slots;
 export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get editSummary(): () => Promise<void>;
 }
 export {};

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;
@@ -73,9 +93,9 @@ function onBlurInserter() {
 }
 </script>
 
-{#each objects as item (item.Id)}
+{#each objects as item, idx (item.Id)}
     {#key item}             <!-- Forces to fully rerender when item changed to fire use: callbacks again -->
-        <slot {item}/>
+        <slot {item} {idx}/>
     {/key}
 {/each }
 

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;
     };
@@ -18,6 +19,7 @@ declare const __propDef: {
     slots: {
         default: {
             item: object;
+            idx: any;
         };
     };
 };
@@ -29,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.20",
+  "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
                                 }
                             });