@humandialog/forms.svelte 1.3.13 → 1.3.14

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/document/editor.svelte

@@ -76,20 +76,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 +84,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"
       });
     }
   });

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,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, 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 { 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,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, 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 { 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.14",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",

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 = '/'