@humandialog/forms.svelte 1.3.10 → 1.3.12

package/components/Fab.svelte

@@ -11,17 +11,26 @@ let toolboxOperations = [];
 let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
-let isMain = false;
+let isDirectPositioningMode = false;
 function update(...args) {
-  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+  isDirectPositioningMode = false;
+  if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0)
     operations = $contextToolbarOperations;
-  else
-    operations = $pageToolbarOperations;
-  if (operations && operations.length > 0 && operations[0].main) {
-    isMain = true;
+  else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
+    operations = $contextToolbarOperations.operations;
+    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
+      isDirectPositioningMode = true;
   } else {
-    isMain = false;
+    if (Array.isArray($pageToolbarOperations))
+      operations = $pageToolbarOperations;
+    else {
+      operations = $pageToolbarOperations.operations;
+      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
+        isDirectPositioningMode = true;
+    }
   }
+  if (isDirectPositioningMode)
+    return;
   if (operations.length > 0)
     mainOperation = operations[0];
   else
@@ -46,7 +55,6 @@ export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
     return;
-  console.log("activateMainOperation");
   mainOperationButton.click();
 }
 function on_click(e, operation) {
@@ -100,33 +108,97 @@ function getSelectionPos() {
     return 0;
 }
 function calculatePosition(operation) {
-  let right = 0;
-  let result = `bottom: 10px; right:${right}px`;
+  const isLeftHanded = false;
+  let result = "";
+  const fab = operation.fab;
+  if (fab.length != 3)
+    return "";
+  const section = fab[0];
+  const col_no = parseInt(fab[1]);
+  const row_no = parseInt(fab[2]);
+  if (col_no == NaN || row_no == NaN)
+    return "";
+  const width = 55;
+  const height = 55;
+  const margin = 10;
+  if (!isLeftHanded) {
+    switch (section) {
+      case "M":
+        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "S":
+        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "A":
+        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "C":
+        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "T":
+        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+      case "F":
+        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+    }
+  } else {
+    switch (section) {
+      case "M":
+        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "S":
+        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "A":
+        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "C":
+        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "T":
+        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+      case "F":
+        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+    }
+  }
   return result;
 }
 function operationVisible(operation) {
-  return false;
+  if (!operation.fab)
+    return false;
+  return true;
 }
 </script>
 
-{#if isMain}
+{#if isDirectPositioningMode}
     {#if operations && operations.length > 0}
-        {#each operations as operation, idx}
-            {#if operationVisible(operation)}
-            <button  
-                    class="text-white bg-blue-700 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-[55px] h-[55px] 
-                        fixed m-0 absolute bottom-0
-                        dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                        flex items-center justify-center
-                        disable-dbl-tap-zoom"
-                        style={calculatePosition(operation)}
-                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
-                        on:mousedown={mousedown} >
-            <div class="w-7 h-7"><svelte:component this={operation.icon}/></div>
-        </button>
-        {/if}
+        {#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-10"
+                                        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}
         {/each}
     {/if}
 {:else}
@@ -138,7 +210,7 @@ function operationVisible(operation) {
                     class="text-white bg-blue-700 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-[55px] h-[55px] 
-                        fixed m-0 absolute bottom-0 right-[0px]
+                        fixed m-0 bottom-0 right-[0px]
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                         flex items-center justify-center
                         disable-dbl-tap-zoom"
@@ -151,7 +223,7 @@ function operationVisible(operation) {
         {#if secondaryOperation || isExpandable}
             
             <!-- horizontal container -->
-            <div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
+            <div class="flex flex-row m-0 fixed bottom-[10px] right-[60px]">
             
                 {#if isExpandable}
                     <!-- Expander -->
@@ -238,7 +310,7 @@ function operationVisible(operation) {
 
         {#if operations.length > 2} <!-- has vertical operations -->
             <!-- vertical tools container  -->
-            <ul class="list-none m-0 absolute bottom-[70px] right-0">
+            <ul class="list-none m-0 fixed bottom-[70px] right-0">
                 {#if (isExpandable && vToolboxExpanded) || !isExpandable}
                     {@const verticalOperations = operations.slice(2).reverse()}
                     {#each verticalOperations as operation}

package/components/Grid.menu.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    onHide?: any;
     operations?: any[] | undefined;
+    onHide?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -14,8 +14,8 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        onHide?: any;
         operations?: any[] | undefined;
+        onHide?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.svelte

@@ -54,8 +54,8 @@ switch (s) {
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-lg";
-    line_h = "h-7 sm:h-5";
+    font_size = "text-base";
+    line_h = "h-5 sm:h-5";
     chevron_mt = "mt-2 sm:mt-1";
     break;
   case "xs":
@@ -75,11 +75,11 @@ switch (s) {
     chevron_mt = "";
     break;
   default:
-    label_mb = "mb-0.5";
-    input_pt = "pt-0.5";
-    input_pb = "pb-0.5";
-    font_size = "text-base";
-    line_h = "h-6";
+    label_mb = "";
+    input_pt = "";
+    input_pb = "";
+    font_size = "";
+    line_h = "";
     chevron_mt = "";
 }
 let background_class = is_compact && !icon ? "" : "";
@@ -153,7 +153,7 @@ let on_hide_callback = void 0;
 export function show(event, hide_callback) {
   if (!can_be_activated)
     return;
-  if (!combo)
+  if (!textbox)
     return;
   if (is_dropdown_open)
     return;
@@ -171,7 +171,7 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect = combo.getBoundingClientRect();
+  let rect = textbox.getBoundingClientRect();
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
@@ -579,13 +579,14 @@ function on_focus_out(e) {
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click={(e) => { show(e, undefined) }}
-            class:cursor-pointer={can_be_activated && is_compact}
             class="max-w-full {appearance_class} flex flex-row content-between items-center"
          >
             
-        <div class="max-w-full flex-1 flex flex-row items-center">
-            {#if !is_dropdown_open}
+        <p  class="max-w-full flex-1 flex flex-row items-center"
+            on:click={(e) => { show(e, undefined) }}
+            class:cursor-pointer={can_be_activated && is_compact}>
+            
+            {#if true || !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
                         <Icon size={5} circle={true} color={sel_item.Color}/>
@@ -600,7 +601,7 @@ function on_focus_out(e) {
             {/if}
 
             
-            <p  bind:this={textbox}
+            <span  bind:this={textbox}
                 class="dark:text-stone-300 {line_h} truncate pl-0 pr-2.5 {background_class} min-w-[2.5rem]"
                 class:ml-2={icon}
                 class:text-stone-400={ (!is_dropdown_open) && (!sel_item)}
@@ -609,18 +610,20 @@ function on_focus_out(e) {
                 contenteditable={is_dropdown_open && filtered}
                 on:keydown={on_keydown}
                 tabindex="0">
-                {combo_text}</p>
-        </div>
+                {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}">
+                    <FaChevronDown/>
+                </div>
+            {/if}
+        </p>
+        
         
-        {#if can_be_activated }
-            <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}">
-                <FaChevronDown/>
-            </div>
-        {/if}
     </div>
 
     <div    hidden={!is_dropdown_open} 
-            class="{cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-30"
+            class="not-prose {cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-30"
             style={dropdown_position}
             use:dropdown_action>
         <ul class="py-1">

package/components/date.svelte

@@ -73,6 +73,12 @@ switch (s) {
       line_h = "h-6 sm:h-6";
     chevron_mt = "mt-1.5 sm:mt-0.5";
     break;
+  default:
+    input_pt = "";
+    input_pb = "";
+    font_size = "";
+    line_h = "";
+    chevron_mt = "";
 }
 let item = null;
 let user_class = $$restProps.class ?? "";
@@ -291,40 +297,44 @@ function blur(e) {
 </script>
 
 {#if is_compact}
-    <div class="inline-block relative {line_h}">
+    <div class="inline-block  {line_h}">
        <div class="dark:text-stone-300 {font_size} truncate  
                     pl-0 pr-0
-                    h-full flex flex-row" >
-            <div class="grow-1 pr-2.5">
-                {pretty_value}
-            </div>
+                    h-full " >
+            <p >
+                <span class="inline-block relative flex flex-row  items-center">
+                    <span class="grow-1 pr-2.5 ">
+                        {pretty_value}
+                    </span>
 
-            {#if can_be_activated}
-                <div class="no-print ml-auto w-3 h-3 {chevron_mt} text-stone-700 dark:text-stone-300">
-                    <FaChevronDown/>
-                </div>
-            {/if}
-        
-            {#if can_be_activated}
-                {#if type == "datetime-local"}
-                    <input  type="datetime-local" 
-                            class="datepicker-input"
-                            tabindex="-1"
-                            on:change={on_changed}
-                            bind:value={rValue}
-                            bind:this={input_element}>
-                {:else}
-                    <input  type="date" 
-                            class="datepicker-input"
-                            tabindex="-1"
-                            on:change={on_changed}
-                            bind:value={rValue}
-                            bind:this={input_element}
-                            on:blur={blur}>
-                {/if}
+                    {#if can_be_activated}
+                        <div class="no-print ml-auto w-3 h-3 {chevron_mt} text-stone-700 dark:text-stone-300">
+                            <FaChevronDown/>
+                        </div>
+                    {/if}
+
+                    {#if can_be_activated}
+                        {#if type == "datetime-local"}
+                            <input  type="datetime-local" 
+                                    class="datepicker-input"
+                                    tabindex="-1"
+                                    on:change={on_changed}
+                                    bind:value={rValue}
+                                    bind:this={input_element}>
+                        {:else}
+                            <input  type="date" 
+                                    class="datepicker-input"
+                                    tabindex="-1"
+                                    on:change={on_changed}
+                                    bind:value={rValue}
+                                    bind:this={input_element}
+                                    on:blur={blur}>
+                        {/if}
+                    {/if}
+
+                </span>
+            </p>
 
-                
-            {/if}
         </div>
 
         

package/components/document/editor.svelte

@@ -186,6 +186,7 @@ const suggestion = {
           editor.commands.blur();
           palette.set_current_editor_range(props.range);
           const cursorRect = props.clientRect();
+          palette.filter("");
           setTimeout(() => show_command_palette(cursorRect), 100);
         } else {
           const cursorRect = props.clientRect();
@@ -585,10 +586,12 @@ function show_command_palette(cursor_rect) {
     show_big_command_palette(cursor_rect, client_rect);
 }
 function show_small_command_palette(client_rect) {
-  palette.max_height_px = client_rect.height - 64;
-  palette.width_px = client_rect.width - 96;
-  let x = 64, y = 32;
-  let show_above = false;
+  const margin = 5;
+  palette.max_height_px = client_rect.height / 2 - margin;
+  palette.width_px = client_rect.width - 2 * margin;
+  let x = margin;
+  let y = client_rect.bottom - margin;
+  let show_above = true;
   palette.show(x, y, show_above);
 }
 function show_big_command_palette(cursor_rect, client_rect) {
@@ -661,6 +664,9 @@ function handleImagesChanges(transaction) {
 }
 let commands = [
   //{    caption: 'Styles',       separator: true },
+  { caption: "Back to edit", description: "Escape", icon: FaArrowLeft, on_choice: () => {
+    editor?.commands.focus();
+  }, is_visible: () => isDeviceSmallerThan("sm") },
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();

package/components/document/internal/Document_command.d.ts

@@ -7,5 +7,6 @@ export declare class Document_command {
     icon_size?: number;
     on_choice: any;
     is_active: any;
+    is_visible: any;
     separator?: boolean;
 }

package/components/document/internal/Document_command.js

@@ -7,5 +7,6 @@ export class Document_command {
     icon_size = 6;
     on_choice;
     is_active;
+    is_visible;
     separator = false;
 }

package/components/document/internal/palette.svelte

@@ -78,19 +78,25 @@ export function execute_selected_command() {
 export function filter(key) {
   if (!filtered_commands)
     return filtered_commands;
+  let was_any_items_before = filtered_commands.length > 0;
   if (!key) {
     filtered_commands = [...commands];
-    return filtered_commands;
+  } else {
+    filtered_commands = [];
+    commands.forEach((cmd) => {
+      if (cmd.separator)
+        filtered_commands.push(cmd);
+      else if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
+        filtered_commands.push(cmd);
+      else if (cmd.tags && cmd.tags.toLowerCase().includes(key.toLowerCase()))
+        filtered_commands.push(cmd);
+    });
   }
-  let was_any_items_before = filtered_commands.length > 0;
-  filtered_commands = [];
-  commands.forEach((cmd) => {
-    if (cmd.separator)
-      filtered_commands.push(cmd);
-    else if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
-      filtered_commands.push(cmd);
-    else if (cmd.tags && cmd.tags.toLowerCase().includes(key.toLowerCase()))
-      filtered_commands.push(cmd);
+  filtered_commands = filtered_commands.filter((c) => {
+    if (c.is_visible)
+      return c.is_visible();
+    else
+      return true;
   });
   if (!current_command || filtered_commands.every((v) => v != current_command)) {
     if (filtered_commands.length)

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

@@ -43,13 +43,15 @@ export function activate(e) {
   activateItem("props", item, operations);
 }
 function getOperations() {
-  let operations = [];
   const getCustomOperations = definition.getCardOperations;
   if (getCustomOperations) {
     const cutomOperations = getCustomOperations(item);
-    cutomOperations.forEach((o) => operations.push(o));
+    if (Array.isArray(cutomOperations)) {
+      return [...cutomOperations];
+    } else {
+      return { ...cutomOperations };
+    }
   }
-  return operations;
 }
 let card;
 export function _scrollViewToCard() {

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

@@ -78,7 +78,7 @@ async function edit_date(field, prop_idx) {
                                     a={prop.a}
                                     compact={true}
                                     onSelect={prop.onSelect}
-                                    s=""
+                                    s="sm"
                                     inContext="props sel"
                                     bind:this={props[prop_index]}
                                     changed={(value)=>{on_date_changed(value, prop.a)}}
@@ -95,7 +95,7 @@ async function edit_date(field, prop_idx) {
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}
                                 changed={(key,name)=>{on_combo_changed(key, name, prop)}}
-                                s=""/>
+                                s="sm"/>
                     {:else if prop.type == rList_property_type.Static}
                         <span class="dark:text-white text-stone-400 truncate  bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
                             {item[prop.a]}

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

@@ -238,7 +238,7 @@ export function scrollToView() {
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="my-1 flex flex-row my-0  w-full  text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
+<section    class="my-1 flex flex-row w-full  text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
             on:contextmenu={on_contextmenu}
             role="menu"
             tabindex="-1"
@@ -271,7 +271,7 @@ export function scrollToView() {
                                         onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
                                     }}
                             > 
-                            {element_title} (1)
+                            {element_title}
                         </p>
                     {:else}
                         <p  class=" text-base font-semibold 
@@ -283,7 +283,7 @@ export function scrollToView() {
                                 active: true,
                                 readonly: definition.title_readonly,
                             }}> 
-                                {element_title} (2)
+                                {element_title}
 
                             {#if definition.onOpen}
                                 <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
@@ -299,7 +299,7 @@ export function scrollToView() {
                              
                             whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
                     id="__hd_list_ctrl_{item[item_key]}_Title"> 
-                    {element_title} (3)
+                    {element_title}
                 </p>
             {/if}
            
@@ -309,12 +309,16 @@ export function scrollToView() {
             </section>
         </div>
 
+        <section class="block sm:hidden w-full">
+            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
+        </section>
+
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
             {#key item[summary] }           
                 {#if is_row_active}
                     <p  id={element_id} 
-                        class=" text-sm   mt-1  mb-2                          
+                        class=" text-sm    mb-2                          
                                 text-stone-400"
                             use:editable={{
                                 action: (text) => {change_summary(text)},
@@ -322,23 +326,21 @@ export function scrollToView() {
                                 onFinish: (d) => {placeholder='';},
                                 active: true
                             }}>
-                        {item[summary]} (I)
+                        {item[summary]}
                     </p>
                 {:else}
                     <p  id={element_id} 
-                        class=" text-sm mt-1 mb-2
+                        class=" text-sm mb-2
                                     text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
-                        {item[summary]} (II)
+                        {item[summary]}
                     </p>
                 {/if}
             {/key}
                 
         {/if}
 
-        <section class="block sm:hidden w-full">
-            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
-        </section>
+        
 
     </div>
 </section>

package/components/sidebar/sidebar.group.svelte

@@ -36,11 +36,11 @@
 {/if}
 
 {#if !collapsable}
-    <ul class="space-y-2 {list_border}">
+    <ul class= "{list_border}">
         <slot/>
     </ul>
 {:else if !collapsed}
-    <ul class="space-y-2 {list_border}">
+    <ul class="{list_border}">
         <slot/>
     </ul>
 {/if}