@humandialog/forms.svelte 0.5.11 → 0.5.13

package/components/combo/combo.d.ts

@@ -3,6 +3,7 @@ export declare class rCombo_item {
     Name: string | undefined;
     Avatar: string | undefined;
     Color: string | undefined;
+    Icon: any | undefined;
 }
 export declare class rCombo_definition {
     source: rCombo_item[];
@@ -13,5 +14,6 @@ export declare class rCombo_definition {
     element_key: string | undefined;
     element_name: string | undefined;
     element_avatar: string | undefined;
+    element_icon: string | undefined;
 }
 export declare const cached_sources: Map<string, Promise<object>>;

package/components/combo/combo.item.svelte

@@ -4,11 +4,13 @@ export let key = void 0;
 export let name = void 0;
 export let avatar = void 0;
 export let color = void 0;
+export let icon = void 0;
 let definition = getContext("rCombo-definition");
 let item = new rCombo_item();
 item.Name = name;
 item.Key = key;
 item.Avatar = avatar;
 item.Color = color;
+item.Icon = icon;
 definition.source.push(item);
 </script>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         name?: string | undefined;
         avatar?: string | undefined;
         color?: string | undefined;
+        icon?: any | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.js

@@ -3,6 +3,7 @@ export class rCombo_item {
     Name;
     Avatar; //url to avatar
     Color;
+    Icon = undefined;
 }
 export class rCombo_definition {
     source = [];
@@ -13,5 +14,6 @@ export class rCombo_definition {
     element_key;
     element_name;
     element_avatar;
+    element_icon;
 }
 export const cached_sources = new Map();

package/components/combo/combo.source.svelte

@@ -6,6 +6,7 @@ export let onCollect = void 0;
 export let key = "";
 export let name = "";
 export let avatar = "";
+export let icon = "";
 let definition = getContext("rCombo-definition");
 definition.collection_expr = association;
 definition.collection_path = path;
@@ -14,4 +15,5 @@ definition.onCollect = onCollect;
 definition.element_key = key;
 definition.element_name = name;
 definition.element_avatar = avatar;
+definition.element_icon = icon;
 </script>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         key?: string | undefined;
         name?: string | undefined;
         avatar?: string | undefined;
+        icon?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.svelte

@@ -84,6 +84,14 @@ function setup(...args) {
   item = self ?? $contextItemsStore[ctx];
   if (!typename)
     typename = $contextTypesStore[ctx];
+  if (!typename) {
+    if (item.$type)
+      typename = item.$type;
+    else if (item.$ref) {
+      let s2 = item.$ref.split("/");
+      typename = s2[1];
+    }
+  }
   if (!label)
     label = a;
   tick_request_internal = tick_request_internal + 1;
@@ -236,6 +244,7 @@ function selected_item(itm, a2) {
     let found = definition.source.find((e) => e.Key == choosed_value);
     if (!found)
       found = definition.source.find((e) => e.Name == choosed_value);
+    console.log("found: ", found);
     if (found)
       return found;
     else
@@ -493,6 +502,8 @@ function source_fetched(source) {
     if (icon) {
       if (definition.element_avatar)
         el.Avatar = e[definition.element_avatar];
+      else if (definition.element_icon)
+        el.Icon = e[definition.element_icon];
       else
         el.Avatar = e.$icon;
     }
@@ -541,6 +552,10 @@ function on_focus_out(e) {
                 {#if icon && sel_item}
                     {#if sel_item.Color}
                         <Icon size={5} circle={true} color={sel_item.Color}/>
+                    {:else if sel_item.Icon}
+                        <Icon size={4} component={sel_item.Icon}/>
+                    {:else if sel_item.Icon == null}
+                        <div class="w-4 h-4"></div>
                     {:else}
                         <Icon size={5} circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
                     {/if}
@@ -591,6 +606,10 @@ function on_focus_out(e) {
                                     <Icon size={5} circle={true} color={item.Color}/>
                                 {:else if item.Avatar} 
                                     <Icon size={5} circle={true} symbol={item.Avatar}/>
+                                {:else if item.Icon}
+                                    <Icon size={4} component={item.Icon}/>
+                                {:else if item.Icon == null}
+                                    <div class="w-4 h-4"></div>
                                 {:else if item.Name}
                                     <Icon size={5} circle={true} label={item.Name}/>
                                 {:else}

package/components/document/internal/palette.row.svelte

@@ -12,7 +12,10 @@ $:
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" on:click on:mousemove>
+<div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
+     on:click 
+     on:mousemove
+     on:mousedown>
     <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>

package/components/document/internal/palette.row.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         mousemove: MouseEvent;
+        mousedown: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/document/internal/palette.svelte

@@ -2,6 +2,8 @@
 <script>import { tick } from "svelte";
 import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
+import Icon from "../../icon.svelte";
+import { isDeviceSmallerThan } from "../../../utils.js";
 export let commands;
 export let width_px = 400;
 export let max_height_px = 500;
@@ -9,8 +11,22 @@ let visible = false;
 let css_style = "";
 let filtered_commands = [...commands];
 let current_command = filtered_commands.length ? filtered_commands[0] : null;
+let isToolbox = false;
 const dispatch = createEventDispatcher();
+let toolboxX;
+let toolboxY;
+export function showAsToolbox(rect) {
+  isToolbox = true;
+  visible = true;
+  const margin = 15;
+  const windowWidth = window.innerWidth - 2 * margin;
+  toolboxX = margin;
+  toolboxY = rect.bottom + margin;
+  css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
+  dispatch("palette_shown");
+}
 export function show(x, y, up = false) {
+  isToolbox = false;
   css_style = `width: ${width_px}px; max-height:${max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
   if (up)
     css_style += " transform: translate(0, -100%);";
@@ -18,6 +34,7 @@ export function show(x, y, up = false) {
   dispatch("palette_shown");
 }
 export function show_fullscreen(_width_px, _height_px) {
+  isToolbox = false;
   width_px = _width_px;
   max_height_px = _height_px;
   css_style = `position: fixed; left: 0px; top: 0px; width: ${_width_px}px; height: ${_height_px}px; z-index: 1055;`;
@@ -26,6 +43,7 @@ export function show_fullscreen(_width_px, _height_px) {
 }
 export function hide() {
   visible = false;
+  isToolbox = false;
   dispatch("palette_hidden");
 }
 export function execute_selected_command() {
@@ -84,7 +102,6 @@ async function execute_mouse_click(on_choice) {
   if (!visible)
     return;
   dispatch("palette_mouse_click");
-  await tick();
   hide();
   on_choice();
 }
@@ -100,24 +117,87 @@ function update_current_command(cmd) {
     rows.find((r) => r.cmd == cmd).is_highlighted = true;
   current_command = cmd;
 }
+function buttonMousedown(e) {
+  e.preventDefault();
+}
+let isMoving = false;
+let beforeTrackingClient = null;
+let beforeTrackingPos = null;
+function mousedown(e) {
+  if (e.touches.length != 1)
+    return;
+  const touch = e.touches.item(0);
+  beforeTrackingClient = new DOMPoint(touch.clientX, touch.clientY);
+  beforeTrackingPos = new DOMPoint(toolboxX, toolboxY);
+  isMoving = true;
+}
+function mousemove(e) {
+  if (isMoving && beforeTrackingClient && beforeTrackingPos) {
+    if (e.touches.length != 1)
+      return;
+    const touch = e.touches.item(0);
+    const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
+    toolboxX = beforeTrackingPos.x + trackDelta.x;
+    css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  }
+}
+function mouseup(e) {
+  isMoving = false;
+  beforeTrackingClient = null;
+  beforeTrackingPos = null;
+}
 </script>
 
-<div    class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30" 
-        hidden={!visible}
-        style={css_style}>
-    {#if filtered_commands && filtered_commands.length}
-        {#each filtered_commands as cmd, idx (cmd.caption)}
-            {@const id = "cpi_" + idx}
-            <Pallete_row    {id}
-                            cmd={cmd}
-                            is_highlighted={cmd == current_command}
-                            on:click={ () => { execute_mouse_click(cmd.on_choice); }}
-                            on:mousemove={ () => { on_mouse_over(cmd); }}
-                            bind:this={rows[idx]}
-                            />
-        {/each}
-    {:else}
-        <p class="text-sm text-stone-500">No results</p>
-    {/if}
+{#if isToolbox}
+    <menu   class=" not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+                    z-30
+                    flex flex-row flex-nowrap"
+            style={css_style}
+            hidden={!visible}
+            on:touchstart={mousedown}
+            on:touchmove={mousemove}
+            on:touchend={mouseup}>
+        {#if filtered_commands && filtered_commands.length}
+            {#each filtered_commands as cmd, idx (cmd.caption)}
+                {@const id = "cpi_" + idx}
+                {@const mobile = isDeviceSmallerThan("sm")}
+                {@const icon_placeholder_size = mobile ? 12 : 10}
+                <button class="font-medium m-0 py-2 pr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
+                        {id}
+                        bind:this={rows[idx]}
+                        on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                        on:mousedown={buttonMousedown}>
+                
+                    <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
+                        {#if cmd.icon}
+                            {@const cc = mobile ? 7 : 6}
+                            {@const icon_size = icon_placeholder_size - cc}
+                            <Icon size={icon_size} component={cmd.icon}/>
+                        {/if}
+                    </div>
+                </button>
+            {/each}
+        {/if}
+    </menu>
+{:else}
+    <div    class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30" 
+            hidden={!visible}
+            style={css_style}>
+        {#if filtered_commands && filtered_commands.length}
+            {#each filtered_commands as cmd, idx (cmd.caption)}
+                {@const id = "cpi_" + idx}
+                <Pallete_row    {id}
+                                cmd={cmd}
+                                is_highlighted={cmd == current_command}
+                                on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                                on:mousemove={ () => { on_mouse_over(cmd); }}
+                                on:mousedown={buttonMousedown}
+                                bind:this={rows[idx]}
+                                />
+            {/each}
+        {:else}
+            <p class="text-sm text-stone-500">No results</p>
+        {/if}
 
-</div>
+    </div>
+{/if}

package/components/document/internal/palette.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         commands: Document_command[];
         width_px?: number | undefined;
         max_height_px?: number | undefined;
+        showAsToolbox?: ((rect: DOMRect) => void) | undefined;
         show?: ((x: number, y: number, up?: boolean) => void) | undefined;
         show_fullscreen?: ((_width_px: number, _height_px: number) => void) | undefined;
         hide?: (() => void) | undefined;
@@ -20,12 +21,13 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {}; /**accessor*/
+    slots: {};
 };
 export type PaletteProps = typeof __propDef.props;
 export type PaletteEvents = typeof __propDef.events;
 export type PaletteSlots = typeof __propDef.slots;
 export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteEvents, PaletteSlots> {
+    get showAsToolbox(): (rect: DOMRect) => void;
     get show(): (x: number, y: number, up?: boolean) => void;
     get show_fullscreen(): (_width_px: number, _height_px: number) => void;
     get hide(): () => void;
@@ -63,5 +65,8 @@ export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteE
     get undefined(): any;
     /**accessor*/
     set undefined(_: any);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
 }
 export {};

package/components/document/rich.edit.svelte

@@ -1,9 +1,9 @@
 <script>import { Selection_helper } from "./internal/Selection_helper";
-import { getContext, onDestroy, onMount } from "svelte";
+import { afterUpdate, getContext, onDestroy, onMount } from "svelte";
 import { Selection_range, Selection_edge } from "./internal/Selection_range";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
-import { parseWidthDirective } from "../../utils.js";
+import { isDeviceSmallerThan, parseWidthDirective } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
 import FaFont from "svelte-icons/fa/FaFont.svelte";
 import FaRemoveFormat from "svelte-icons/fa/FaRemoveFormat.svelte";
@@ -13,6 +13,7 @@ import FaComments from "svelte-icons/fa/FaComment.svelte";
 import FaQuote from "svelte-icons/fa/FaQuoteRight.svelte";
 import FaWarn from "svelte-icons/fa/FaExclamationTriangle.svelte";
 import FaInfo from "svelte-icons/fa/FaInfo.svelte";
+import { showMenu } from "../menu";
 export let value = "";
 export let placeholder = "";
 export let self = null;
@@ -62,8 +63,12 @@ else
                             px-2.5`;
 let last_tick = -1;
 $: {
-  if (last_tick < $data_tick_store)
-    setup_source();
+  if (last_tick < $data_tick_store) {
+    if (has_changed_value)
+      saveData();
+    else
+      setup_source();
+  }
 }
 function setup_source() {
   last_tick = $data_tick_store;
@@ -80,6 +85,8 @@ function setup_source() {
   if (!value)
     value = "<p>\u200B</p>";
   has_changed_value = false;
+  if (stored_selection)
+    set_selection(stored_selection);
 }
 onMount(() => {
   if (!editable_div)
@@ -95,6 +102,9 @@ onMount(() => {
       subtree: true
     });
   }
+  return () => {
+    on_blur();
+  };
 });
 onDestroy(() => {
   if (!editable_div)
@@ -166,9 +176,12 @@ const on_keydown = (event) => {
       } else {
         event.cancelBubble = true;
         event.preventDefault();
-        if (is_multiline())
-          insert_new_line();
-        else
+        if (is_multiline()) {
+          if (event.shiftKey)
+            insert_character_at_caret_position("\n");
+          else
+            insert_new_line();
+        } else
           move_cursor_to_next_editable_element();
       }
       break;
@@ -176,6 +189,11 @@ const on_keydown = (event) => {
       store_node_text_and_position();
       show_command_palette();
       break;
+    case "Tab":
+      event.cancelBubble = true;
+      event.preventDefault();
+      insert_character_at_caret_position("	");
+      break;
     case "Backspace":
       if (is_range_selected()) {
         if (is_multi_range_selection()) {
@@ -715,7 +733,7 @@ function set_tag_and_class_for_paragraph(node, tag, css_class) {
   while (node && node.nodeType !== Node.ELEMENT_NODE)
     node = node.parentNode;
   if (!node)
-    return;
+    return false;
   let element = node;
   if (element.tagName == tag.toUpperCase()) {
     element.className = css_class;
@@ -737,7 +755,7 @@ function set_tag_and_class_for_paragraph(node, tag, css_class) {
 function do_format(tag, css_class) {
   const elem = editable_div;
   const editableElem = editable_div;
-  let stored_selection = Selection_helper.get_selection(elem);
+  let stored_selection2 = Selection_helper.get_selection(elem);
   let sel = window.getSelection();
   let should_restore_selection = false;
   if (sel.isCollapsed || sel.focusNode === sel.anchorNode) {
@@ -766,7 +784,28 @@ function do_format(tag, css_class) {
     } while (node);
   }
   if (should_restore_selection) {
-    const range = Selection_helper.create_range(editableElem, stored_selection.begin.absolute_index, stored_selection.end.absolute_index);
+    const range = Selection_helper.create_range(editableElem, stored_selection2.begin.absolute_index, stored_selection2.end.absolute_index);
+    set_selection(range);
+  }
+}
+function insert_character_at_caret_position(what_to_insert) {
+  if (is_range_selected()) {
+    console.log("Unsupported");
+    return false;
+  } else {
+    let sel;
+    sel = window.getSelection();
+    const focusNode = sel.focusNode;
+    const wholeText = focusNode.textContent;
+    const carretPos = sel.focusOffset;
+    let leftPart = wholeText.substring(0, carretPos);
+    let rightPart = wholeText.substring(carretPos);
+    focusNode.textContent = leftPart + what_to_insert + rightPart;
+    let pos = carretPos + 1;
+    let range = new Range();
+    range.collapse(true);
+    range.setStart(focusNode, pos);
+    range.setEnd(focusNode, pos);
     set_selection(range);
   }
 }
@@ -879,7 +918,10 @@ function show_command_palette() {
     y = rect.y - (preferred_palette_height - bottom_space);
   } else
     show_fullscreen = true;
-  if (show_fullscreen)
+  const isSmallDevice = isDeviceSmallerThan("sm");
+  if (isSmallDevice) {
+    palette.showAsToolbox(rect);
+  } else if (show_fullscreen)
     palette.show_fullscreen(client_rect.width, client_rect.height);
   else
     palette.show(x, y, show_above);
@@ -899,25 +941,18 @@ function navigate_command_palette(key) {
   else if (key == "ArrowUp")
     palette.navigate_up();
 }
+let stored_selection = void 0;
 function on_selection_changed() {
+  let active_range = Selection_helper.get_selection(editable_div);
+  stored_selection = window.getSelection()?.getRangeAt(0);
 }
 let intervalId = 0;
 function on_focus() {
-  if (pushChangesImmediately) {
-    intervalId = setInterval(
-      () => {
-        saveData();
-      },
-      2e3
-    );
-  }
 }
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
-  if (intervalId) {
-    clearInterval(intervalId);
-    intervalId = 0;
-  }
+  console.log("rich.edit: on_blur", active_range?.begin?.absolute_index);
+  stored_selection = void 0;
   if (onBlur) {
     onBlur();
     onBlur = void 0;
@@ -927,6 +962,12 @@ function on_blur() {
     $data_tick_store = last_tick;
   }
 }
+export function save() {
+  if (saveData()) {
+    last_tick = $data_tick_store + 1;
+    $data_tick_store = last_tick;
+  }
+}
 function saveData() {
   if (item && a && has_changed_value) {
     item[a] = changed_value;
@@ -948,7 +989,10 @@ let commands = [
   //   {   caption: 'Heading 1',    description: 'Big section heading',            tags: 'h1',      icon: FaHead,    icon_size: 6,      on_choice: () => { do_format('h2', '') } } ,
   //   {   caption: 'Heading 2',    description: 'Medium section heading',         tags: 'h2',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
   //   {   caption: 'Heading 3',    description: 'Small section heading',          tags: 'h3',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
-  { caption: "Heading", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
+  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: FaHead, icon_size: 6, on_choice: () => {
+    do_format("h1", "");
+  } },
+  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
     do_format("h2", "");
   } },
   //   {   caption: 'Heading 2',      description: 'Medium description heading',     tags: 'h3',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
@@ -977,7 +1021,7 @@ let commands = [
         on:keydown={on_keydown}
         on:mouseup={on_mouseup}
         class="{cs}     {appearance_class} 
-                        prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto"
+                        prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto whitespace-pre-wrap"
         on:blur={on_blur}
         on:focus={on_focus}
         on:focus

package/components/document/rich.edit.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         pushChangesImmediately?: boolean | undefined;
         run?: ((onStop?: undefined) => void) | undefined;
         getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
+        save?: (() => void) | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -28,5 +29,6 @@ export type RichSlots = typeof __propDef.slots;
 export default class Rich extends SvelteComponentTyped<RichProps, RichEvents, RichSlots> {
     get run(): (onStop?: undefined) => void;
     get getFormattingOperations(): (withCaptions?: boolean) => any[];
+    get save(): () => void;
 }
 export {};

package/components/kanban/Kanban.d.ts

@@ -16,6 +16,8 @@ export declare class rKanban_definition {
     titleAttrib: string;
     titleOnChange: Function | undefined;
     titleReadOnly: boolean;
+    titleHref: string | undefined;
+    titleHrefFunc: Function | undefined;
     summaryAttrib: string;
     summaryOnChange: Function | undefined;
     summaryReadOnly: boolean;

package/components/kanban/Kanban.js

@@ -4,7 +4,7 @@ export const KanbanCardBottom = 3;
 export class rKanban_column {
     id;
     title = '';
-    width = 'w-[240px]';
+    width = '';
     state = '';
     finishing = false;
     operations = undefined;
@@ -15,6 +15,8 @@ export class rKanban_definition {
     titleAttrib = '';
     titleOnChange = undefined;
     titleReadOnly = false;
+    titleHref = undefined;
+    titleHrefFunc = undefined;
     summaryAttrib = '';
     summaryOnChange = undefined;
     summaryReadOnly = false;

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

@@ -1,4 +1,5 @@
 <script>import { getContext, tick } from "svelte";
+import { push } from "svelte-spa-router";
 import {
   contextItemsStore,
   isActive,
@@ -8,7 +9,8 @@ import {
   editable,
   showFloatingToolbar,
   informModification,
-  pushChanges
+  pushChanges,
+  startEditing
 } from "../../..";
 import { FaArrowsAlt, FaTrash, FaPlus, FaExternalLinkAlt } from "svelte-icons/fa";
 import MoveOperations from "./kanban.move.menu.svelte";
@@ -24,6 +26,8 @@ $:
   selectedClass = isCardSelected ? "!border-blue-300" : "";
 $:
   focusedClass = isCardActive ? "bg-stone-100 dark:bg-stone-700" : "";
+$:
+  isLinkLike = isCardActive && (!!definition.titleHref || !!definition.titleHrefFunc);
 function calculate_active(...args) {
   return isActive("props", item);
 }
@@ -96,9 +100,13 @@ let summaryElement;
 let summaryPlaceholder = false;
 export async function editProperty(field) {
   if (field == "Title") {
-    titleElement.focus();
-    await tick();
-    setSelectionAtEnd(titleElement);
+    if (isLinkLike) {
+      startEditing(titleElement);
+    } else {
+      titleElement.focus();
+      await tick();
+      setSelectionAtEnd(titleElement);
+    }
   } else if (field == "Summary") {
     if (!!summaryElement) {
       summaryElement.focus();
@@ -127,6 +135,19 @@ export async function editProperty(field) {
     }
   }
 }
+function followDefinedHRef() {
+  let link = getHRef();
+  if (link)
+    push(link);
+}
+function getHRef() {
+  if (definition.titleHref)
+    return definition.titleHref;
+  else if (definition.titleHrefFunc)
+    return definition.titleHrefFunc(item);
+  else
+    return "";
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -162,25 +183,43 @@ export async function editProperty(field) {
     
 
     {#if isCardActive}
-        <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 isLinkLike}
+            <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}
+                use:editable={{
+                    action: (text) => onTitleChanged(text), 
+                    active: false,
+                    readonly: definition.titleReadOnly,
+                    onFinish: (d) => {titleElement.blur()}}}
+                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 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}
+            </h3>
         {/if}
-        </h3>
+        
     {: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

@@ -1,6 +1,6 @@
-<script>import { getContext, afterUpdate, tick } from "svelte";
+<script>import { getContext, afterUpdate, tick, onMount } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../../stores";
-import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing } from "../../../utils.js";
+import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing, isDeviceSmallerThan } from "../../../utils.js";
 import Card from "./kanban.card.svelte";
 import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
 import Inserter from "./kanban.inserter.svelte";
@@ -38,7 +38,6 @@ export function setBorder(what_to_do) {
 let definition = getContext("rKanban-definition");
 let columnDef = definition.columns[currentColumnIdx];
 let column_items = void 0;
-let width_class = columnDef.width ? `w-11/12 sm:${columnDef.width}` : "w-11/12 sm:w-[240px]";
 $:
   setup_data();
 $:
@@ -165,6 +164,25 @@ export function activate(e) {
       }
     );
 }
+onMount(() => {
+  window.addEventListener("resize", onResizeWindow);
+  return () => {
+    window.removeEventListener("resize", onResizeWindow);
+  };
+});
+let styleWidth = getWidthStyle();
+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;
+  if (window.innerWidth >= 640)
+    return `width: ${column_width}px; min-width: 180px; max-width: ${column_width}px;`;
+  else
+    return "width: 92%;";
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -172,11 +190,11 @@ export function activate(e) {
 <section class="    snap-center 
                     sm:snap-align-none 
                     flex-none sm:flex-1
-                    sm:min-w-[180px] sm:max-w-[240px]
                     sm:min-h-[calc(100vh-8rem)] 
                     min-h-[calc(100vh-5rem)] 
                     rounded-md border border-transparent  
-                    {width_class} {selected_class} {focused_class}"
+                    {selected_class} {focused_class}"
+        style={styleWidth}
         use:selectable={columnDef}
         on:click={activate}>
     <header class:cursor-pointer={!is_row_active && columnDef.operations} bind:this={headerElement}>
@@ -237,4 +255,5 @@ export function activate(e) {
         {/if}
 
     </ul>
-</section>
+</section>
+

package/components/kanban/kanban.column.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from "svelte";
 import { rKanban_column } from "./Kanban";
 export let title = "";
-export let width = "w-[240px]";
+export let width = "";
 export let state = "";
 export let finishing = false;
 export let operations = void 0;

package/components/kanban/kanban.title.svelte

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

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

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

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

@@ -36,7 +36,7 @@ $:
 $:
   focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
 $:
-  is_link_like = is_row_selected && (!!definition.title_href || !!definition.title_href_func);
+  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func);
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -117,18 +117,24 @@ function on_active_row_clicked(e, part) {
     }
   } else if (click_on_empty_space) {
     if (definition.title_href || definition.title_href_func) {
-      let link = "";
-      if (definition.title_href)
-        link = definition.title_href;
-      else if (definition.title_href_func)
-        link = definition.title_href_func(item);
-      if (link)
-        push(link);
     } else {
     }
   } else {
   }
 }
+function followDefinedHRef() {
+  let link = getHRef();
+  if (link)
+    push(link);
+}
+function getHRef() {
+  if (definition.title_href)
+    return definition.title_href;
+  else if (definition.title_href_func)
+    return definition.title_href_func(item);
+  else
+    return "";
+}
 function activate_row(e, item2) {
   activateItem("props", item2, toolbarOperations(item2));
   if (e)
@@ -174,8 +180,19 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  element_node.focus();
-  setSelectionAtEnd(element_node);
+  if (field == "Title") {
+    if (is_link_like) {
+      startEditing(element_node, () => {
+        placeholder = "";
+      });
+    } else {
+      element_node.focus();
+      setSelectionAtEnd(element_node);
+    }
+  } else {
+    element_node.focus();
+    setSelectionAtEnd(element_node);
+  }
 }
 function setSelectionAtEnd(element) {
   const textNode = element.childNodes[0];
@@ -214,43 +231,58 @@ export function scrollToView() {
     <slot name="left" element={item}/>
     
     <div    class="ml-3 w-full py-1" 
-            class:sm:hover:cursor-pointer={is_link_like}
             use:selectable={item} 
             on:click={(e) => {activate_row(e, item)}} 
             role="row" 
             tabindex="0">
         <div class="block sm:flex sm:flex-row" on:click={(e) => on_active_row_clicked(e, 'top')}>
            
-           {#if is_row_active}
-                {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
-                    <p  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 sm:w-2/3"
-                        id="__hd_list_ctrl_{item[item_key]}_Title"
-                        use:editable={{
-                            action: (text) => {change_name(text)},
-                            active: true,
-                            readonly: definition.title_readonly,
-                        }}> 
+            {#if is_row_active}
+                {#key item[title]}      <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
+                    {#if is_link_like}
+                        <p  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 sm:w-2/3
+                                    sm:hover:cursor-pointer underline"
+                                    id="__hd_list_ctrl_{item[item_key]}_Title"
+                                    on:click|stopPropagation={followDefinedHRef}
+                                    use:editable={{
+                                        action: (text) => {change_name(text)},
+                                        active: false,
+                                        readonly: definition.title_readonly,
+                                    }}
+                            > 
                             {element_title}
+                        </p>
+                    {:else}
+                        <p  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 sm:w-2/3"
+                            id="__hd_list_ctrl_{item[item_key]}_Title"
+                            use:editable={{
+                                action: (text) => {change_name(text)},
+                                active: true,
+                                readonly: definition.title_readonly,
+                            }}> 
+                                {element_title}
 
-                        {#if definition.onOpen}
-                            <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
-                                    on:click={(e) => definition.onOpen(item)}>
-                                <FaExternalLinkAlt/>
-                            </button>
-                        {/if}
-                    </p>
+                            {#if definition.onOpen}
+                                <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
+                                        on:click={(e) => definition.onOpen(item)}>
+                                    <FaExternalLinkAlt/>
+                                </button>
+                            {/if}
+                        </p>
+                    {/if}
                 {/key}
-           {:else}
+            {:else}
                 <p  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 sm:w-2/3"
                     id="__hd_list_ctrl_{item[item_key]}_Title"> 
                     {element_title}
                 </p>
-           {/if}
-           
+            {/if}
            
 
             <section class="hidden sm:block w-full sm:flex-none sm:w-1/3">

package/index.d.ts

@@ -51,8 +51,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect, isDeviceSmallerThan } from './utils';
-export { mainViewReloader, reloadMainView } from './stores.js';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
+export { mainContentPageReloader, reloadMainContentPage } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';

package/index.js

@@ -57,8 +57,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect, isDeviceSmallerThan } from './utils';
-export { mainViewReloader, reloadMainView } from './stores.js';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
+export { mainContentPageReloader, reloadMainContentPage } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.5.0",
+    "@humandialog/auth.svelte": "^1.5.3",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"

package/stores.d.ts

@@ -1,7 +1,7 @@
 export function setNavigatorTitle(key: any, title: any): void;
 export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;
-export function reloadMainView(): void;
+export function reloadMainContentPage(): void;
 export function set_dark_mode_default(value: any): void;
 export function set_default_tools_visible(value: any): void;
 export function restore_defults(): void;
@@ -28,7 +28,7 @@ export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
 export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
 export const page_title: import("svelte/store").Writable<string>;
 export const nav_titles: import("svelte/store").Writable<{}>;
-export const mainViewReloader: import("svelte/store").Writable<number>;
+export const mainContentPageReloader: import("svelte/store").Writable<number>;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;

package/stores.js

@@ -10,7 +10,7 @@ export const contextToolbarOperations = writable([]);
 export const pageToolbarOperations = writable([]);
 export const page_title = writable('');
 export const nav_titles = writable({});
-export const mainViewReloader = writable(1);
+export const mainContentPageReloader = writable(1);
 
 export function setNavigatorTitle(key, title)
 {
@@ -31,11 +31,11 @@ export function hasDataItem()
     return itm !== null && itm !== undefined;
 }
 
-export function reloadMainView()
+export function reloadMainContentPage()
 {
-    let val = get(mainViewReloader);
+    let val = get(mainContentPageReloader);
     val += 1;
-    mainViewReloader.set(val);
+    mainContentPageReloader.set(val);
 }
 
 

package/utils.d.ts

@@ -9,6 +9,7 @@ export function editable(node: any, params: any): {
     destroy(): void;
 } | undefined;
 export function startEditing(element: any, finish_callback: any): void;
+export function saveCurrentEditable(): void;
 export function selectable(node: any, itm: any): {
     destroy(): void;
 };
@@ -33,3 +34,4 @@ export namespace SCREEN_SIZES {
     const lg: number;
     const xl: number;
 }
+export let currentEditable: null;

package/utils.js

@@ -97,6 +97,8 @@ export function getActive(context_level)
         return null;
 }
 
+export let currentEditable = null;
+
 export function editable(node, params)
 {
     let action;
@@ -122,6 +124,9 @@ export function editable(node, params)
     const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
+        if(currentEditable == node)
+            currentEditable = null;
+
         let cancel = !node.textContent
         if(observer)
             observer.disconnect();
@@ -170,6 +175,7 @@ export function editable(node, params)
        {
             node.removeEventListener("blur", blur_listener);
             node.removeEventListener("keydown", key_listener);
+            node.removeEventListener("save", save_listener);
             node.contentEditable = "false"
        
             let sel = window.getSelection();
@@ -206,11 +212,20 @@ export function editable(node, params)
             node.removeEventListener("finish", (e) => {});
     }
 
+    const save_listener = async (e) =>
+    {
+        if(has_changed)
+            await action(node.textContent)
+    }
+
     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();
 
@@ -235,6 +250,8 @@ export function editable(node, params)
         node.addEventListener("blur", blur_listener);
         node.addEventListener("keydown", key_listener);
         has_changed = false;
+        currentEditable = node;
+        node.addEventListener("save", save_listener)
         
         observer = new MutationObserver(() => { has_changed = true; });
         observer.observe(   node,  {
@@ -298,6 +315,12 @@ export function startEditing(element, finish_callback)
     }
 }
 
+export function saveCurrentEditable()
+{
+    if(currentEditable)
+        currentEditable.dispatchEvent(new Event("save"))
+}
+
 export function selectable(node, itm)
 {
     const select_listener = (e) =>