@humandialog/forms.svelte 1.3.11 → 1.3.13

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

@@ -1,20 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        key?: any | undefined;
-        name?: string | undefined;
-        avatar?: string | undefined;
-        color?: string | undefined;
-        icon?: any | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComboProps = typeof __propDef.props;
-export type ComboEvents = typeof __propDef.events;
-export type ComboSlots = typeof __propDef.slots;
-export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        key?: any | undefined;
+        name?: string | undefined;
+        avatar?: string | undefined;
+        color?: string | undefined;
+        icon?: any | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+}
+export {};

package/components/combo/combo.js

@@ -1,19 +1,19 @@
-export class rCombo_item {
-    Key;
-    Name;
-    Avatar; //url to avatar
-    Color;
-    Icon = undefined;
-}
-export class rCombo_definition {
-    source = [];
-    collection_expr;
-    collection_path;
-    collection;
-    onCollect = undefined;
-    element_key;
-    element_name;
-    element_avatar;
-    element_icon;
-}
-export const cached_sources = new Map();
+export class rCombo_item {
+    Key;
+    Name;
+    Avatar; //url to avatar
+    Color;
+    Icon = undefined;
+}
+export class rCombo_definition {
+    source = [];
+    collection_expr;
+    collection_path;
+    collection;
+    onCollect = undefined;
+    element_key;
+    element_name;
+    element_avatar;
+    element_icon;
+}
+export const cached_sources = new Map();

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

@@ -1,23 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        association?: string | undefined;
-        path?: string | undefined;
-        objects?: object[] | undefined;
-        onCollect?: undefined;
-        key?: string | undefined;
-        name?: string | undefined;
-        avatar?: string | undefined;
-        icon?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComboProps = typeof __propDef.props;
-export type ComboEvents = typeof __propDef.events;
-export type ComboSlots = typeof __propDef.slots;
-export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        association?: string | undefined;
+        path?: string | undefined;
+        objects?: object[] | undefined;
+        onCollect?: undefined;
+        key?: string | undefined;
+        name?: string | undefined;
+        avatar?: string | undefined;
+        icon?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+}
+export {};

package/components/combo/combo.svelte

@@ -1,9 +1,9 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
-import { parseWidthDirective, shouldBeComapact } from "../../utils.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 from "svelte-icons/fa/FaChevronDown.svelte";
+import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
@@ -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;
@@ -198,17 +198,25 @@ export function show(event, hide_callback) {
     show_above = true;
   } else
     y = rect.y + rect.height;
-  if (show_fullscreen) {
+  if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    const maxHeight = screenRect.height / 2 - margin;
+    const width = screenRect.width - 2 * margin;
+    x = margin;
+    y = screenRect.bottom - margin;
+    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
+  } else if (show_fullscreen) {
     dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
   } else {
     dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
-  console.log("dropdown_position", dropdown_position, rect, client_rect);
-  console.log("preferred_palette_height", preferred_palette_height);
-  console.log("bottom_space", bottom_space);
-  console.log("top_space", top_space);
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -226,11 +234,34 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 export function hide() {
+  console.log("combo hide");
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
+  $toolsActionsOperations = [];
+  dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
     textbox.innerHtml = combo_text;
@@ -579,13 +610,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 +632,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 +641,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/combo/combo.svelte.d.ts

@@ -1,44 +1,44 @@
-import { SvelteComponentTyped } from "svelte";
-import { rCombo_definition } from './combo';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string | undefined;
-        self?: null | undefined;
-        a?: string | undefined;
-        isAssociation?: boolean | undefined;
-        context?: string | undefined;
-        typename?: string | 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;
-        inContext?: string | undefined;
-        cached?: boolean | undefined;
-        filtered?: boolean | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        hasNone?: boolean | undefined;
-        show?: ((event: any, hide_callback: any) => void) | undefined;
-        hide?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ComboProps = typeof __propDef.props;
-export type ComboEvents = typeof __propDef.events;
-export type ComboSlots = typeof __propDef.slots;
-export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
-    get show(): (event: any, hide_callback: any) => void;
-    get hide(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+import { rCombo_definition } from './combo';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        isAssociation?: boolean | undefined;
+        context?: string | undefined;
+        typename?: string | 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;
+        inContext?: string | undefined;
+        cached?: boolean | undefined;
+        filtered?: boolean | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        hasNone?: boolean | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+    get hide(): () => void;
+}
+export {};

package/components/contextmenu.svelte

@@ -1,8 +1,9 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore } from "../stores";
+import { contextItemsStore, toolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
+import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -16,36 +17,78 @@ let focused_index = 0;
 let menu_items = [];
 let submenus = [];
 let around_rect;
+let css_position = "";
 $:
   display = visible ? "block" : "none";
-afterUpdate(() => {
-  let rect = menu_root.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  const m = 15;
-  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (isOnScreenKeyboardVisible()) {
-    container_rect.height -= 300;
-  }
-  let xShifted = false;
-  if (rect.right > container_rect.right) {
-    x = container_rect.right - rect.width + m;
-    xShifted = true;
-  }
-  let yShifted = false;
-  if (rect.bottom > container_rect.bottom) {
-    y = container_rect.bottom - rect.height - m;
-    if (xShifted)
-      x -= around_rect.width;
-    else
-      y -= around_rect.height - m;
-    yShifted = true;
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      let maxHeight = screenRect.height / 2 - margin;
+      if (myRect.height < maxHeight)
+        maxHeight = myRect.height;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      const maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      const m = 15;
+      let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+      let xShifted = false;
+      if (myRect.right > screenRect.right) {
+        x2 = screenRect.right - myRect.width + m;
+        xShifted = true;
+      }
+      let yShifted = false;
+      if (myRect.bottom > screenRect.bottom) {
+        y2 = screenRect.bottom - myRect.height - m;
+        if (around) {
+          if (xShifted)
+            x2 -= around.width;
+          else
+            y2 -= around.height - m;
+        }
+        yShifted = true;
+      }
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; display: block`;
   }
-  if (rect.left < container_rect.left)
-    x = container_rect.left;
-  if (rect.top < container_rect.top)
-    y = container_rect.top;
-});
+  return result;
+}
 export async function show(around, _operations) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -57,6 +100,7 @@ export async function show(around, _operations) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   visible = true;
+  css_position = calculatePosition(x, y, around_rect, true, true);
   operations = [..._operations];
   focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
@@ -64,7 +108,28 @@ export async function show(around, _operations) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
   await tick();
+  css_position = calculatePosition(x, y, around_rect, true, false);
   if (is_root_menu)
     menu_root.addEventListener("click", on_before_container_click, true);
   if (menu_items.length && !isDeviceSmallerThan("sm"))
@@ -74,7 +139,9 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
+  $toolsActionsOperations = [];
   visible = false;
+  css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   menu_root.removeEventListener("click", on_before_container_click, true);
 }
@@ -210,8 +277,8 @@ function mousedown(e) {
 
 <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 
-            z-30 fixed min-w-[{min_width_px}px] w-max" 
-    style={`left:${x}px; top:${y}px; display:${display}`}
+            z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
+    style={css_position}
     bind:this={menu_root}>
 
     {#each operations as operation, index}

package/components/contextmenu.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        widthPx?: number | undefined;
-        menu_items_id_prefix?: string | undefined;
-        owner_menu_item?: HTMLElement | undefined;
-        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
-        isVisible?: (() => boolean) | undefined;
-        hide?: (() => void) | undefined;
-        getRenderedRect?: (() => DOMRect | undefined) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
-    get isVisible(): () => boolean;
-    get hide(): () => void;
-    get getRenderedRect(): () => DOMRect | undefined;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        widthPx?: number | undefined;
+        menu_items_id_prefix?: string | undefined;
+        owner_menu_item?: HTMLElement | undefined;
+        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+        getRenderedRect?: (() => DOMRect | undefined) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+    get getRenderedRect(): () => DOMRect | undefined;
+}
+export {};