@humandialog/forms.svelte 0.4.13 → 0.4.15

package/components/Floating_container.svelte

@@ -1,45 +1,78 @@
-<script>import { tick } from "svelte";
+<script>import { tick, afterUpdate } from "svelte";
+import { is_device_smaller_than } from "../utils";
 let x;
 let y;
 let visible = false;
 let toolbar;
 let props = {};
+let around_rect;
 let root_element;
 let invisible_button;
 $:
   display = visible ? "fixed" : "hidden";
-export async function show(_x, _y, _toolbar, _props = {}) {
-  x = _x;
-  y = _y;
+export async function show(around, _toolbar, _props = {}) {
+  if (around instanceof DOMRect) {
+    x = around.left;
+    y = around.bottom;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  props.onhide = () => {
+    hide();
+  };
   await tick();
   focus_first_element();
 }
+export function is_visible() {
+  return visible;
+}
 export function hide() {
   visible = false;
 }
+afterUpdate(() => {
+  if (!root_element)
+    return;
+  let rect = root_element.getBoundingClientRect();
+  if (rect.height == 0)
+    return;
+  let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  if (rect.right > container_rect.right)
+    x = container_rect.right - rect.width;
+  if (rect.bottom > container_rect.bottom)
+    y = container_rect.bottom - rect.height - around_rect.height;
+  if (rect.left < container_rect.left)
+    x = container_rect.left;
+  if (rect.top < container_rect.top)
+    y = container_rect.top;
+});
 function focus_first_element() {
   invisible_button.focus();
   return;
   let focusable = root_element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-  console.log(focusable);
   focusable.focus();
 }
 function on_focus_out(e) {
-  if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
-  } else
-    hide();
+  if (!is_device_smaller_than("sm")) {
+    if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
+    } else
+      hide();
+  } else {
+  }
 }
 </script>
 
 <div    id="__hd_svelte_floating_container"
         class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display}"
-        style="left:{x}px; top:{y}px"
+        style="left:{x}px; top:{y}px; width: max-content; height:max-content"
         on:focusout={on_focus_out}
         bind:this={root_element}>
     <button class="w-0 h-0 fixed bg-transparent " bind:this={invisible_button}></button>
-    <svelte:component this={toolbar} {...props} hide={() => hide()}/>
+    <svelte:component this={toolbar} {...props} />
 </div>
 

package/components/Floating_container.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        show?: ((_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
+        show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
+        is_visible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
     };
     events: {
@@ -13,7 +14,8 @@ export type FloatingContainerProps = typeof __propDef.props;
 export type FloatingContainerEvents = typeof __propDef.events;
 export type FloatingContainerSlots = typeof __propDef.slots;
 export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
-    get show(): (_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>;
+    get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
+    get is_visible(): () => boolean;
     get hide(): () => void;
 }
 export {};

package/components/Grid.menu.svelte

@@ -2,7 +2,7 @@
     import {context_items_store} from '../stores.js'
 
     export let operations = []
-    export let hide = undefined;
+    export let onhide = undefined;
     
     $: grid_cols = init(operations);
 
@@ -94,8 +94,10 @@
 
     function execute_action(e, operation)
     {
-        if(hide != undefined)
-            hide();
+        if(!!onhide)
+            onhide();
+
+        e.stopPropagation();
 
         if(!operation)
             return;

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

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

package/components/combo/combo.d.ts

@@ -7,6 +7,8 @@ export declare class rCombo_item {
 export declare class rCombo_definition {
     source: rCombo_item[];
     collection_expr: string | undefined;
+    collection_path: string | undefined;
+    collection: object[] | undefined;
     on_collect: undefined;
     element_key: string | undefined;
     element_name: string | undefined;

package/components/combo/combo.js

@@ -7,6 +7,8 @@ export class rCombo_item {
 export class rCombo_definition {
     source = [];
     collection_expr;
+    collection_path;
+    collection;
     on_collect = undefined;
     element_key;
     element_name;

package/components/combo/combo.source.svelte

@@ -1,11 +1,15 @@
 <script>import { getContext } from "svelte";
-export let collection = "";
+export let association = void 0;
+export let path = void 0;
+export let objects = void 0;
 export let on_collect = void 0;
 export let key = "";
 export let name = "";
 export let avatar = "";
 let definition = getContext("rCombo-definition");
-definition.collection_expr = collection;
+definition.collection_expr = association;
+definition.collection_path = path;
+definition.collection = objects;
 definition.on_collect = on_collect;
 definition.element_key = key;
 definition.element_name = name;

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

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        collection?: string | undefined;
+        association?: string | undefined;
+        path?: string | undefined;
+        objects?: object[] | undefined;
         on_collect?: undefined;
         key?: string | undefined;
         name?: string | undefined;

package/components/combo/combo.svelte

@@ -1,7 +1,7 @@
 <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";
-import { afterUpdate, getContext, setContext } from "svelte";
+import { afterUpdate, getContext, onMount, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
 import Icon from "../icon.svelte";
@@ -9,19 +9,25 @@ import { Auth } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
 export let self = null;
 export let a = "";
+export let is_association = false;
 export let context = "";
 export let typename = "";
 export let choice_callback = "";
 export let on_select = void 0;
+export let definition = null;
+export let changed = void 0;
 export let icon = false;
 export let placeholder = "Choose wisely...";
 export let s = "sm";
 export let c = "";
 export let compact = false;
 export let in_context = "sel";
+export let cached = false;
 let is_compact = getContext("rIs-table-component") || compact;
-let definition = new rCombo_definition();
-setContext("rCombo-definition", definition);
+if (!definition) {
+  definition = new rCombo_definition();
+  setContext("rCombo-definition", definition);
+}
 let is_dropdown_open = false;
 let dropdown_position = "";
 let combo;
@@ -56,9 +62,7 @@ switch (s) {
 let background_class = is_compact && !icon ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
 let appearance_class;
 if (is_compact)
-  appearance_class = `   text-gray-900 ${font_size} 
-                                focus:ring-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700 
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 ${background_class}`;
+  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 
@@ -78,13 +82,27 @@ function setup(...args) {
     label = a;
   tick_request_internal = tick_request_internal + 1;
   if (is_compact) {
-    if ($context_items_store[in_context] != self)
-      can_be_activated = false;
-    else
-      can_be_activated = true;
+    can_be_activated = false;
+    let contexts = in_context.split(" ");
+    contexts.forEach((ctx2) => {
+      if ($context_items_store[ctx2] == item)
+        can_be_activated = true;
+    });
   } else
     can_be_activated = true;
 }
+onMount(() => {
+  if (definition.on_collect)
+    definition.on_collect().then((source) => source_fetched(source));
+  else if (definition.collection_expr)
+    fetch_source_from_association().then((source) => source_fetched(source));
+  else if (definition.collection_path)
+    get_source_collection(definition.collection_path, `${definition.collection_path}`).then((source) => source_fetched(source));
+  else if (definition.collection)
+    source_fetched(definition.collection);
+  return () => {
+  };
+});
 afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
@@ -172,14 +190,8 @@ export function show(event, hide_callback) {
     characterData: true,
     subtree: true
   });
-  if (definition.collection_expr)
-    fetch_source().then((source) => source_fetched(source));
-  else if (definition.on_collect) {
-    definition.on_collect().then((source) => source_fetched(source));
-  } else {
-    filtered_source = definition.source.map((e) => e);
-    highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
-  }
+  filtered_source = definition.source.map((e) => e);
+  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
 }
 export function hide() {
   if (mutation_observer)
@@ -236,41 +248,82 @@ function get_combo_text() {
 }
 async function on_choose(itm) {
   hide();
-  if (choice_callback) {
-    let body = {
-      choice: {
-        $ref: itm.Key
-      }
-    };
-    let path = `${typename}/${item.Id}/${choice_callback}`;
-    let fields = calc_path_fields_param();
-    if (fields)
-      path += fields;
-    let res = await Auth.fetch(
-      `json/yav1/${path}`,
-      {
-        method: "POST",
-        body: JSON.stringify(body)
-      }
-    );
-    if (res.ok) {
-      let result_item = await res.json();
-      let result_typename = Object.keys(result_item)[0];
-      item[a] = result_item[result_typename];
-      tick_request_internal = tick_request_internal + 1;
-    } else
-      console.error(res);
-  } else if (on_select) {
+  if (on_select) {
     await on_select(item, itm.Key, itm.Name);
     tick_request_internal = tick_request_internal + 1;
   } else {
-    item[a] = itm.Key ?? itm.Name;
-    tick_request_internal = tick_request_internal + 1;
-    if (item && a && typename) {
-      inform_modification(item, a, typename);
-      push_changes();
+    if (is_association) {
+      if (choice_callback) {
+        let body = {
+          choice: {
+            $ref: itm.Key
+          }
+        };
+        let path;
+        if (item.$ref)
+          path = `${item.$ref}/${choice_callback}`;
+        else
+          path = `${typename}/${item.Id}/${choice_callback}`;
+        let fields = calc_path_fields_param();
+        if (fields)
+          path += fields;
+        let result = await Auth.post(`json/yav1/${path}`, body);
+        if (result) {
+          let result_typename = Object.keys(result)[0];
+          item[a] = result[result_typename];
+          tick_request_internal = tick_request_internal + 1;
+        }
+      } else {
+        let path;
+        if (item.$ref)
+          path = `json/yav1/${item.$ref}/set`;
+        else if (typename && item.Id)
+          path = `json/yav1/${typename}/${item.Id}/set`;
+        let result = await Auth.post(
+          path,
+          {
+            [a]: {
+              $ref: itm.Key
+            }
+          }
+        );
+        if (result) {
+          let name = definition.element_name ?? "$display";
+          item[a] = {
+            $ref: itm.Key,
+            [name]: itm.Name
+          };
+          tick_request_internal = tick_request_internal + 1;
+        }
+      }
+    } else {
+      if (choice_callback) {
+        let path;
+        if (item.$ref)
+          path = `json/yav1/${item.$ref}/${choice_callback}`;
+        else
+          path = `json/yav1/${typename}/${item.Id}/${choice_callback}`;
+        let fields = calc_path_fields_param();
+        if (fields)
+          path += fields;
+        let value = itm.Key ?? itm.Name;
+        let result = await Auth.post(path, { choice: value });
+        if (result) {
+          item[a] = result;
+          tick_request_internal = tick_request_internal + 1;
+        }
+      } else {
+        item[a] = itm.Key ?? itm.Name;
+        tick_request_internal = tick_request_internal + 1;
+        if (item && a && typename) {
+          inform_modification(item, a, typename);
+          push_changes();
+        }
+      }
     }
   }
+  if (!!changed)
+    changed(itm.Key, itm.Name);
 }
 function on_keydown(e) {
   switch (e.key) {
@@ -337,7 +390,7 @@ let last_tick_internal = -1;
 function on_mouse_move(over) {
   highlighted_option = over;
 }
-async function fetch_source() {
+async function fetch_source_from_association() {
   if (item.hasOwnProperty(definition.collection_expr)) {
     let prop = item[definition.collection_expr];
     if (!prop)
@@ -353,7 +406,11 @@ async function fetch_source() {
     } else
       return null;
   } else {
-    let path = `${typename}/${item.Id}/${definition.collection_expr}`;
+    let path;
+    if (item.$ref)
+      path = `${item.$ref}/${definition.collection_expr}`;
+    else
+      path = `${typename}/${item.Id}/${definition.collection_expr}`;
     return await get_source_collection(path, `${typename}_${definition.collection_expr}`);
   }
 }
@@ -378,23 +435,16 @@ function calc_path_fields_param() {
 async function get_source_collection(path, cache_key) {
   if (!cached_sources.has(cache_key)) {
     let promise2 = new Promise(async (resolve, fail) => {
-      try {
-        let fields = calc_path_fields_param();
-        if (fields)
-          path += fields;
-        let res = await Auth.fetch(`json/yav1/${path}`, {
-          method: "POST"
-        });
-        if (res.ok)
-          resolve(await res.json());
-        else
-          resolve(null);
-      } catch (err) {
-        console.error(err);
-        resolve(null);
-      }
+      let fields = calc_path_fields_param();
+      if (fields)
+        path += fields;
+      let res = await Auth.get(`json/yav1/${path}`);
+      resolve(res);
     });
-    cached_sources.set(cache_key, promise2);
+    if (!cached)
+      return await promise2;
+    else
+      cached_sources.set(cache_key, promise2);
   }
   let promise = cached_sources.get(cache_key);
   return await promise;
@@ -409,18 +459,21 @@ function source_fetched(source) {
     let type = Object.keys(source)[0];
     array = source[type];
   }
-  item[definition.collection_expr] = [...array];
   definition.source = [];
   array.forEach((e) => {
     let el = new rCombo_item();
     if (definition.element_name)
       el.Name = e[definition.element_name];
-    else
+    else if (e.$display)
       el.Name = e.$display;
+    else
+      el.Name = e.toString();
     if (definition.element_key)
       el.Key = e[definition.element_key];
-    else
+    else if (e.$ref)
       el.Key = e.$ref;
+    else
+      el.Key = el.Name;
     if (icon) {
       if (definition.element_avatar)
         el.Avatar = e[definition.element_avatar];
@@ -429,8 +482,6 @@ 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)
@@ -454,7 +505,7 @@ function on_focus_out(e) {
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
     
-<div class={cs}
+<div class="{cs} max-w-full inline-block"
     on:focusout={on_focus_out}
     bind:this={root_element}>
     {#if !is_compact}
@@ -462,12 +513,12 @@ function on_focus_out(e) {
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click={show}
-            class="{appearance_class} flex flex-row content-between items-center"
+            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="flex-1 flex flex-row items-center">
+        <div class="max-w-full flex-1 flex flex-row items-center">
             {#if !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
@@ -480,7 +531,7 @@ function on_focus_out(e) {
 
             
             <p  bind:this={textbox}
-                class="dark:text-white {line_h}"
+                class="dark:text-white {line_h} truncate px-2.5 {background_class}"
                 class:ml-2={icon}
                 class:text-gray-400={ (!is_dropdown_open) && (!sel_item)}
                 class:text-gray-700={ is_dropdown_open || sel_item }
@@ -500,13 +551,6 @@ function on_focus_out(e) {
             style={dropdown_position}
             use:dropdown_action>
         <ul class="py-1">
-<!--        {#if is_dropdown_open && definition.collection_expr}
-                {#await fetch_source()}
-                    <p>Loading...</p>
-                {:then source} 
-                    {@const c = source_fetched(source)}
-                {/await}
-            {/if}  -->
 
             {#if definition.source && definition.source.length}
                 {@const _filtered_source = filtered_source ? filtered_source : definition.source}

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

@@ -1,19 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
+import { rCombo_definition } from './combo';
 declare const __propDef: {
     props: {
         label?: string | undefined;
         self?: null | undefined;
         a?: string | undefined;
+        is_association?: boolean | undefined;
         context?: string | undefined;
         typename?: string | undefined;
         choice_callback?: string | undefined;
         on_select?: undefined;
+        definition?: rCombo_definition | null | undefined;
+        changed?: undefined;
         icon?: boolean | undefined;
         placeholder?: string | undefined;
         s?: string | undefined;
         c?: string | undefined;
         compact?: boolean | undefined;
         in_context?: string | undefined;
+        cached?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
         hide?: (() => void) | undefined;
     };

package/components/contextmenu.svelte

@@ -1,6 +1,7 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
 import { context_items_store } from "../stores";
+import { is_device_smaller_than } from "../utils";
 export let width_px = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -13,6 +14,7 @@ let min_width_px = 200;
 let focused_index = 0;
 let menu_items = [];
 let submenus = [];
+let around_rect;
 $:
   display = visible ? "block" : "none";
 afterUpdate(() => {
@@ -23,15 +25,22 @@ afterUpdate(() => {
   if (rect.right > container_rect.right)
     x = container_rect.right - rect.width;
   if (rect.bottom > container_rect.bottom)
-    y = container_rect.bottom - rect.height;
+    y = container_rect.bottom - rect.height - around_rect.height;
   if (rect.left < container_rect.left)
     x = container_rect.left;
   if (rect.top < container_rect.top)
     y = container_rect.top;
 });
-export async function show(_x, _y, _operations) {
-  x = _x;
-  y = _y;
+export async function show(around, _operations) {
+  if (around instanceof DOMRect) {
+    x = around.left;
+    y = around.bottom;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
   visible = true;
   operations = [..._operations];
   focused_index = 0;
@@ -39,6 +48,9 @@ export async function show(_x, _y, _operations) {
   if (menu_items.length)
     focus_menu_item(focused_index);
 }
+export function is_visible() {
+  return visible;
+}
 export function hide() {
   visible = false;
 }
@@ -91,10 +103,12 @@ function navigate_down() {
   }
 }
 function on_change_focus(e) {
-  if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
-    return;
-  else
-    hide();
+  if (!is_device_smaller_than("sm")) {
+    if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
+      return;
+    else
+      hide();
+  }
 }
 function on_mouse_move(index) {
   focus_menu_item(index);
@@ -142,7 +156,7 @@ function hide_submenu() {
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class="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 z-20 fixed min-w-[{min_width_px}px]" 
+    class="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 z-20 fixed min-w-[{min_width_px}px] w-max" 
     style={`left:${x}px; top:${y}px; display:${display}`}
     bind:this={menu_root}
     on:focusout={on_change_focus}>

package/components/contextmenu.svelte.d.ts

@@ -4,7 +4,8 @@ declare const __propDef: {
         width_px?: number | undefined;
         menu_items_id_prefix?: string | undefined;
         owner_menu_item?: HTMLElement | undefined;
-        show?: ((_x: number, _y: number, _operations: any) => Promise<void>) | undefined;
+        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        is_visible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
         get_rendered_rect?: (() => DOMRect | undefined) | undefined;
     };
@@ -17,7 +18,8 @@ export type ContextmenuProps = typeof __propDef.props;
 export type ContextmenuEvents = typeof __propDef.events;
 export type ContextmenuSlots = typeof __propDef.slots;
 export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
-    get show(): (_x: number, _y: number, _operations: any) => Promise<void>;
+    get show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
+    get is_visible(): () => boolean;
     get hide(): () => void;
     get get_rendered_rect(): () => DOMRect | undefined;
 }