@humandialog/forms.svelte 1.3.14 → 1.3.16

package/components/Fab.svelte

@@ -66,15 +66,12 @@ export function activateMainOperation() {
 function on_click(e, operation) {
   if (!operation)
     return;
-  if (operation.action) {
-    let focused_item = null;
-    if ($contextItemsStore.focused)
-      focused_item = $contextItemsStore[$contextItemsStore.focused];
-    operation.action(focused_item);
-  }
   let owner = e.target;
   while (owner && (owner.tagName != "BUTTON" && owner.tagName != "LI"))
     owner = owner.parentElement;
+  if (operation.action) {
+    operation.action(owner);
+  }
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();

package/components/Floating_container.svelte

@@ -1,6 +1,6 @@
 <script>import { tick, afterUpdate } from "svelte";
 import { isDeviceSmallerThan } from "../utils";
-import { toolsActionsOperations } from "../stores";
+import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
 let x;
 let y;
@@ -35,7 +35,7 @@ export async function show(around, _toolbar, _props = {}) {
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -52,7 +52,7 @@ export async function show(around, _toolbar, _props = {}) {
           ]
         }
       ]
-    };
+    });
   }
   await tick();
   if (!was_visible)
@@ -63,9 +63,10 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
+  if (visible)
+    popToolsActionsOperations();
   visible = false;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
-  $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
   rootElement?.removeEventListener("click", on_before_container_click, true);
 }

package/components/combo/combo.svelte

@@ -1,4 +1,4 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore, toolsActionsOperations } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
@@ -171,7 +171,11 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect = textbox.getBoundingClientRect();
+  let rect;
+  if (is_compact)
+    rect = textbox.getBoundingClientRect();
+  else
+    rect = combo.getBoundingClientRect();
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
@@ -216,6 +220,8 @@ export function show(event, hide_callback) {
     dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
+    if (!is_compact)
+      dropdown_position += `width: ${preferred_palette_width}px`;
   }
   is_dropdown_open = true;
   if (filtered) {
@@ -235,7 +241,7 @@ export function show(event, hide_callback) {
     });
   }
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -252,14 +258,16 @@ export function show(event, hide_callback) {
           ]
         }
       ]
-    };
+    });
   }
 }
 export function hide() {
+  if (!is_dropdown_open)
+    return;
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
-  $toolsActionsOperations = [];
+  popToolsActionsOperations();
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
@@ -643,7 +651,8 @@ function on_focus_out(e) {
                 {combo_text}</span>
 
             {#if can_be_activated }
-                <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}">
+                <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}"
+                    class:ms-auto={!is_compact}>
                     <FaChevronDown/>
                 </div>
             {/if}

package/components/contextmenu.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore, toolsActionsOperations } from "../stores";
+import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
 import { FaTimes } from "svelte-icons/fa";
@@ -109,7 +109,7 @@ export async function show(around, _operations) {
     window.addEventListener("click", on_before_window_click, true);
   }
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -126,7 +126,7 @@ export async function show(around, _operations) {
           ]
         }
       ]
-    };
+    });
   }
   await tick();
   css_position = calculatePosition(x, y, around_rect, true, false);
@@ -139,7 +139,8 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  $toolsActionsOperations = [];
+  if (visible)
+    popToolsActionsOperations();
   visible = false;
   css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
@@ -319,8 +320,9 @@ function mousedown(e) {
                     <p> {operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
-                        <p  class="text-sm font-normal text-stone-900 dark:text-stone-500 truncate inline-block"
-                            style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{operation.description}</p>
+                        <p  class=" text-sm font-normal text-stone-900 dark:text-stone-500 truncate inline-block">
+                            {operation.description}
+                        </p>
                     {/if}
                 </div>
                 {#if has_submenu}

package/components/date.svelte

@@ -3,6 +3,7 @@ import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores
 import { informModification, pushChanges } from "../updates.js";
 import { parseWidthDirective, isDeviceSmallerThan } from "../utils.js";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
+import { getFormattedStringDate, getNiceStringDate } from "./date_utils.js";
 export let self = null;
 export let a = "";
 export let context = "";
@@ -132,141 +133,8 @@ function setup(...args) {
     });
   } else
     can_be_activated = true;
-  rValue = get_formatted_date(value);
-  pretty_value = get_pretty_value(value);
-}
-function get_pretty_value(d) {
-  if (!d)
-    return "";
-  let month = d.getMonth();
-  let day = d.getDate();
-  let year = d.getFullYear();
-  const now = new Date(Date.now());
-  let current_month = now.getMonth();
-  let current_day = now.getDate();
-  let current_year = now.getFullYear();
-  let is_far_date = true;
-  const far_date_threshold = 14 * 24 * 60 * 60 * 1e3;
-  if (Math.abs(now.getTime() - d.getTime()) < far_date_threshold)
-    is_far_date = false;
-  if (year != current_year) {
-    if (is_far_date)
-      return `${day} ${month_name(month)} ${year}`;
-    else
-      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
-  }
-  if (month != current_month) {
-    if (is_far_date)
-      return `${day} ${month_name(month)}`;
-    else
-      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
-  } else {
-    let day_of_week = d.getDay();
-    let current_day_of_week = now.getDay();
-    if (day_of_week == 0)
-      day_of_week = 7;
-    if (current_day_of_week == 0)
-      current_day_of_week = 7;
-    let days_diff = day - current_day;
-    if (days_diff == 0)
-      return "Today";
-    else if (days_diff == 1)
-      return "Tomorrow";
-    else if (days_diff == -1)
-      return "Yesterday";
-    else if (days_diff > 0 && days_diff <= 7) {
-      if (day_of_week > current_day_of_week)
-        return day_name(day_of_week);
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else if (days_diff > 0) {
-      if (is_far_date)
-        return `${d.getDate()} ${month_name(d.getMonth())}`;
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else if (days_diff < 0 && days_diff > -7) {
-      if (day_of_week < current_day_of_week)
-        return day_name(day_of_week);
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else {
-      if (is_far_date)
-        return `${d.getDate()} ${month_name(d.getMonth())}`;
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    }
-  }
-}
-function day_name(d) {
-  switch (d) {
-    case 0:
-      return "Sun";
-    case 1:
-      return "Mon";
-    case 2:
-      return "Tue";
-    case 3:
-      return "Wed";
-    case 4:
-      return "Thu";
-    case 5:
-      return "Fri";
-    case 6:
-      return "Sat";
-    case 7:
-      return "Sun";
-  }
-  return "";
-}
-function month_name(m) {
-  switch (m) {
-    case 0:
-      return "Jan";
-    case 1:
-      return "Feb";
-    case 2:
-      return "Mar";
-    case 3:
-      return "Apr";
-    case 4:
-      return "May";
-    case 5:
-      return "Jun";
-    case 6:
-      return "Jul";
-    case 7:
-      return "Aug";
-    case 8:
-      return "Sep";
-    case 9:
-      return "Oct";
-    case 10:
-      return "Nov";
-    case 11:
-      return "Dec";
-  }
-  return "";
-}
-function get_formatted_date(d) {
-  if (!d)
-    return "";
-  let month = "" + (d.getMonth() + 1);
-  let day = "" + d.getDate();
-  let year = d.getFullYear();
-  let hour = "" + d.getHours();
-  let minutes = "" + d.getMinutes();
-  if (day.length < 2)
-    day = "0" + day;
-  if (month.length < 2)
-    month = "0" + month;
-  if (hour.length < 2)
-    hour = "0" + hour;
-  if (minutes.length < 2)
-    minutes = "0" + minutes;
-  if (type == "datetime-local")
-    return `${year}-${month}-${day} ${hour}:${minutes}`;
-  else
-    return `${year}-${month}-${day}`;
+  rValue = getFormattedStringDate(value, type);
+  pretty_value = getNiceStringDate(value);
 }
 async function on_changed() {
   if (!rValue)

package/components/date_utils.d.ts

@@ -0,0 +1,4 @@
+export function getFormattedStringDate(d: any, type?: string): string;
+export function getNiceStringDate(d: any): string;
+export function dayName(d: any): "" | "Sun" | "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat";
+export function monthName(m: any): "" | "Jan" | "Feb" | "Mar" | "Apr" | "May" | "Jun" | "Jul" | "Aug" | "Sep" | "Oct" | "Nov" | "Dec";

package/components/date_utils.js

@@ -0,0 +1,178 @@
+
+export function getFormattedStringDate(d, type = "datetime")
+{
+    if(!d)
+        return '';
+
+    let month = '' + (d.getMonth() + 1);
+    let day = '' + d.getDate();
+    let year = d.getFullYear();
+    let hour = '' + d.getHours();
+    let minutes = '' + d.getMinutes();
+
+    if(day.length < 2)
+        day = '0' + day;
+
+    if(month.length < 2)
+        month = '0' + month;
+
+    if(hour.length < 2)
+        hour = '0' + hour;
+
+    if(minutes.length < 2)
+        minutes = '0' + minutes;
+
+    if(type == "datetime-local")
+        return `${year}-${month}-${day} ${hour}:${minutes}`;
+    else
+        return `${year}-${month}-${day}`;
+}
+
+export function getNiceStringDate(d)
+{
+    if(!d)
+        return '';
+
+    let month = d.getMonth();
+    let day = d.getDate();
+    let year = d.getFullYear();
+
+    const now = new Date( Date.now())
+    let current_month = now.getMonth();
+    let current_day = now.getDate();
+    let current_year = now.getFullYear();
+
+    let is_far_date = true;
+    const far_date_threshold = 14*24*60*60*1000; // 14 days
+    if(Math.abs( now.getTime() - d.getTime()) < far_date_threshold)
+        is_far_date = false;
+
+    if(year != current_year)
+    {
+        if(is_far_date)
+            return `${day} ${monthName(month)} ${year}`
+        else
+            return `${dayName(d.getDay())}, ${day} ${monthName(month)}`
+    }
+
+    if(month != current_month)
+    {
+        if(is_far_date)
+            return `${day} ${monthName(month)}`   
+        else
+            return `${dayName(d.getDay())}, ${day} ${monthName(month)}`
+    }
+    else
+    {
+        let day_of_week = d.getDay() // 0 == Sunday
+        let current_day_of_week = now.getDay()
+
+        if(day_of_week == 0)
+            day_of_week = 7
+
+        if(current_day_of_week == 0)
+            current_day_of_week = 7;
+
+        
+        let days_diff = day - current_day;
+        if(days_diff == 0)
+            return 'Today';
+        else if(days_diff == 1)
+            return 'Tomorrow';
+        else if(days_diff == -1)
+            return 'Yesterday';
+        else if(days_diff > 0 && days_diff <= 7)
+        {
+            if(day_of_week > current_day_of_week)
+                return dayName(day_of_week);
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else if(days_diff > 0)
+        {
+            if(is_far_date)
+                return `${d.getDate()} ${monthName(d.getMonth())}`
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else if(days_diff < 0 && days_diff > -7)
+        {
+            if(day_of_week < current_day_of_week)
+                return dayName(day_of_week);
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else
+        {
+            if(is_far_date)
+                return `${d.getDate()} ${monthName(d.getMonth())}`
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+    }
+}
+
+export function dayName(d)
+{
+    switch(d)
+    {
+    case 0:
+        return 'Sun';
+    
+    case 1:
+        return 'Mon';
+
+    case 2:
+        return 'Tue';
+
+    case 3:
+        return 'Wed';
+
+    case 4:
+        return 'Thu';
+
+    case 5:
+        return 'Fri';
+
+    case 6:
+        return 'Sat';
+    
+    case 7:
+        return 'Sun';
+    }
+
+    return '';
+}
+
+export function monthName(m)
+{
+    switch(m)
+    {
+        case 0:
+            return "Jan";
+        case 1:
+            return "Feb";
+        case 2:
+            return "Mar";
+        case 3:
+            return "Apr";
+        case 4:
+            return "May";
+        case 5:
+            return "Jun";
+        case 6:
+            return "Jul";
+        case 7:
+            return "Aug";
+        case 8:
+            return "Sep";
+        case 9:
+            return "Oct";
+        case 10:
+            return "Nov";
+        case 11:
+            return "Dec";
+    }
+
+    return '';
+}

package/components/document/editor.svelte

@@ -26,7 +26,7 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, toolsActionsOperations } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -62,6 +62,7 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let compact = false;
+export let onChange = void 0;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
@@ -480,12 +481,16 @@ onMount(() => {
     content: value,
     injectCSS: false,
     onTransaction({ editor: editor2, transaction }) {
-      hasChangedValue = true;
-      changedValue = editor2.getHTML();
-      handleImagesChanges(transaction);
+      const wasContentChanged = transaction.steps.length > 0;
+      if (wasContentChanged) {
+        hasChangedValue = true;
+        changedValue = editor2.getHTML();
+        handleImagesChanges(transaction);
+      }
       refreshToolbarOperations();
     },
     onFocus({ editor: editor2, event }) {
+      on_focus();
       if (onFocusCb)
         onFocusCb();
     },
@@ -512,7 +517,24 @@ onDestroy(() => {
   if (is_command_palette_visible)
     palette.hide();
 });
+const isAutoSaveEnabled = false;
+let autoSaveTimerId = 0;
+function on_focus() {
+  if (isAutoSaveEnabled) {
+    autoSaveTimerId = setInterval(
+      () => {
+        if (hasChangedValue)
+          saveData();
+      },
+      1e4
+    );
+  }
+}
 function on_blur() {
+  if (autoSaveTimerId) {
+    clearInterval(autoSaveTimerId);
+    autoSaveTimerId = 0;
+  }
   if (onFinishEditing) {
     onFinishEditing();
     onFinishEditing = void 0;
@@ -529,9 +551,15 @@ export function save() {
   }
 }
 function saveData() {
-  if (item && a && hasChangedValue) {
+  if (!hasChangedValue)
+    return false;
+  hasChangedValue = false;
+  console.log("editor: saveData");
+  if (onChange) {
+    onChange(changedValue);
+    return true;
+  } else if (item && a) {
     item[a] = changedValue;
-    hasChangedValue = false;
     if (typename)
       informModification(item, a, typename);
     else
@@ -563,7 +591,7 @@ function on_palette_mouse_click() {
 function on_palette_shown() {
   is_command_palette_visible = true;
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -581,12 +609,13 @@ function on_palette_shown() {
           ]
         }
       ]
-    };
+    });
   }
 }
 function on_palette_hidden() {
+  if (is_command_palette_visible)
+    popToolsActionsOperations();
   is_command_palette_visible = false;
-  $toolsActionsOperations = [];
 }
 function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();

package/components/document/editor.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         compact?: boolean | undefined;
+        onChange?: undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
         onAddImage?: undefined;

package/components/inputbox.ltop.svelte

@@ -52,17 +52,27 @@
         itype = itype;
     }
 
+    export function refresh(itm=undefined)
+    {
+        if(itm)
+            self = itm;
+
+        item = self ?? $contextItemsStore[ctx];
+        setup()
+    }
+
+    let userClass = $$restProps.class ?? '';
     
     let   item = null
 
-    let     labelMargins = 'mt-1 mb-0.5' //
+    let     labelMargins = 'mb-0.5' //
     let input_pt = 'pt-0.5'
     let input_pb = 'pb-1'
     
     switch (s)
     {
         case 'md':
-            labelMargins = 'mt-1 mb-1';
+            labelMargins = 'mb-1';
             input_pt = 'pt-2.5'
             input_pb = 'pb-2.5';           
             break;
@@ -127,7 +137,7 @@
 
 {#if itype == 'text'}
     {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-500" }
-    <div class={cs}>
+    <div class="{cs} {userClass}">
         <label for="name" class="block {labelMargins} text-xs font-small text-stone-900 dark:text-white">{label}</label>
         
         <input  type=text name="name" id="name" 

package/components/inputbox.ltop.svelte.d.ts

@@ -20,11 +20,13 @@ export default class Inputbox extends SvelteComponentTyped<{
     validation?: any;
     validate?: (() => boolean) | undefined;
     setReadonly?: ((val: any) => void) | undefined;
+    refresh?: ((itm?: undefined) => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
     get validate(): () => boolean;
     get setReadonly(): (val: any) => void;
+    get refresh(): (itm?: undefined) => void;
 }
 export type InputboxProps = typeof __propDef.props;
 export type InputboxEvents = typeof __propDef.events;
@@ -50,6 +52,7 @@ declare const __propDef: {
         validation?: any;
         validate?: (() => boolean) | undefined;
         setReadonly?: ((val: any) => void) | undefined;
+        refresh?: ((itm?: undefined) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -210,7 +210,7 @@ function showAttachementIcon() {
         {@const canOpen = isLinkLike || hasOpen}
         {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
         {@const showIcon = showAttachementIcon()}
-            <h3 class=" text-base font-semibold pb-1
+            <h3 class=" h3 text-base font-semibold pb-1
                         whitespace-nowrap overflow-clip truncate w-full sm:flex-none
                         relative {openableClass}"
                 use:editable={{
@@ -224,7 +224,9 @@ function showAttachementIcon() {
                     condition: canOpen, 
                     callback: performOpen}}
                 bind:this={titleElement}>
+                <!--a href="#"-->
                     {item[definition.titleAttrib]}
+                <!--/a-->
 
                 {#if showIcon}
                     <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">

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

@@ -31,8 +31,8 @@ async function onSummaryChanged(text) {
 <li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
             bg-stone-100 dark:bg-stone-700">
 
-    <h3  class=" text-lg font-semibold min-h-[1.75rem]
-                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+    <h3  class=" text-base font-semibold min-h-[1.75rem]
+                 sm:min-h-[1.25rem]
                 whitespace-nowrap overflow-clip w-full sm:flex-none "
                 use:editable={{
                     action: (text) => onInsert(text, ''),
@@ -43,10 +43,9 @@ async function onSummaryChanged(text) {
     </h3>
 
     {#if editSummary}
-        <p class="  sm:text-xs sm:min-h-[1rem]
-                text-base min-h-[1.5rem]
+        <p class="  text-sm min-h-[1.25rem]
                 text-stone-400
-                max-h-[75px] sm:max-h-[64px]
+                max-h-[75px] 
                 overflow-hidden"
                 use:editable={{
                     action: (text) => onSummaryChanged(text), 

package/components/kanban/kanban.callbacks.svelte

@@ -1,9 +1,11 @@
 <script>import { getContext } from "svelte";
 export let onAdd = void 0;
 export let onOpen = void 0;
+export let onReplace = void 0;
 export let getCardOperations = void 0;
 let definition = getContext("rKanban-definition");
 definition.onAdd = onAdd;
 definition.onOpen = onOpen;
+definition.onReplace = onReplace;
 definition.getCardOperations = getCardOperations;
 </script>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         onAdd?: Function | undefined;
         onOpen?: Function | undefined;
+        onReplace?: Function | undefined;
         getCardOperations?: Function | undefined;
     };
     events: {

package/components/kanban/kanban.svelte

@@ -200,7 +200,7 @@ export function moveDown(item) {
 }
 const ORDER_STEP = 64;
 const MIN_ORDER = 0;
-function reorderElements(items, from = null) {
+function reorderElements(items, from = null, pushImediatelly = true) {
   const oa = definition.orderAttrib;
   let fromIdx;
   let fromOrder;
@@ -218,9 +218,10 @@ function reorderElements(items, from = null) {
     informModification(el, oa);
     order += ORDER_STEP;
   }
-  pushChanges();
+  if (pushImediatelly)
+    pushChanges();
 }
-export function replace(item, toColumnIdx, afterElement) {
+export async function replace(item, toColumnIdx, afterElement) {
   const fromColumnIdx = getColumnIdx(item);
   let allItems = definition.getItems();
   const oa = definition.orderAttrib;
@@ -230,18 +231,21 @@ export function replace(item, toColumnIdx, afterElement) {
   const toListBottom = allItems.findLast((e) => e[sa] == toColumnState);
   const fromColumn = columns[fromColumnIdx];
   const toColumn = columns[toColumnIdx];
+  const propsChanges = {
+    order: -1,
+    state: -1
+  };
   switch (afterElement) {
     case KanbanColumnTop:
       if (!toListTop || toListTop[oa] > item[oa]) {
-        item[sa] = toColumnState;
-        informModification(item, sa);
+        propsChanges.state = toColumnState;
       } else {
         const prevItem = getPrev(allItems, toListTop);
         if (!prevItem) {
-          item[sa] = toColumnState;
           item[oa] = toListTop[oa] - ORDER_STEP;
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAt(allItems, 0, item);
         } else {
@@ -249,35 +253,31 @@ export function replace(item, toColumnIdx, afterElement) {
           let nextOrder = toListTop[oa];
           let orderSpace = nextOrder - prevOrder;
           if (orderSpace < 2) {
-            reorderElements(allItems, prevItem);
+            reorderElements(allItems, prevItem, false);
             prevOrder = prevItem[oa];
             nextOrder = toListTop[oa];
             orderSpace = nextOrder - prevOrder;
           }
-          item[sa] = toColumnState;
           item[oa] = prevOrder + Math.floor(orderSpace / 2);
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, prevItem, item);
         }
       }
-      pushChanges();
-      fromColumn.reload();
-      toColumn.reload();
-      return;
+      break;
     case KanbanColumnBottom:
     default:
       if (!toListBottom || item[oa] > toListBottom[oa]) {
-        item[sa] = toColumnState;
-        informModification(item, sa);
+        propsChanges.state = toColumnState;
       } else {
         const nextItem = getNext(allItems, toListBottom);
         if (!nextItem) {
-          item[sa] = toColumnState;
           item[oa] = toListBottom[oa] + ORDER_STEP;
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, toListBottom, item);
         } else {
@@ -285,23 +285,39 @@ export function replace(item, toColumnIdx, afterElement) {
           let prevOrder = toListBottom[oa];
           let orderSpace = nextOrder - prevOrder;
           if (orderSpace < 2) {
-            reorderElements(allItems, toListBottom);
+            reorderElements(allItems, toListBottom, false);
             prevOrder = toListBottom[oa];
             nextOrder = nextItem[oa];
             orderSpace = nextOrder - prevOrder;
           }
-          item[sa] = toColumnState;
           item[oa] = prevOrder + Math.floor(orderSpace / 2);
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, toListBottom, item);
         }
       }
+      break;
+  }
+  if (definition.onReplace) {
+    if (propsChanges.state >= 0) {
       pushChanges();
-      fromColumn.reload();
-      toColumn.reload();
-      return;
+    }
+    const req = {
+      [sa]: propsChanges.state,
+      item,
+      toColumn: toColumnIdx
+    };
+    await definition.onReplace(req);
+  } else {
+    if (propsChanges.state >= 0) {
+      item[sa] = propsChanges.state;
+      informModification(item, sa);
+    }
+    pushChanges();
+    fromColumn.reload();
+    toColumn.reload();
   }
 }
 async function onInsert(columnIdx, title2, summary, afterId) {
@@ -397,7 +413,7 @@ async function onInsert(columnIdx, title2, summary, afterId) {
     }
   }
   if (definition.onAdd)
-    await definition.onAdd(newElement);
+    await definition.onAdd(newElement, columnIdx);
 }
 export function activateColumn(columnIdx) {
   columns[columnIdx].activate();

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         scrollViewToCard?: ((item: any) => void) | undefined;
         moveUp?: ((item: object) => void) | undefined;
         moveDown?: ((item: object) => void) | undefined;
-        replace?: ((item: any, toColumnIdx: any, afterElement: any) => void) | undefined;
+        replace?: ((item: any, toColumnIdx: any, afterElement: any) => Promise<void>) | undefined;
         activateColumn?: ((columnIdx: number) => void) | undefined;
         editColumnName?: ((columnIdx: number, onFinish?: Function | undefined) => void) | undefined;
         moveCardsTo?: ((items: object[], toColumnIdx: number) => void) | undefined;
@@ -55,7 +55,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get scrollViewToCard(): (item: any) => void;
     get moveUp(): (item: object) => void;
     get moveDown(): (item: object) => void;
-    get replace(): (item: any, toColumnIdx: any, afterElement: any) => void;
+    get replace(): (item: any, toColumnIdx: any, afterElement: any) => Promise<void>;
     get activateColumn(): (columnIdx: number) => void;
     get editColumnName(): (columnIdx: number, onFinish?: Function | undefined) => void;
     get moveCardsTo(): (items: object[], toColumnIdx: number) => void;

package/index.d.ts

@@ -56,6 +56,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 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, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -62,6 +62,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 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, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/modal.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, onMount, tick } from "svelte";
 import Icon from "./components/icon.svelte";
-import { toolsActionsOperations } from "./stores.js";
+import { pushToolsActionsOperations, popToolsActionsOperations } from "./stores.js";
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
 export let title = "";
@@ -20,7 +20,7 @@ export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -37,12 +37,14 @@ export function show(on_close_callback = void 0) {
           ]
         }
       ]
-    };
+    });
   }
 }
 export function hide() {
+  if (!open)
+    return;
   open = false;
-  $toolsActionsOperations = [];
+  popToolsActionsOperations();
 }
 let root;
 afterUpdate(
@@ -98,8 +100,9 @@ function on_cancel(event) {
             From: "opacity-100 translate-y-0 sm:scale-100"
             To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         -->
-        <div class=" transform overflow-hidden rounded-lg bg-white dark:bg-stone-700 text-left shadow-xl transition-all 
-                    sm:my-8 w-full sm:max-w-lg">
+
+        <div class="  rounded-lg bg-white dark:bg-stone-700 text-left shadow-xl transition-all  
+                    sm:my-8 w-full sm:max-w-lg"> <!-- transform overflow-hidden -->
           <div class="bg-white dark:bg-stone-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">

package/operations.svelte

@@ -46,16 +46,13 @@ function update(...args) {
 function on_click(e, operation) {
   if (!operation)
     return;
-  if (operation.action) {
-    let focused_item = null;
-    if ($contextItemsStore.focused)
-      focused_item = $contextItemsStore[$contextItemsStore.focused];
-    operation.action(focused_item);
-    return;
-  }
   let owner = e.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
+  if (operation.action) {
+    operation.action(owner);
+    return;
+  }
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -74,6 +74,7 @@
     "./components/combo/combo": "./components/combo/combo.js",
     "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
+    "./components/date_utils": "./components/date_utils.js",
     "./components/delayed.spinner.svelte": "./components/delayed.spinner.svelte",
     "./components/document/editor.svelte": "./components/document/editor.svelte",
     "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",

package/stores.d.ts

@@ -1,3 +1,5 @@
+export function pushToolsActionsOperations(operations: any): void;
+export function popToolsActionsOperations(): void;
 export function setNavigatorTitle(key: any, title: any): void;
 export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;

package/stores.js

@@ -15,6 +15,31 @@ export const mainContentPageReloader = writable(1);
 export const wholeAppReloader = writable(1)
 export const alerts = writable([])
 
+
+let toolsActionsOperationsStack = []
+export function pushToolsActionsOperations(operations)
+{
+    toolsActionsOperationsStack.push(operations)
+    toolsActionsOperations.set(operations) 
+}
+
+export function popToolsActionsOperations()
+{
+    toolsActionsOperationsStack.pop();
+    const stackSize = toolsActionsOperationsStack.length;
+    if(stackSize == 0)
+    {
+        //console.log('stack empty')
+        toolsActionsOperations.set([]) 
+    }
+    else
+    {
+        const lastElement = toolsActionsOperationsStack[stackSize-1];
+        //console.log('stack not empty (stackSize)', lastElement)
+        toolsActionsOperations.set(lastElement) 
+    }
+}
+
 export const addAlert = (txt) => {
     let al = get(alerts)
     al = [txt, ...al];