@humandialog/forms.svelte 1.3.15 → 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/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";
@@ -591,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: [
         {
@@ -609,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/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/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/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.15",
+  "version": "1.3.16",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",

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];