@humandialog/forms.svelte 0.4.36 → 0.4.38

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

@@ -1,22 +1,22 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        association?: string | undefined;
-        path?: string | undefined;
-        objects?: object[] | undefined;
-        on_collect?: undefined;
-        key?: string | undefined;
-        name?: string | undefined;
-        avatar?: 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;
+        on_collect?: undefined;
+        key?: string | undefined;
+        name?: string | undefined;
+        avatar?: 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

@@ -543,7 +543,7 @@ function on_focus_out(e) {
     </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-20"
+            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"
             style={dropdown_position}
             use:dropdown_action>
         <ul class="py-1">

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

@@ -1,39 +1,39 @@
-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;
-    };
-    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: {
+        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;
+    };
+    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

@@ -2,6 +2,7 @@
 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;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -44,7 +45,14 @@ export async function show(around, _operations) {
   visible = true;
   operations = [..._operations];
   focused_index = 0;
+  const is_root_menu = owner_menu_item == void 0;
+  if (is_root_menu) {
+    hide_window_indicator = 0;
+    window.addEventListener("click", on_before_window_click, true);
+  }
   await tick();
+  if (is_root_menu)
+    menu_root.addEventListener("click", on_before_container_click, true);
   if (menu_items.length)
     focus_menu_item(focused_index);
 }
@@ -53,6 +61,8 @@ export function is_visible() {
 }
 export function hide() {
   visible = false;
+  window.removeEventListener("click", on_before_window_click, true);
+  menu_root.removeEventListener("click", on_before_container_click, true);
 }
 export function get_rendered_rect() {
   if (menu_root)
@@ -60,11 +70,24 @@ export function get_rendered_rect() {
   else
     return void 0;
 }
+let hide_window_indicator = 0;
+function on_before_window_click() {
+  hide_window_indicator++;
+  setTimeout(() => {
+    if (hide_window_indicator != 0) {
+      hide_window_indicator = 0;
+      hide();
+    }
+  }, 0);
+}
+function on_before_container_click() {
+  hide_window_indicator--;
+}
 function on_keydown(e, operation, index) {
   switch (e.key) {
     case "Esc":
     case "Escape":
-      hide();
+      hide_whole_context_menu();
       break;
     case "ArrowDown":
       navigate_down();
@@ -118,7 +141,7 @@ function execute_action(operation, index) {
     focus_menu_item(index);
     return;
   }
-  hide();
+  hide_whole_context_menu();
   if (!operation)
     return;
   if (!operation.action)
@@ -132,34 +155,42 @@ function focus_menu_item(index) {
   focused_index = index;
   let element = menu_items[focused_index];
   element.focus();
-  if (submenus && submenus.length && submenus[focused_index]) {
-    let rect = element.getBoundingClientRect();
-    let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-    let _x = rect.right;
-    let _y = rect.top;
-    let submenu_width = min_width_px;
-    let rendered_rect = submenus[focused_index].get_rendered_rect();
-    if (rendered_rect && rendered_rect.width > 0)
-      submenu_width = rendered_rect.width;
-    if (_x + submenu_width > container_rect.right) {
-      if (rect.left - container_rect.left > container_rect.right - rect.right)
-        _x = rect.left - submenu_width;
+  if (submenus && submenus.length) {
+    if (submenus[focused_index]) {
+      let rect = element.getBoundingClientRect();
+      let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+      let _x = rect.right;
+      let _y = rect.top;
+      let submenu_width = min_width_px;
+      let rendered_rect = submenus[focused_index].get_rendered_rect();
+      if (rendered_rect && rendered_rect.width > 0)
+        submenu_width = rendered_rect.width;
+      if (_x + submenu_width > container_rect.right) {
+        if (rect.left - container_rect.left > container_rect.right - rect.right)
+          _x = rect.left - submenu_width;
+      }
+      submenus[focused_index].show(new DOMPoint(_x, _y), operations[focused_index].menu);
+    }
+    for (let i = 0; i < submenus.length; i++) {
+      if (i != focused_index) {
+        if (submenus[i])
+          submenus[i].hide();
+      }
     }
-    submenus[focused_index].show(_x, _y, operations[focused_index].menu);
   }
 }
 function hide_submenu() {
   if (!owner_menu_item)
     return;
   owner_menu_item.focus();
+  hide();
 }
 </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] w-max" 
+    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-30 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}>
+    bind:this={menu_root}>
 
     {#each operations as operation, index}
         {@const is_separator = operation.separator}

package/components/contextmenu.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        width_px?: 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;
-        hide?: (() => void) | undefined;
-        get_rendered_rect?: (() => 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 is_visible(): () => boolean;
-    get hide(): () => void;
-    get get_rendered_rect(): () => DOMRect | undefined;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width_px?: 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;
+        hide?: (() => void) | undefined;
+        get_rendered_rect?: (() => 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 is_visible(): () => boolean;
+    get hide(): () => void;
+    get get_rendered_rect(): () => DOMRect | undefined;
+}
+export {};

package/components/date.svelte.d.ts

@@ -1,30 +1,30 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        date?: Date | undefined;
-        on_select?: undefined;
-        type?: string | undefined;
-        changed?: undefined;
-        s?: string | undefined;
-        c?: string | undefined;
-        compact?: boolean | undefined;
-        in_context?: string | undefined;
-        show?: ((event: any, hide_callback: any) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DateProps = typeof __propDef.props;
-export type DateEvents = typeof __propDef.events;
-export type DateSlots = typeof __propDef.slots;
-export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
-    get show(): (event: any, hide_callback: any) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        date?: Date | undefined;
+        on_select?: undefined;
+        type?: string | undefined;
+        changed?: undefined;
+        s?: string | undefined;
+        c?: string | undefined;
+        compact?: boolean | undefined;
+        in_context?: string | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateProps = typeof __propDef.props;
+export type DateEvents = typeof __propDef.events;
+export type DateSlots = typeof __propDef.slots;
+export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+}
+export {};

package/components/delayed.spinner.svelte.d.ts

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: string | undefined;
-        size?: number | undefined;
-        delay?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DelayedProps = typeof __propDef.props;
-export type DelayedEvents = typeof __propDef.events;
-export type DelayedSlots = typeof __propDef.slots;
-export default class Delayed extends SvelteComponentTyped<DelayedProps, DelayedEvents, DelayedSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        size?: number | undefined;
+        delay?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DelayedProps = typeof __propDef.props;
+export type DelayedEvents = typeof __propDef.events;
+export type DelayedSlots = typeof __propDef.slots;
+export default class Delayed extends SvelteComponentTyped<DelayedProps, DelayedEvents, DelayedSlots> {
+}
+export {};

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

@@ -1,9 +1,9 @@
-export declare class Document_command {
-    caption: string;
-    description: string;
-    tags?: string;
-    shortcut?: string;
-    icon: any;
-    icon_size?: number;
-    on_choice: any;
-}
+export declare class Document_command {
+    caption: string;
+    description: string;
+    tags?: string;
+    shortcut?: string;
+    icon: any;
+    icon_size?: number;
+    on_choice: any;
+}

package/components/document/internal/Document_command.js

@@ -1,9 +1,9 @@
-export class Document_command {
-    caption;
-    description;
-    tags;
-    shortcut;
-    icon;
-    icon_size = 6;
-    on_choice;
-}
+export class Document_command {
+    caption;
+    description;
+    tags;
+    shortcut;
+    icon;
+    icon_size = 6;
+    on_choice;
+}

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

@@ -1,7 +1,7 @@
-import { Selection_range } from "./Selection_range";
-export declare class Selection_helper {
-    private static nodewalk;
-    static create_cursor_range(elem: HTMLElement, nrOfChars: number): [Range, Node];
-    static create_range(elem: HTMLElement, start: number, end: number): Range;
-    static get_selection(elem: HTMLElement): Selection_range;
-}
+import { Selection_range } from "./Selection_range";
+export declare class Selection_helper {
+    private static nodewalk;
+    static create_cursor_range(elem: HTMLElement, nrOfChars: number): [Range, Node];
+    static create_range(elem: HTMLElement, start: number, end: number): Range;
+    static get_selection(elem: HTMLElement): Selection_range;
+}