@humandialog/forms.svelte 1.7.28 → 1.8.1

package/components/breadcrumb.svelte

@@ -3,20 +3,20 @@
     import {randomString, isDeviceSmallerThan} from '../utils'
     import { ext } from '../i18n.js';
 	import { afterUpdate } from 'svelte';
-	
+
     export let path;
     export let collapseLonger = false
 
     let segments = []
     let userClass = $$props.class ?? ''
-    
+
     $: init($location, $querystring)
 
     function init(...args)
     {
         if(path && Array.isArray(path) && path.length > 0)
         {
-            path.forEach(el => 
+            path.forEach(el =>
                 segments.push({
                     name: el.Name,
                     href: el.href ?? '',
@@ -29,7 +29,7 @@
 
     }
 
-    
+
     function shouldBeCollapsed(idx)
     {
         const isSmall = isDeviceSmallerThan("sm")
@@ -51,7 +51,7 @@
     let startDragY = 0
     function mouseDown(e)
     {
-        
+
         isScrolling = true
         startDragX = e.offsetX
         startDragY = e.offsetY
@@ -62,7 +62,7 @@
     {
         if(isScrolling)
         {
-            const deltaX = startDragX - e.offsetX        
+            const deltaX = startDragX - e.offsetX
             //console.log('mouseMove', deltaX)
 
             scrollableElement.scrollLeft = startScrollLeft + deltaX
@@ -80,70 +80,70 @@
     */
 
     let pathElements = []
-    afterUpdate( () => 
+    afterUpdate( () =>
     {
         const elementsNo = pathElements.length
         if(elementsNo > 0)
         {
-            // container: "nearest" not supported on iOS and mobile FF 
-            //const lastElement = pathElements[elementsNo-1]    
-            //lastElement.scrollIntoView({ container: "nearest"})  
+            // container: "nearest" not supported on iOS and mobile FF
+            //const lastElement = pathElements[elementsNo-1]
+            //lastElement.scrollIntoView({ container: "nearest"})
 
             const containerRect = containerElement.getBoundingClientRect()
             const wholeWidth = containerElement.scrollWidth
             const visibleWidth = containerRect.width
             containerElement.scrollLeft = wholeWidth - visibleWidth
-            
+
         }
     })
 
 </script>
 
-<nav class="{userClass} w-full sm:w-fit sm:max-w-full overflow-x-auto sm:overflow-x-hidden" aria-label="Breadcrumb" bind:this={containerElement}>
-  <ol class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-nowrap min-h-[1.25rem]" bind:this={scrollableElement}>
-    
+<div class="{userClass} w-full sm:w-fit sm:max-w-full overflow-x-auto sm:overflow-x-hidden" aria-label="Breadcrumb" bind:this={containerElement}>
+    <div class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-nowrap min-h-[1.25rem]" bind:this={scrollableElement}>
         {#if (segments && segments.length > 0)}
             {#each segments as segment, idx (segment.uniqueKey)}
                 {@const isFirst = idx == 0}
                 {@const isCollapsed = shouldBeCollapsed(idx)}
                 {@const isFirstCollapsed = isCollapsed && idx == 0}
-                
+
                 {#if isCollapsed}
                     {#if isFirstCollapsed}
                         <!--svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                         </svg-->
-                        <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                        <span class="text-stone-900 dark:text-stone-100 whitespace-nowrap">
                             ...
                         </span>
                     {/if}
                 {:else}
-                    <li bind:this={pathElements[idx]}>
+                    <div bind:this={pathElements[idx]}>
                         <div class="flex items-center">
                             {#if !isFirst}
                                 <!--svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                                 </svg-->
-                                <span class="text-sm font-medium text-stone-700  dark:text-stone-400 ">
-                                    /
+                                <span class="font-medium text-stone-700  dark:text-stone-400 ">
+                                    &nbsp/&nbsp
                                 </span>
                             {/if}
-                            
+
                             {#if segment.href}
-                                <a href={segment.href} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                <a href={segment.href} use:link class="text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
                                     {ext(segment.name)}
                                 </a>
                             {:else}
-                                <span class="ms-1 text-sm font-medium md:ms-2 text-stone-700  dark:text-stone-400 whitespace-nowrap">
+                                <span class="font-medium text-stone-700  dark:text-stone-400 whitespace-nowrap">
                                     {ext(segment.name)}
                                 </span>
                             {/if}
-                
+
                         </div>
-                    </li>
+                    </div>
                 {/if}
             {/each}
+        {:else}
+            <span>&nbsp./&nbsp</span>
         {/if}
-    
-  </ol>
-</nav>
+    </div>
+</div>

package/components/checkbox.svelte

@@ -9,7 +9,7 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let c = "";
-export let pushChangesImmediately = true;
+export let pushChangesImmediately = false;
 let item = null;
 let additional_class = $$restProps.class ?? "";
 let value = false;

package/components/combo/combo.svelte

@@ -1,13 +1,14 @@
 <script>import { data_tick_store, contextItemsStore, contextTypesStore, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../../stores.js";
-import { informModification, pushChanges } from "../../updates.js";
+import { informModification, pushChanges, informModificationEx } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
-import { showMenu } from "../menu.js";
+import { showMenu, SHOW_MENU_BELOW } from "../menu.js";
 import { ext, i18n } from "../../i18n.js";
+import Ricon from "../r.icon.svelte";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -19,6 +20,7 @@ export let onSelect = void 0;
 export let definition = null;
 export let changed = void 0;
 export let onNewItemCreated = void 0;
+export let typo = false;
 export let icon = false;
 export let placeholder = "";
 export let s = "sm";
@@ -27,7 +29,7 @@ export let compact = false;
 export let inContext = "sel";
 export let cached = false;
 export let filtered = false;
-export let pushChangesImmediately = true;
+export let pushChangesImmediately = false;
 export let hasNone = isAssociation;
 export let readOnly = false;
 let userClass = $$restProps.class ?? "";
@@ -90,8 +92,8 @@ let appearance_class;
 if (is_compact)
   appearance_class = `${font_size}`;
 else
-  appearance_class = `   bg-stone-50 border border-stone-300 text-stone-900 ${font_size} rounded-lg 
-                                focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-stone-700 
+  appearance_class = `   bg-stone-50 border border-stone-300 text-stone-900 ${font_size} rounded-lg
+                                focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-stone-700
                                 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");
@@ -226,7 +228,7 @@ function openDropdownAsMenu() {
       action: (f) => on_choose(i)
     });
   });
-  showMenu(rect, operations);
+  showMenu(rect, operations, SHOW_MENU_BELOW, hide);
 }
 export function hide() {
   if (!is_dropdown_open)
@@ -305,66 +307,25 @@ async function on_choose(itm) {
     tick_request_internal = tick_request_internal + 1;
   } else {
     if (isAssociation) {
-      if (choiceCallback) {
-        let body = {
-          choice: itm ? itm.Key : null
-        };
-        let path;
-        if (item.$ref)
-          path = `${item.$ref}/${choiceCallback}`;
-        else
-          path = `${typename}/${item.Id}/${choiceCallback}`;
-        let fields = calc_path_fields_param();
-        if (fields)
-          path += fields;
-        let result = await reef.post(`/${path}`, body);
-        if (result) {
-          let result_typename = Object.keys(result)[0];
-          item[a] = result[result_typename];
-          tick_request_internal = tick_request_internal + 1;
+      {
+        if (itm) {
+          let name = definition.element_name ?? "$display";
+          item[a] = {
+            $ref: itm.Key,
+            [name]: itm.Name
+          };
+        } else {
+          item[a] = null;
         }
-      } else {
-        let path;
-        if (item.$ref)
-          path = `/${item.$ref}/set`;
-        else if (typename && item.Id)
-          path = `/${typename}/${item.Id}/set`;
-        let result = await reef.post(
-          path,
-          {
-            [a]: itm ? itm.Key : null
-          }
-        );
-        if (result) {
-          if (itm) {
-            let name = definition.element_name ?? "$display";
-            item[a] = {
-              $ref: itm.Key,
-              [name]: itm.Name
-            };
-          } else {
-            item[a] = null;
-          }
-          tick_request_internal = tick_request_internal + 1;
+        tick_request_internal = tick_request_internal + 1;
+        if (item && a && typename) {
+          informModificationEx(typename, item.Id, a, itm ? itm.Key : null);
+          if (pushChangesImmediately)
+            pushChanges();
         }
       }
     } else {
-      if (choiceCallback) {
-        let path;
-        if (item.$ref)
-          path = `/${item.$ref}/${choiceCallback}`;
-        else
-          path = `/${typename}/${item.Id}/${choiceCallback}`;
-        let fields = calc_path_fields_param();
-        if (fields)
-          path += fields;
-        let value = itm ? itm.Key ?? itm.Name : null;
-        let result = await reef.post(path, { choice: value });
-        if (result) {
-          item[a] = result;
-          tick_request_internal = tick_request_internal + 1;
-        }
-      } else {
+      {
         item[a] = itm ? itm.Key ?? itm.Name : null;
         tick_request_internal = tick_request_internal + 1;
         if (item && a && typename) {
@@ -575,7 +536,25 @@ function on_focus_out(e) {
 
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
-    
+
+{#if typo}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span class="inline-block relative flex flex-row  items-center
+                cursor-pointer"
+                on:focusout={on_focus_out}
+                on:click={(e) => { show(e, undefined) }}
+                bind:this={root_element}>
+        <span class="mr-1"
+            bind:this={textbox}
+            contenteditable={is_dropdown_open && filtered}
+            on:keydown={on_keydown}
+            >{combo_text}</span>
+        <Ricon icon = "chevron-down" size="s"/>
+    </span>
+{/if}
+
+{#if !typo}
+
 <div class="{cs} max-w-full inline-block {userClass}"
     on:focusout={on_focus_out}
     bind:this={root_element}>
@@ -583,14 +562,14 @@ function on_focus_out(e) {
         <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div    bind:this={combo}    
+    <div    bind:this={combo}
             class="max-w-full {appearance_class} flex flex-row content-between items-center"
          >
-            
+
         <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}
@@ -605,7 +584,7 @@ function on_focus_out(e) {
                 {/if}
             {/if}
 
-            
+
             <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}
@@ -624,8 +603,8 @@ function on_focus_out(e) {
                 </div>
             {/if}
         </p>
-        
-        
+
+
     </div>
 
     <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -635,8 +614,8 @@ function on_focus_out(e) {
                 <button class="     fixed w-6 h-6 flex items-center justify-center
                                     text-stone-500 bg-stone-200/70 hover:bg-stone-200
                                     focus:outline-none font-medium rounded-full text-sm text-center
-                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
-                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
                         style={closeButtonPos}
                         on:click={ hide }>
                     <Icon component={FaTimes} s="md"/>
@@ -649,16 +628,16 @@ function on_focus_out(e) {
                 style={dropdown_position}
                 bind:this={dropdownElement}
                 use:dropdown_action>
-            
-                
+
+
 
             <ul class="py-1">
 
                 {#if definition.source && definition.source.length}
                     {#if hasNone}
-                        
+
                         <li class="rounded flex flex-row items-center {font_size}
-                                    space-x-10 px-4 py-2 ml-12 sm:ml-0" 
+                                    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}
@@ -677,7 +656,7 @@ function on_focus_out(e) {
                         {#each _filtered_source as item (item.Key)}
                             {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
                             <li class="rounded flex flex-row items-center {font_size}
-                                    space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
+                                    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">
@@ -685,7 +664,7 @@ function on_focus_out(e) {
                                 {#if icon}
                                     {#if item.Color}
                                         <Icon s="md" circle={true} color={item.Color}/>
-                                    {:else if item.Avatar} 
+                                    {:else if item.Avatar}
                                         <Icon s="md" circle={true} symbol={item.Avatar}/>
                                     {:else if item.Icon}
                                         <Icon s="md" component={item.Icon}/>
@@ -715,9 +694,10 @@ function on_focus_out(e) {
     </div-->
 </div>
 {/if}
-
+{/if}
+{#if !typo}
 <style>
-    
+
 [contenteditable]:focus {
     outline: 0px solid transparent;
 }
@@ -730,3 +710,4 @@ function on_focus_out(e) {
     }
 
 </style>
+{/if}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         definition?: rCombo_definition | null | undefined;
         changed?: undefined;
         onNewItemCreated?: undefined;
+        typo?: boolean | undefined;
         icon?: boolean | undefined;
         placeholder?: string | undefined;
         s?: string | undefined;