@humandialog/forms.svelte 1.3.13 → 1.3.15

package/components/Floating_container.svelte

@@ -8,7 +8,8 @@ let visible = false;
 let toolbar;
 let props = {};
 let around_rect;
-let root_element;
+let rootElement;
+let internalElement;
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -20,6 +21,9 @@ export async function show(around, _toolbar, _props = {}) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   const was_visible = visible;
+  if (!was_visible && toolbar == _toolbar && internalElement && internalElement.reload) {
+    internalElement.reload();
+  }
   visible = true;
   toolbar = _toolbar;
   props = _props;
@@ -27,6 +31,7 @@ export async function show(around, _toolbar, _props = {}) {
   props.onHide = () => {
     hide();
   };
+  props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
   if (isDeviceSmallerThan("sm")) {
@@ -51,7 +56,7 @@ export async function show(around, _toolbar, _props = {}) {
   }
   await tick();
   if (!was_visible)
-    root_element.addEventListener("click", on_before_container_click, true);
+    rootElement.addEventListener("click", on_before_container_click, true);
   cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
@@ -62,7 +67,15 @@ export function hide() {
   cssPosition = calculatePosition(x, y, around_rect, false, false);
   $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
-  root_element.removeEventListener("click", on_before_container_click, true);
+  rootElement?.removeEventListener("click", on_before_container_click, true);
+}
+export function isSameToolbar(_toolbar) {
+  return _toolbar == toolbar;
+}
+async function onSizeChanged() {
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
+  await tick();
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 let hide_window_indicator = 0;
 function on_before_window_click() {
@@ -91,7 +104,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
     const margin = 5;
     let myRect = null;
     if (!fresh) {
-      myRect = root_element.getBoundingClientRect();
+      myRect = rootElement.getBoundingClientRect();
       if (myRect && myRect.height == 0)
         myRect = null;
     }
@@ -113,7 +126,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
   } else {
     let myRect = null;
     if (!fresh) {
-      myRect = root_element.getBoundingClientRect();
+      myRect = rootElement.getBoundingClientRect();
       if (myRect && myRect.height == 0)
         myRect = null;
     }
@@ -131,7 +144,6 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
     }
     result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
   }
-  console.log(result);
   return result;
 }
 </script>
@@ -139,7 +151,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
 <div    id="__hd_svelte_floating_container"
         class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow  z-30 fixed"
         style={cssPosition}
-        bind:this={root_element}>
-    <svelte:component this={toolbar} {...props} />
+        bind:this={rootElement}>
+    <svelte:component this={toolbar} {...props} bind:this={internalElement} />
 </div>
 

package/components/Floating_container.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
         isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
+        isSameToolbar?: ((_toolbar: any) => boolean) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,5 +18,6 @@ export default class FloatingContainer extends SvelteComponentTyped<FloatingCont
     get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
     get isVisible(): () => boolean;
     get hide(): () => void;
+    get isSameToolbar(): (_toolbar: any) => boolean;
 }
 export {};

package/components/combo/combo.svelte

@@ -256,7 +256,6 @@ export function show(event, hide_callback) {
   }
 }
 export function hide() {
-  console.log("combo hide");
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;

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

@@ -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;
@@ -76,20 +77,6 @@ export function run(onStop = void 0) {
 let suggestionRange = void 0;
 export function getFormattingOperations(withCaptions = false) {
   let result = [];
-  if (isDeviceSmallerThan("sm")) {
-    result = [
-      {
-        caption: "Back to edit",
-        icon: FaArrowLeft,
-        action: (fi) => {
-          editor?.commands.focus();
-        }
-      },
-      {
-        separator: true
-      }
-    ];
-  }
   commands.forEach((c2) => {
     if (c2.separator) {
       result.push({ separator: true });
@@ -98,7 +85,8 @@ export function getFormattingOperations(withCaptions = false) {
         caption: withCaptions ? c2.caption : "",
         icon: c2.icon,
         action: (f) => c2.on_choice(suggestionRange),
-        activeFunc: c2.is_active
+        activeFunc: c2.is_active,
+        tbr: "B"
       });
     }
   });
@@ -493,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();
     },
@@ -525,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;
@@ -542,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

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/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/list/List.d.ts

@@ -28,6 +28,7 @@ export declare class rList_property_tags extends rList_property {
     onUpdateAllTags: Function | undefined;
 }
 export declare class rList_definition {
+    name: string;
     title: string;
     title_editable: boolean;
     on_title_changed: Function | undefined;

package/components/list/List.js

@@ -36,6 +36,7 @@ export class rList_property_tags extends rList_property {
     onUpdateAllTags = undefined;
 }
 export class rList_definition {
+    name = '';
     title = '';
     title_editable = false;
     on_title_changed = undefined;

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

@@ -21,8 +21,8 @@ export let item;
 export let title = "";
 export let summary = "";
 export let typename = void 0;
-export let toolbarOperations;
-export let contextMenu;
+export let toolbarOperations = void 0;
+export let contextMenu = void 0;
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
@@ -47,10 +47,10 @@ if (!typename) {
 }
 let item_key = "";
 let keys = Object.keys(item);
-if (keys.includes("Id"))
-  item_key = "Id";
-else if (keys.includes("$ref"))
+if (keys.includes("$ref"))
   item_key = "$ref";
+else if (keys.includes("Id"))
+  item_key = "Id";
 else if (keys.length > 0)
   item_key = keys[0];
 if (!title)
@@ -152,9 +152,11 @@ function getHRef() {
     return "";
 }
 function activate_row(e, item2) {
-  activateItem("props", item2, toolbarOperations(item2));
-  if (e)
-    e.stopPropagation();
+  if (toolbarOperations) {
+    activateItem("props", item2, toolbarOperations(item2));
+    if (e)
+      e.stopPropagation();
+  }
 }
 function on_contextmenu(e) {
   if (!contextMenu)
@@ -318,7 +320,7 @@ export function scrollToView() {
             {#key item[summary] }           
                 {#if is_row_active}
                     <p  id={element_id} 
-                        class=" text-sm    mb-2                          
+                        class=" text-sm                              
                                 text-stone-400"
                             use:editable={{
                                 action: (text) => {change_summary(text)},
@@ -330,7 +332,7 @@ export function scrollToView() {
                     </p>
                 {:else}
                     <p  id={element_id} 
-                        class=" text-sm mb-2
+                        class=" text-sm 
                                     text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
                         {item[summary]}

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         title?: string | undefined;
         summary?: string | undefined;
         typename?: string | undefined;
-        toolbarOperations: any;
-        contextMenu: any;
+        toolbarOperations?: undefined;
+        contextMenu?: undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;

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

@@ -26,7 +26,7 @@ async function onSummaryChanged(text) {
 }
 </script>
 
-<section    class="mt-3 my-0  w-full text-lg sm:text-sm text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
+<section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
     <div class="flex flex-row">
         {#if icon}
             <!--Icon   size={3} 
@@ -36,8 +36,8 @@ async function onSummaryChanged(text) {
         {/if}
 
         <p  class=" ml-3 py-1
-                    text-lg font-semibold min-h-[1.75rem]
-                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                    text-base font-semibold min-h-[1.75rem]
+                    sm:min-h-[1.25rem]
                     whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
             bind:this={titleElement}
             use:editable={{
@@ -51,8 +51,8 @@ async function onSummaryChanged(text) {
     {#if editSummary}
         <p  bind:this={summaryElement}
             class="     ml-10 sm:ml-9 
-                        sm:text-xs sm:min-h-[1rem]
-                        text-base min-h-[1.5rem]
+                        sm:min-h-[1rem]
+                        text-sm min-h-[1.5rem]
                         text-stone-400"
                 use:editable={{
                     action: onSummaryChanged,

package/components/list/list.svelte

@@ -1,5 +1,5 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
-import { data_tick_store, contextItemsStore, contextTypesStore, page_title } from "../../stores";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
 import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter } from "../../utils";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
@@ -13,8 +13,8 @@ export let orderAttrib = void 0;
 export let context = "";
 export let typename = "";
 export let c = "";
-export let toolbarOperations;
-export let contextMenu;
+export let toolbarOperations = void 0;
+export let contextMenu = void 0;
 export let key = "";
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
@@ -26,6 +26,7 @@ export const MIN_ORDER = 0;
 let definition = new rList_definition();
 setContext("rList-definition", definition);
 setContext("rIs-table-component", true);
+definition.name = `List ${a}`;
 let item = null;
 let items = void 0;
 let ctx = context ? context : getContext("ctx");
@@ -35,7 +36,8 @@ const END_OF_LIST = {};
 let rows = [];
 let activate_after_dom_update = null;
 let inserter;
-clearActiveItem("props");
+if (toolbarOperations)
+  clearActiveItem("props");
 let last_tick = -1;
 $:
   setup($data_tick_store, $contextItemsStore);
@@ -55,10 +57,10 @@ function setup(...args) {
 function getItemKey(item2) {
   if (key)
     return item2[key];
-  else if (item2.Id)
-    return item2.Id;
   else if (item2.$ref)
     return item2.$ref;
+  else if (item2.Id)
+    return item2.Id;
   else
     return 0;
 }

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

@@ -9,8 +9,8 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;
-        toolbarOperations: any;
-        contextMenu: any;
+        toolbarOperations?: undefined;
+        contextMenu?: undefined;
         key?: string | undefined;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;

package/components/menu.js

@@ -39,14 +39,12 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
         toolbar_component.show(around, toolbar, props);
     }
     else if (toolbar_component) {
-        //if(toolbar_component.isVisible())
-        //{
-        //    toolbar_component.hide();
-        //}
-        //else
-        //{
-        toolbar_component.show(around, toolbar, props);
-        //}
+        if (toolbar_component.isVisible() && toolbar_component.isSameToolbar(toolbar)) {
+            toolbar_component.hide();
+        }
+        else {
+            toolbar_component.show(around, toolbar, props);
+        }
     }
     else
         console.error('what now?');

package/components/sidebar/sidebar.item.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisH } from "svelte-icons/fa";

package/index.d.ts

@@ -55,7 +55,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, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+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

@@ -61,7 +61,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, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+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,5 +1,8 @@
 <script>import { afterUpdate, onMount, tick } from "svelte";
 import Icon from "./components/icon.svelte";
+import { toolsActionsOperations } from "./stores.js";
+import { isDeviceSmallerThan } from "./utils";
+import { FaTimes } from "svelte-icons/fa";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -16,9 +19,30 @@ export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Modal",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                on_cancel(void 0);
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 export function hide() {
   open = false;
+  $toolsActionsOperations = [];
 }
 let root;
 afterUpdate(
@@ -40,7 +64,7 @@ function on_ok(event) {
     close_callback("OK");
 }
 function on_cancel(event) {
-  open = false;
+  hide();
   if (onCancelCallback)
     onCancelCallback();
   if (close_callback)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "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.js

@@ -121,7 +121,9 @@ export function restore_defults()
 
 export function toggle_sidebar(index)
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
 
     //console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
 
@@ -133,6 +135,7 @@ export function toggle_sidebar(index)
 
 export function auto_hide_sidebar()
 {
+    
     //console.log('auto_hide_sidebar')
     //console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
     if(window.innerWidth < SCREEN_SIZES.lg)
@@ -141,14 +144,21 @@ export function auto_hide_sidebar()
 
 export function hide_sidebar()
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
+
     main_sidebar_visible_store.set('*')
     //console.log("auto_hide_sidebar:" + get(main_sidebar_visible_store))
 }
 
 export function show_sidebar(index)
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
+
     main_sidebar_visible_store.set(index)
 }
 

package/updates.js

@@ -122,6 +122,7 @@ update_request_ticket.subscribe(async (v) => {
             changes.push(value.item);
         });
 
+        
         /*
         const res = await reef.post('/Push', { Items: changes }, onErrorShowAlert);
 

package/utils.d.ts

@@ -46,5 +46,6 @@ export let currentEditable: null;
 export namespace UI {
     const operations: null;
     const fab: null;
+    const navigator: null;
 }
 export const NAVIGATION_PAGE_PATH: "/";

package/utils.js

@@ -350,6 +350,7 @@ export function editable(node, params)
         
         return {
             destroy() {
+
                 node.removeEventListener("edit", edit_listener)
                 node.classList.remove("editable")
                 node.contentEditable = "false"
@@ -650,7 +651,8 @@ export function isOnScreenKeyboardVisible()
 
 export const UI = {
     operations: null,
-    fab: null
+    fab: null,
+    navigator: null
 }
 
 export const NAVIGATION_PAGE_PATH = '/'