@humandialog/forms.svelte 0.5.10 → 0.5.12

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: fixed; 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;
@@ -977,7 +1018,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

@@ -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/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/horizontal.toolbar.svelte

@@ -130,11 +130,18 @@
         if(config.customOperations && Array.isArray(config.customOperations) && config.customOperations.length > 0)
         {
             config.customOperations.forEach( o => {
-                options.push({
-                            caption: o.caption,
-                            icon: o.icon,
-                            action: o.action
-                        })
+                let add = true;
+                if(o.condition)
+                    add = o.condition();
+
+                if(add)
+                {
+                    options.push({
+                                caption: o.caption,
+                                icon: o.icon,
+                                action: o.action
+                            })
+                }
             })
         }
 

package/index.d.ts

@@ -51,7 +51,7 @@ 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 { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
 export { mainViewReloader, reloadMainView } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -57,7 +57,7 @@ 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 { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
 export { mainViewReloader, reloadMainView } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "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.4.0",
+    "@humandialog/auth.svelte": "^1.5.1",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"

package/tenant.members.svelte

@@ -442,9 +442,9 @@
             
             <ListComboProperty name='Privileges' a='auth_group' onSelect={on_change_privileges}>
                 <ComboItem name='None'       key={0}  />
-                <ComboItem name='Can See'    key={1}  />
-                <ComboItem name='Can Invite' key={3}  />
-                <ComboItem name='Maintainer' key={7}  />
+                <ComboItem name='Can see'    key={1}  />
+                <ComboItem name='Can invite' key={3}  />
+                <ComboItem name='Can fully manage' key={7}  />
             </ListComboProperty>
 
             {#if showFiles}

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) =>

package/vertical.toolbar.svelte

@@ -98,11 +98,18 @@
         if(config.customOperations && Array.isArray(config.customOperations) && config.customOperations.length > 0)
         {
             config.customOperations.forEach( o => {
-                options.push({
-                            caption: o.caption,
-                            icon: o.icon,
-                            action: o.action
-                        })
+                let add = true;
+                if(o.condition)
+                    add = o.condition();
+
+                if(add)
+                {
+                    options.push({
+                                    caption: o.caption,
+                                    icon: o.icon,
+                                    action: o.action
+                                })
+                }
             })
         }