@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/combo/combo.svelte

@@ -1,6 +1,6 @@
-<script>import { data_tick_store, context_items_store, context_types_store } from "../../stores.js";
-import { inform_modification, push_changes } from "../../updates.js";
-import { parse_width_directive, should_be_comapact } from "../../utils.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+import { informModification, pushChanges } from "../../updates.js";
+import { parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
@@ -9,20 +9,23 @@ import { reef } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
 export let self = null;
 export let a = "";
-export let is_association = false;
+export let isAssociation = false;
 export let context = "";
 export let typename = "";
-export let choice_callback = "";
-export let on_select = void 0;
+export let choiceCallback = "";
+export let onSelect = void 0;
 export let definition = null;
 export let changed = void 0;
+export let onNewItemCreated = void 0;
 export let icon = false;
-export let placeholder = "Choose wisely...";
+export let placeholder = "";
 export let s = "sm";
 export let c = "";
 export let compact = false;
-export let in_context = "sel";
+export let inContext = "sel";
 export let cached = false;
+export let filtered = false;
+export let pushChangesImmediately = true;
 let is_compact = getContext("rIs-table-component") || compact;
 if (!definition) {
   definition = new rCombo_definition();
@@ -41,8 +44,9 @@ let root_element;
 let label_mb = "mb-1";
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
-let font_size = "text-sm";
+let font_size = "text-lg sm:text-sm";
 let line_h = "h-5";
+let chevron_mt = "mt-2 sm:mt-0";
 switch (s) {
   case "md":
     label_mb = "mb-2";
@@ -50,6 +54,7 @@ switch (s) {
     input_pb = "pb-2.5";
     font_size = "text-lg sm:text-sm";
     line_h = "h-7 sm:h-5";
+    chevron_mt = "mt-2 sm:mt-1";
     break;
   case "xs":
     label_mb = "mb-0.5";
@@ -57,6 +62,7 @@ switch (s) {
     input_pb = "pb-0.5";
     font_size = "text-base sm:text-xs";
     line_h = "h-6 sm:h-4";
+    chevron_mt = "";
     break;
 }
 let background_class = is_compact && !icon ? "" : "";
@@ -64,36 +70,36 @@ let appearance_class;
 if (is_compact)
   appearance_class = `${font_size}`;
 else
-  appearance_class = `   bg-gray-50 border border-gray-300 text-gray-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-gray-700 
-                                dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
-let cs = c ? parse_width_directive(c) : "col-span-1";
+  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");
 let can_be_activated = true;
 let last_tick = -1;
 $:
-  setup($data_tick_store, $context_items_store);
+  setup($data_tick_store, $contextItemsStore);
 function setup(...args) {
   last_tick = $data_tick_store;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
   if (!label)
     label = a;
   tick_request_internal = tick_request_internal + 1;
   if (is_compact) {
     can_be_activated = false;
-    let contexts = in_context.split(" ");
+    let contexts = inContext.split(" ");
     contexts.forEach((ctx2) => {
-      if ($context_items_store[ctx2] == item)
+      if ($contextItemsStore[ctx2] == item)
         can_be_activated = true;
     });
   } else
     can_be_activated = true;
 }
 onMount(() => {
-  if (definition.on_collect)
-    definition.on_collect().then((source) => source_fetched(source));
+  if (definition.onCollect)
+    definition.onCollect().then((source) => source_fetched(source));
   else if (definition.collection_expr)
     fetch_source_from_association().then((source) => source_fetched(source));
   else if (definition.collection_path)
@@ -175,24 +181,23 @@ export function show(event, hide_callback) {
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
-  console.log("combo show pos", dropdown_position, "rect", rect, "client_rect", client_rect, "combo", combo);
   is_dropdown_open = true;
-  if (!textbox)
-    return;
-  textbox.innerHTML = "";
-  tick_request_internal = tick_request_internal + 1;
-  if (!mutation_observer)
-    mutation_observer = new MutationObserver(() => {
-      on_input_change();
+  if (filtered) {
+    if (!textbox)
+      return;
+    textbox.innerHTML = "";
+    tick_request_internal = tick_request_internal + 1;
+    if (!mutation_observer)
+      mutation_observer = new MutationObserver(() => {
+        on_input_change();
+      });
+    mutation_observer.observe(textbox, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
     });
-  mutation_observer.observe(textbox, {
-    childList: true,
-    attributes: true,
-    characterData: true,
-    subtree: true
-  });
-  filtered_source = definition.source.map((e) => e);
-  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
+  }
 }
 export function hide() {
   if (mutation_observer)
@@ -243,26 +248,29 @@ function get_combo_text() {
     if (found)
       return found.Name ?? found.Key;
     else
-      return !is_compact ? placeholder : "";
+      return placeholder;
   } else
     return textbox.innerHTML;
 }
 async function on_choose(itm) {
   hide();
-  if (on_select) {
-    await on_select(item, itm.Key, itm.Name);
+  if (onSelect) {
+    if (itm == new_item_option)
+      await onNewItemCreated(itm.Key, itm.Name);
+    else
+      await onSelect(item, itm.Key, itm.Name);
     tick_request_internal = tick_request_internal + 1;
   } else {
-    if (is_association) {
-      if (choice_callback) {
+    if (isAssociation) {
+      if (choiceCallback) {
         let body = {
           choice: itm.Key
         };
         let path;
         if (item.$ref)
-          path = `${item.$ref}/${choice_callback}`;
+          path = `${item.$ref}/${choiceCallback}`;
         else
-          path = `${typename}/${item.Id}/${choice_callback}`;
+          path = `${typename}/${item.Id}/${choiceCallback}`;
         let fields = calc_path_fields_param();
         if (fields)
           path += fields;
@@ -294,12 +302,12 @@ async function on_choose(itm) {
         }
       }
     } else {
-      if (choice_callback) {
+      if (choiceCallback) {
         let path;
         if (item.$ref)
-          path = `/${item.$ref}/${choice_callback}`;
+          path = `/${item.$ref}/${choiceCallback}`;
         else
-          path = `/${typename}/${item.Id}/${choice_callback}`;
+          path = `/${typename}/${item.Id}/${choiceCallback}`;
         let fields = calc_path_fields_param();
         if (fields)
           path += fields;
@@ -313,8 +321,9 @@ async function on_choose(itm) {
         item[a] = itm.Key ?? itm.Name;
         tick_request_internal = tick_request_internal + 1;
         if (item && a && typename) {
-          inform_modification(item, a, typename);
-          push_changes();
+          informModification(item, a, typename);
+          if (pushChangesImmediately)
+            pushChanges();
         }
       }
     }
@@ -370,13 +379,23 @@ function on_input_change() {
   filtered_source = get_filtered_source();
   highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
 }
+let new_item_option;
 function get_filtered_source() {
-  if (!textbox)
+  if (!textbox || !filtered)
     return definition.source;
   else if (textbox.innerHTML) {
-    return definition.source.filter((e) => {
+    let result = definition.source.filter((e) => {
       return e.Name && e.Name.toLowerCase().includes(textbox.innerHTML.toLowerCase()) || e.Key && e.Key.toString().toLowerCase().includes(textbox.innerHTML.toLowerCase());
     });
+    if (onNewItemCreated) {
+      if (!new_item_option)
+        new_item_option = new rCombo_item();
+      let new_name = textbox.innerHTML;
+      new_item_option.Key = new_name;
+      new_item_option.Name = `Create '${new_name}'`;
+      result = [new_item_option, ...result];
+    }
+    return result;
   } else
     return definition.source;
 }
@@ -479,6 +498,8 @@ function source_fetched(source) {
     }
     definition.source.push(el);
   });
+  filtered_source = definition.source.map((e) => e);
+  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
 }
 function setup_view(...args) {
   if (tick_request_internal <= last_tick_internal)
@@ -506,7 +527,7 @@ function on_focus_out(e) {
     on:focusout={on_focus_out}
     bind:this={root_element}>
     {#if !is_compact}
-        <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+        <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}    
@@ -528,23 +549,26 @@ function on_focus_out(e) {
 
             
             <p  bind:this={textbox}
-                class="dark:text-gray-300 {line_h} truncate sm:pl-2.5 pr-2.5 {background_class}"
+                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-gray-400={ (!is_dropdown_open) && (!sel_item)}
-                class:text-gray-700={ is_dropdown_open || sel_item }
+                class:text-stone-400={ (!is_dropdown_open) && (!sel_item)}
+                class:text-stone-700={ is_dropdown_open || sel_item }
                 class:w-10={!combo_text}
-                contenteditable={is_dropdown_open}
-                on:keydown={on_keydown}>
+                contenteditable={is_dropdown_open && filtered}
+                on:keydown={on_keydown}
+                tabindex="0">
                 {combo_text}</p>
         </div>
         
         {#if can_be_activated }
-            <Icon size={3} component={FaChevronDown} class="flex-none text-gray-700 dark:text-gray-300"/>
+            <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-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md overflow-y-auto cursor-pointer z-30"
+            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"
             style={dropdown_position}
             use:dropdown_action>
         <ul class="py-1">
@@ -555,9 +579,9 @@ function on_focus_out(e) {
                     {#each _filtered_source as item (item.Key)}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <li class="rounded p-2 flex flex-row items-center {font_size}" 
-                            class:bg-gray-100={highlighted_option == item}
-                            class:dark:bg-gray-700={highlighted_option == item}
-                            class:dark:hover:bg-gray-700={highlighted_option == item}
+                            class:bg-stone-100={highlighted_option == item}
+                            class:dark:bg-stone-700={highlighted_option == item}
+                            class:dark:hover:bg-stone-700={highlighted_option == item}
                             on:mousemove={() => on_mouse_move(item)}
                             on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
                             tabindex="-1">
@@ -597,4 +621,11 @@ function on_focus_out(e) {
     outline: 0px solid transparent;
 }
 
+@media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+
 </style>

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

@@ -5,20 +5,23 @@ declare const __propDef: {
         label?: string | undefined;
         self?: null | undefined;
         a?: string | undefined;
-        is_association?: boolean | undefined;
+        isAssociation?: boolean | undefined;
         context?: string | undefined;
         typename?: string | undefined;
-        choice_callback?: string | undefined;
-        on_select?: undefined;
+        choiceCallback?: string | undefined;
+        onSelect?: undefined;
         definition?: rCombo_definition | null | undefined;
         changed?: undefined;
+        onNewItemCreated?: undefined;
         icon?: boolean | undefined;
         placeholder?: string | undefined;
         s?: string | undefined;
         c?: string | undefined;
         compact?: boolean | undefined;
-        in_context?: string | undefined;
+        inContext?: string | undefined;
         cached?: boolean | undefined;
+        filtered?: boolean | undefined;
+        pushChangesImmediately?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
         hide?: (() => void) | undefined;
     };

package/components/contextmenu.svelte

@@ -1,9 +1,9 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { context_items_store } from "../stores";
-import { is_device_smaller_than } from "../utils";
-import { hide_whole_context_menu } from "./menu";
-export let width_px = 400;
+import { contextItemsStore } from "../stores";
+import { isDeviceSmallerThan } from "../utils";
+import { hideWholeContextMenu } from "./menu";
+export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
 let x = 0;
@@ -22,7 +22,8 @@ afterUpdate(() => {
   let rect = menu_root.getBoundingClientRect();
   if (rect.height == 0)
     return;
-  let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  const m = 15;
+  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
   if (rect.right > container_rect.right)
     x = container_rect.right - rect.width;
   if (rect.bottom > container_rect.bottom)
@@ -56,7 +57,7 @@ export async function show(around, _operations) {
   if (menu_items.length)
     focus_menu_item(focused_index);
 }
-export function is_visible() {
+export function isVisible() {
   return visible;
 }
 export function hide() {
@@ -64,7 +65,7 @@ export function hide() {
   window.removeEventListener("click", on_before_window_click, true);
   menu_root.removeEventListener("click", on_before_container_click, true);
 }
-export function get_rendered_rect() {
+export function getRenderedRect() {
   if (menu_root)
     return menu_root.getBoundingClientRect();
   else
@@ -87,7 +88,7 @@ function on_keydown(e, operation, index) {
   switch (e.key) {
     case "Esc":
     case "Escape":
-      hide_whole_context_menu();
+      hideWholeContextMenu();
       break;
     case "ArrowDown":
       navigate_down();
@@ -126,7 +127,7 @@ function navigate_down() {
   }
 }
 function on_change_focus(e) {
-  if (!is_device_smaller_than("sm")) {
+  if (!isDeviceSmallerThan("sm")) {
     if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
       return;
     else
@@ -141,14 +142,14 @@ function execute_action(operation, index) {
     focus_menu_item(index);
     return;
   }
-  hide_whole_context_menu();
+  hideWholeContextMenu();
   if (!operation)
     return;
   if (!operation.action)
     return;
   let context_item = null;
-  if ($context_items_store.focused)
-    context_item = $context_items_store[$context_items_store.focused];
+  if ($contextItemsStore.focused)
+    context_item = $contextItemsStore[$contextItemsStore.focused];
   operation.action(context_item);
 }
 function focus_menu_item(index) {
@@ -162,7 +163,7 @@ function focus_menu_item(index) {
       let _x = rect.right;
       let _y = rect.top;
       let submenu_width = min_width_px;
-      let rendered_rect = submenus[focused_index].get_rendered_rect();
+      let rendered_rect = submenus[focused_index].getRenderedRect();
       if (rendered_rect && rendered_rect.width > 0)
         submenu_width = rendered_rect.width;
       if (_x + submenu_width > container_rect.right) {
@@ -188,7 +189,7 @@ function hide_submenu() {
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class=" bg-white dark:bg-gray-700 text-slate-600 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-900 shadow-md 
+    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 
             z-30 fixed min-w-[{min_width_px}px] w-max" 
     style={`left:${x}px; top:${y}px; display:${display}`}
     bind:this={menu_root}>
@@ -196,14 +197,14 @@ function hide_submenu() {
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}
-            <hr class="my-1 mx-0 border-1 dark:border-slate-900">
+            <hr class="my-1 mx-0 border-1 dark:border-stone-900">
         {:else}
-            {@const mobile = is_device_smaller_than("sm")}
+            {@const mobile = isDeviceSmallerThan("sm")}
             {@const icon_placeholder_without_desc = mobile ? 12 : 10}
             {@const icon_placeholder_with_desc = mobile ? 14 : 12}
             {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
             {@const menu_item_id = menu_items_id_prefix + index}
-            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-600' : ''}
+            {@const active = focused_index == index ? 'bg-stone-200 dark:bg-stone-600' : ''}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
             
             <button class="font-medium m-0 p-2 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
@@ -224,12 +225,12 @@ function hide_submenu() {
                     <p>{operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
-                        <p  class="text-sm font-normal text-slate-900 dark:text-gray-500 truncate inline-block"
+                        <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>
                     {/if}
                 </div>
                 {#if has_submenu}
-                    <p class="ms-auto pr-1 text-sm font-mono text-gray-500">&rarr;</p>
+                    <p class="ms-auto pr-1 text-sm font-mono text-stone-500">&rarr;</p>
                     <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
                 {/if}
             </button>

package/components/contextmenu.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width_px?: number | undefined;
+        widthPx?: number | undefined;
         menu_items_id_prefix?: string | undefined;
         owner_menu_item?: HTMLElement | undefined;
         show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
-        is_visible?: (() => boolean) | undefined;
+        isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
-        get_rendered_rect?: (() => DOMRect | undefined) | undefined;
+        getRenderedRect?: (() => DOMRect | undefined) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,8 +19,8 @@ export type ContextmenuEvents = typeof __propDef.events;
 export type ContextmenuSlots = typeof __propDef.slots;
 export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
     get show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
-    get is_visible(): () => boolean;
+    get isVisible(): () => boolean;
     get hide(): () => void;
-    get get_rendered_rect(): () => DOMRect | undefined;
+    get getRenderedRect(): () => DOMRect | undefined;
 }
 export {};