@humandialog/forms.svelte 1.3.17 → 1.4.1

package/components/Fab.svelte

@@ -1,7 +1,8 @@
 <script>import { each } from "svelte/internal";
 import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
-import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
+import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV } from "svelte-icons/fa/";
+import { isDeviceSmallerThan } from "../utils.js";
 $:
   setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
 let operations = [];
@@ -13,49 +14,96 @@ let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
 function setupCurrentContextOperations(...args) {
+  let opVer = 0;
+  let main_FAB_position = "";
   isDirectPositioningMode = false;
   if ($toolsActionsOperations && Array.isArray($toolsActionsOperations) && toolsActionsOperations.length > 0) {
     operations = $toolsActionsOperations;
   } else if ($toolsActionsOperations && $toolsActionsOperations.operations && $toolsActionsOperations.operations.length > 0) {
     operations = $toolsActionsOperations.operations;
-    if ($toolsActionsOperations.opver && $toolsActionsOperations.opver == 1)
+    opVer = $toolsActionsOperations.opver ?? 0;
+    main_FAB_position = $toolsActionsOperations.fab ?? "";
+    if (opVer > 0)
       isDirectPositioningMode = true;
   } else if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
   } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
-    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
+    opVer = $contextToolbarOperations.opver ?? 0;
+    main_FAB_position = $contextToolbarOperations.fab ?? "";
+    if (opVer > 0)
       isDirectPositioningMode = true;
   } else {
     if (Array.isArray($pageToolbarOperations))
       operations = $pageToolbarOperations;
     else {
       operations = $pageToolbarOperations.operations;
-      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
+      opVer = $pageToolbarOperations.opver ?? 0;
+      main_FAB_position = $pageToolbarOperations.fab ?? "";
+      if (opVer > 0)
         isDirectPositioningMode = true;
     }
   }
-  if (isDirectPositioningMode)
-    return;
-  if (operations.length > 0)
-    mainOperation = operations[0];
-  else
-    mainOperation = null;
-  secondaryOperation = null;
-  toolboxOperations = [];
-  if (operations.length > 1) {
-    const operation = operations[1];
-    if (!operation.separator) {
-      if (!operation.toolbox)
-        secondaryOperation = operation;
-      else
-        toolboxOperations = operation.toolbox;
+  if (opVer == 1) {
+    let flatOperations = [];
+    operations.forEach((group) => {
+      flatOperations = [...flatOperations, ...group.operations];
+    });
+    operations = flatOperations;
+  } else if (opVer == 2) {
+    const definedOperations = [...operations];
+    if (main_FAB_position) {
+      let flatOperations = [];
+      definedOperations.forEach((group) => {
+        flatOperations.push({
+          caption: group.caption,
+          separator: true
+        });
+        flatOperations = [...flatOperations, ...group.operations];
+      });
+      const realOps = flatOperations.filter((el) => !!el.separator == false);
+      if (realOps.length > 1) {
+        mainOperation = {
+          icon: FaEllipsisV,
+          menu: flatOperations,
+          fab: main_FAB_position
+        };
+        operations = [mainOperation];
+      } else if (realOps.length == 1) {
+        mainOperation = realOps[0];
+        mainOperation["fab"] = main_FAB_position;
+        operations = [mainOperation];
+      } else
+        operations = [];
+    }
+    definedOperations.forEach((group) => {
+      group.operations.forEach((op) => {
+        if (op.fab) {
+          operations = [...operations, op];
+        }
+      });
+    });
+  } else {
+    if (operations.length > 0)
+      mainOperation = operations[0];
+    else
+      mainOperation = null;
+    secondaryOperation = null;
+    toolboxOperations = [];
+    if (operations.length > 1) {
+      const operation = operations[1];
+      if (!operation.separator) {
+        if (!operation.toolbox)
+          secondaryOperation = operation;
+        else
+          toolboxOperations = operation.toolbox;
+      }
     }
+    if (operations.length == 3 && secondaryOperation != null || operations.length > 3 || toolboxOperations.length > 0)
+      isExpandable = true;
+    else
+      isExpandable = false;
   }
-  if (operations.length == 3 && secondaryOperation != null || operations.length > 3 || toolboxOperations.length > 0)
-    isExpandable = true;
-  else
-    isExpandable = false;
 }
 export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
@@ -69,6 +117,8 @@ function on_click(e, operation) {
   let owner = e.target;
   while (owner && (owner.tagName != "BUTTON" && owner.tagName != "LI"))
     owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
   if (operation.action) {
     operation.action(owner);
   }
@@ -80,12 +130,17 @@ function on_click(e, operation) {
   rect.y -= margin;
   rect.width += 2 * margin;
   rect.height += 2 * margin;
+  const mobile = isDeviceSmallerThan("sm");
   if (operation.menu)
     showMenu(rect, operation.menu);
   else if (operation.toolbar)
     showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
-  else if (operation.grid)
-    showMenu(rect, operation.grid);
+  else if (operation.grid) {
+    if (mobile)
+      showMenu(rect, operation.grid);
+    else
+      showGridMenu(rect, operation.grid);
+  }
 }
 function toggleExpandToolboxV(e) {
   vToolboxExpanded = !vToolboxExpanded;
@@ -178,29 +233,25 @@ function operationVisible(operation) {
 
 {#if isDirectPositioningMode}
     {#if operations && operations.length > 0}
-        {#each operations as group}
-            {#if group.operations && group.operations.length > 0}
-                {#each group.operations as operation}
-                    {#if operationVisible(operation)}
-                        {@const position = calculatePosition(operation)}
-                        {#if position}
-                            <button  
-                                class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                                        font-medium rounded-full text-sm text-center shadow-md
-                                        w-[35px] h-[35px] 
-                                        fixed m-0  
-                                        dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                                        flex items-center justify-center
-                                        disable-dbl-tap-zoom
-                                        cursor-pointer z-40"
-                                        style={position}
-                                        on:click|stopPropagation={(e) => {on_click(e, operation)}} 
-                                        on:mousedown={mousedown} >
-                            <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-                            </button>
-                        {/if}
-                    {/if}
-                {/each} 
+        {#each operations as operation}
+            {#if operationVisible(operation)}
+                {@const position = calculatePosition(operation)}
+                {#if position}
+                    <button  
+                        class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+                                font-medium rounded-full text-sm text-center shadow-md
+                                w-[35px] h-[35px] 
+                                fixed m-0  
+                                dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                flex items-center justify-center
+                                disable-dbl-tap-zoom
+                                cursor-pointer z-40"
+                                style={position}
+                                on:click|stopPropagation={(e) => {on_click(e, operation)}} 
+                                on:mousedown={mousedown} >
+                    <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                    </button>
+                {/if}
             {/if}
         {/each}
     {/if}

package/components/combo/combo.svelte

@@ -27,6 +27,7 @@ export let cached = false;
 export let filtered = false;
 export let pushChangesImmediately = true;
 export let hasNone = isAssociation;
+export let readOnly = false;
 let userClass = $$restProps.class ?? "";
 let is_compact = getContext("rIs-table-component") || compact;
 if (!definition) {
@@ -92,7 +93,7 @@ else
                                 dark:border-stone-600 dark:placeholder-stone-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
 let cs = c ? parseWidthDirective(c) : "col-span-1";
 let ctx = context ? context : getContext("ctx");
-let can_be_activated = true;
+let can_be_activated = !readOnly;
 let last_tick = -1;
 $:
   setup($data_tick_store, $contextItemsStore);
@@ -110,7 +111,9 @@ function setup(...args) {
     }
   }
   tick_request_internal = tick_request_internal + 1;
-  if (is_compact) {
+  if (readOnly)
+    can_be_activated = false;
+  else if (is_compact) {
     can_be_activated = false;
     let contexts = inContext.split(" ");
     contexts.forEach((ctx2) => {
@@ -670,7 +673,8 @@ function on_focus_out(e) {
             {#if definition.source && definition.source.length}
                 {#if hasNone}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <li class="rounded p-2 flex flex-row items-center {font_size}" 
+                    <li class="rounded flex flex-row items-center {font_size}
+                                space-x-10 px-4 py-2 ml-12 sm:ml-0" 
                         class:bg-stone-100={highlighted_option == null}
                         class:dark:bg-stone-700={highlighted_option == null}
                         class:dark:hover:bg-stone-700={highlighted_option == null}
@@ -678,46 +682,45 @@ function on_focus_out(e) {
                         on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
                         tabindex="-1">
 
-                        <div class="ml-2">
+                        <h4 class="ml-2">
                             &lt;none&gt;
-                        </div>
+                        </h4>
                     </li>
                 {/if}
 
                 {@const _filtered_source = filtered_source ? filtered_source : definition.source}
                 {#if _filtered_source.length > 0}
                     {#each _filtered_source as item (item.Key)}
+                        {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="rounded p-2 flex flex-row items-center {font_size}" 
-                            class:bg-stone-100={highlighted_option == item}
-                            class:dark:bg-stone-700={highlighted_option == item}
-                            class:dark:hover:bg-stone-700={highlighted_option == item}
+                        <li class="rounded flex flex-row items-center {font_size}
+                                space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
                             on:mousemove={() => on_mouse_move(item)}
                             on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
                             tabindex="-1">
 
                             {#if icon}
                                 {#if item.Color}
-                                    <Icon size={5} circle={true} color={item.Color}/>
+                                    <Icon size={4} circle={true} color={item.Color}/>
                                 {:else if item.Avatar} 
-                                    <Icon size={5} circle={true} symbol={item.Avatar}/>
+                                    <Icon size={4} circle={true} symbol={item.Avatar}/>
                                 {:else if item.Icon}
                                     <Icon size={4} component={item.Icon}/>
                                 {:else if item.Icon == null}
                                     <div class="w-4 h-4"></div>
                                 {:else if item.Name}
-                                    <Icon size={5} circle={true} label={item.Name}/>
+                                    <Icon size={4} circle={true} label={item.Name}/>
                                 {:else}
-                                    <Icon size={5} circle={true}/>
+                                    <Icon size={4} circle={true}/>
                                 {/if}
                             {/if}
-                            <div class="ml-2">
+                            <h4 class="ml-2">
                             {#if item.Name}
                                 {item.Name}
                             {:else if item.Key}
                                 {item.Key}
                             {/if}
-                            </div>
+                            </h4>
                         </li>
                     {/each}
                 {:else}

package/components/combo/combo.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         filtered?: boolean | undefined;
         pushChangesImmediately?: boolean | undefined;
         hasNone?: boolean | undefined;
+        readOnly?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
         hide?: (() => void) | undefined;
     };

package/components/contextmenu.svelte

@@ -2,7 +2,7 @@
 import Icon from "./icon.svelte";
 import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
-import { hideWholeContextMenu } from "./menu";
+import { hideWholeContextMenu, showMenu, showFloatingToolbar, showGridMenu } from "./menu";
 import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
@@ -181,7 +181,7 @@ function on_keydown(e, operation, index) {
       hide_submenu();
       break;
     case "Enter":
-      execute_action(operation, index);
+      execute_action(void 0, operation, index);
       e.preventDefault();
       e.stopPropagation();
       break;
@@ -219,7 +219,7 @@ function on_mouse_move(index) {
   if (!isDeviceSmallerThan("sm"))
     focus_menu_item(index);
 }
-function execute_action(operation, index) {
+function execute_action(e, operation, index) {
   if (operation.menu) {
     focus_menu_item(index);
     return;
@@ -227,12 +227,29 @@ function execute_action(operation, index) {
   hideWholeContextMenu();
   if (!operation)
     return;
-  if (!operation.action)
-    return;
-  let context_item = null;
-  if ($contextItemsStore.focused)
-    context_item = $contextItemsStore[$contextItemsStore.focused];
-  operation.action(context_item);
+  let owner = e.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
+  const mobile = isDeviceSmallerThan("sm");
+  if (operation.action) {
+    operation.action(owner, around_rect);
+  } else {
+    let rect;
+    if (around_rect)
+      rect = around_rect;
+    else
+      rect = owner.getBoundingClientRect();
+    if (operation.toolbar)
+      showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
+    else if (operation.grid) {
+      if (mobile)
+        showMenu(rect, operation.grid);
+      else
+        showGridMenu(rect, operation.grid);
+    }
+  }
 }
 function focus_menu_item(index) {
   const operation = operations[index];
@@ -274,10 +291,25 @@ function hide_submenu() {
 function mousedown(e) {
   e.preventDefault();
 }
+function calculateBackground(is_highlighted, active) {
+  if (is_highlighted) {
+    if (active)
+      return "bg-stone-400/40 dark:bg-stone-400/40";
+    else
+      return "bg-stone-400/30 dark:bg-stone-400/30";
+  } else {
+    if (active)
+      return "bg-stone-400/20 dark:bg-stone-400/20";
+    else
+      return "";
+  }
+}
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class=" bg-white dark:bg-stone-700 text-stone-600 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-900 shadow-md 
+    class=" bg-white dark:bg-stone-800 
+            text-stone-800 dark:text-stone-400 rounded-lg border 
+            border-stone-200 dark:border-stone-700 shadow-md 
             z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
     style={css_position}
     bind:this={menu_root}>
@@ -285,7 +317,9 @@ function mousedown(e) {
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}
-            <hr class="my-1 mx-0 border-1 dark:border-stone-900">
+            {#if index>0 && index < operations.length-1}
+                <hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700">
+            {/if}
         {:else}
             {@const mobile = isDeviceSmallerThan("sm")}
             {@const icon_placeholder_without_desc = mobile ? 12 : 10}
@@ -296,31 +330,35 @@ function mousedown(e) {
             {@const isBottom = index == operations.length-1}
             {@const isFocused = index == focused_index}
             {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
-            {@const active = ((!mobile) && isFocused) ? `bg-stone-200 dark:bg-stone-600 ${clipFocusedBorder}` : ''}
+            {@const active = calculateBackground(isFocused, false)}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
             
-            <button class="font-medium m-0 py-2 pr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
+            <button class="block  w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none"
                     id={menu_item_id}
                     bind:this={menu_items[index]}
-                    on:click|stopPropagation={(e) => { execute_action(operation, index) } } 
+                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } } 
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
                     on:mousedown={mousedown}
                     disabled={operation.disabled}
                     class:opacity-60={operation.disabled}>
                     
-                <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
+                <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
                     {#if operation.icon}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
                         <Icon size={icon_size} component={operation.icon}/>
+                    {:else}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
+                        <div style="width: {icon_size*0.25}rem; height: {icon_size*0.25}rem;"></div>
                     {/if}
                 </div>
                 <div class="">
                     <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">
+                        <p  class="truncate inline-block">
                             {operation.description}
                         </p>
                     {/if}

package/components/date.svelte

@@ -3,7 +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";
+import { getFormattedStringDate, getNiceStringDate, getNiceStringDateTime } from "./date_utils.js";
 export let self = null;
 export let a = "";
 export let context = "";
@@ -12,6 +12,7 @@ export let date = null;
 export let onSelect = void 0;
 export let type = "date";
 export let changed = void 0;
+export let readOnly = false;
 export let s = "sm";
 export let c = "";
 export let compact = false;
@@ -97,7 +98,7 @@ if (!is_compact) {
 } else {
   style = `${font_size}`;
 }
-let can_be_activated = true;
+let can_be_activated = !readOnly;
 let last_tick = -1;
 $:
   setup($data_tick_store, $contextItemsStore);
@@ -124,7 +125,9 @@ function setup(...args) {
       value = new Date(item[a]);
   } else
     value = date;
-  if (is_compact) {
+  if (readOnly)
+    can_be_activated = false;
+  else if (is_compact) {
     can_be_activated = false;
     let contexts = inContext.split(" ");
     contexts.forEach((ctx2) => {
@@ -134,7 +137,10 @@ function setup(...args) {
   } else
     can_be_activated = true;
   rValue = getFormattedStringDate(value, type);
-  pretty_value = getNiceStringDate(value);
+  if (type == "datetime-local")
+    pretty_value = getNiceStringDateTime(value);
+  else
+    pretty_value = getNiceStringDate(value);
 }
 async function on_changed() {
   if (!rValue)

package/components/date.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         onSelect?: undefined;
         type?: string | undefined;
         changed?: undefined;
+        readOnly?: boolean | undefined;
         s?: string | undefined;
         c?: string | undefined;
         compact?: boolean | undefined;

package/components/date_utils.d.ts

@@ -1,4 +1,5 @@
 export function getFormattedStringDate(d: any, type?: string): string;
+export function getNiceStringDateTime(d: any): 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

@@ -28,6 +28,16 @@ export function getFormattedStringDate(d, type = "datetime")
         return `${year}-${month}-${day}`;
 }
 
+export function getNiceStringDateTime(d)
+{
+    const dt = getNiceStringDate(d);
+    const tm = d.toLocaleTimeString(undefined, {
+        timeStyle: 'short'
+    })
+    return `${dt}, ${tm}`
+}
+
+
 export function getNiceStringDate(d)
 {
     if(!d)

package/components/delayed.spinner.svelte

@@ -1,5 +1,4 @@
-<script>import { Spinner } from "flowbite-svelte";
-import { onMount } from "svelte";
+<script>import { onMount } from "svelte";
 export let color = "blue";
 export let size = 8;
 export let delay = 1e3;