@humandialog/forms.svelte 1.7.28 → 1.8.1

package/components/contextmenu-25.svelte

@@ -0,0 +1,518 @@
+<script>import { afterUpdate, tick } from "svelte";
+import Icon from "./icon.svelte";
+import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../stores";
+import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
+import {
+  hideWholeContextMenu,
+  showMenu,
+  showFloatingToolbar,
+  showGridMenu,
+  SHOW_MENU_BELOW,
+  SHOW_MENU_ABOVE,
+  SHOW_MENU_RIGHT,
+  SHOW_MENU_LEFT
+} from "./menu";
+import { FaTimes } from "svelte-icons/fa";
+import { usePreventScroll } from "./react-aria/preventScroll";
+export let widthPx = 400;
+export let menu_items_id_prefix = "__hd_svelte_menuitem_";
+export let owner_menu_item = void 0;
+let x = 0;
+let y = 0;
+let visible = false;
+let menu_root;
+let operations = [];
+let min_width_px = 200;
+let focused_index = 0;
+let menu_items = [];
+let submenus = [];
+let around_rect;
+let around_preference = 0;
+let css_position = "display: none";
+let closeButtonPos = "";
+$:
+  display = visible ? "block" : "none";
+function calculatePosition(x2, y2, 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;
+      }
+    }
+    let maxHeight;
+    if (myRect) {
+      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; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+    closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
+  } 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);
+      if (around_rect) {
+        const menuWidth = myRect.width;
+        const menuHeight = myRect.height;
+        let topArea;
+        let bottomArea;
+        let leftArea;
+        let rightArea;
+        switch (around_preference) {
+          case SHOW_MENU_BELOW:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_ABOVE:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            else if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_RIGHT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
+          case SHOW_MENU_LEFT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            else if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
+        }
+      } else {
+        if (myRect.right > screenRect.right)
+          x2 = screenRect.right - myRect.width + m;
+        if (myRect.bottom > screenRect.bottom)
+          y2 = screenRect.bottom - myRect.height;
+        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; min-width: 15rem`;
+    closeButtonPos = "";
+  }
+  return result;
+}
+function intersects(lpRect1, lpRect2) {
+  const left = Math.max(lpRect1.left, lpRect2.left);
+  const right = Math.min(lpRect1.right, lpRect2.right);
+  const top = Math.max(lpRect1.top, lpRect2.top);
+  const bottom = Math.min(lpRect1.bottom, lpRect2.bottom);
+  return left <= right && top <= bottom;
+}
+let preventScrollRestorer = null;
+export async function show(around, _operations, preference = 0) {
+  if (around instanceof DOMRect) {
+    switch (preference) {
+      case SHOW_MENU_BELOW:
+        x = around.left;
+        y = around.bottom;
+        break;
+      case SHOW_MENU_ABOVE:
+        x = around.left;
+        y = around.top;
+        break;
+      case SHOW_MENU_RIGHT:
+        x = around.right;
+        y = around.top;
+        break;
+      case SHOW_MENU_LEFT:
+        x = around.left;
+        y = around.top;
+        break;
+    }
+    around_preference = preference;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
+  visible = true;
+  css_position = calculatePosition(x, y, true, true);
+  operations = [..._operations];
+  focused_index = operations.findIndex((o) => !o.disabled);
+  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);
+    if (isDeviceSmallerThan("sm"))
+      preventScrollRestorer = usePreventScroll();
+  }
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
+  }
+  await tick();
+  css_position = calculatePosition(x, y, true, false);
+  if (is_root_menu)
+    menu_root.addEventListener("click", on_before_container_click, true);
+  if (menu_items.length && !isDeviceSmallerThan("sm"))
+    focus_menu_item(focused_index);
+}
+export function isVisible() {
+  return visible;
+}
+export function hide() {
+  if (visible) {
+    $fabHiddenDueToPopup = false;
+  }
+  visible = false;
+  css_position = calculatePosition(x, y, false, false);
+  window.removeEventListener("click", on_before_window_click, true);
+  menu_root?.removeEventListener("click", on_before_container_click, true);
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
+}
+export function getRenderedRect() {
+  if (menu_root)
+    return menu_root.getBoundingClientRect();
+  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":
+      hideWholeContextMenu();
+      break;
+    case "ArrowDown":
+      navigate_down();
+      break;
+    case "ArrowUp":
+      navigate_up();
+      break;
+    case "ArrowLeft":
+      hide_submenu();
+      break;
+    case "Enter":
+      execute_action(void 0, operation, index);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+  }
+}
+function navigate_up() {
+  let index = get_this_or_prev_valid_index(focused_index - 1);
+  focus_menu_item(index);
+}
+function navigate_down() {
+  let index = get_this_or_next_valid_index(focused_index + 1);
+  focus_menu_item(index);
+}
+function on_change_focus(e) {
+  if (!isDeviceSmallerThan("sm")) {
+    if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
+      return;
+    else
+      hide();
+  }
+}
+function on_mouse_move(index) {
+  if (!isDeviceSmallerThan("sm"))
+    focus_menu_item(index);
+}
+function execute_action(e, operation, index) {
+  const mobile = isDeviceSmallerThan("sm");
+  if (operation.menu && !mobile) {
+    focus_menu_item(index);
+    return;
+  }
+  hideWholeContextMenu();
+  if (!operation)
+    return;
+  let owner = e?.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
+  if (operation.action) {
+    operation.action(owner, around_rect);
+  } else {
+    let rect;
+    if (around_rect)
+      rect = around_rect;
+    else
+      rect = owner.getBoundingClientRect();
+    if (operation.toolbar)
+      showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
+    else if (operation.grid) {
+      if (false)
+        showMenu(rect, operation.grid);
+      else
+        showGridMenu(rect, operation.grid, operation.caption ?? "");
+    } else if (operation.menu) {
+      showMenu(rect, operation.menu);
+    }
+  }
+}
+function get_this_or_next_valid_index(index) {
+  if (!operations)
+    return 0;
+  if (operations.length == 0)
+    return 0;
+  if (index >= operations.length)
+    return operations.length - 1;
+  if (index < 0)
+    return 0;
+  const op = operations[index];
+  if (op.separator || op.disabled)
+    return get_this_or_next_valid_index(index + 1);
+  else
+    return index;
+}
+function get_this_or_prev_valid_index(index) {
+  if (!operations)
+    return 0;
+  if (operations.length == 0)
+    return 0;
+  if (index >= operations.length)
+    return operations.length - 1;
+  if (index < 0)
+    return 0;
+  const op = operations[index];
+  if (op.separator || op.disabled)
+    return get_this_or_prev_valid_index(index - 1);
+  else
+    return index;
+}
+function focus_menu_item(index) {
+  const operation = operations[index];
+  if (operation.disabled)
+    return;
+  focused_index = get_this_or_next_valid_index(index);
+  let element = menu_items[focused_index];
+  element.focus();
+  if (submenus && submenus.length) {
+    if (submenus[focused_index]) {
+      let rect = element.getBoundingClientRect();
+      submenus[focused_index].show(rect, operations[focused_index].menu, SHOW_MENU_RIGHT);
+    }
+    for (let i = 0; i < submenus.length; i++) {
+      if (i != focused_index) {
+        if (submenus[i])
+          submenus[i].hide();
+      }
+    }
+  }
+}
+function hide_submenu() {
+  if (!owner_menu_item)
+    return;
+  owner_menu_item.focus();
+  hide();
+}
+function mousedown(e) {
+  e.preventDefault();
+}
+function calculateBackground(is_highlighted, active) {
+  if (is_highlighted) {
+    if (active)
+      return "bg-stone-400/40 dark:bg-stone-400/40";
+    else
+      return "bg-stone-400/30 dark:bg-stone-400/30";
+  } else {
+    if (active)
+      return "bg-stone-400/20 dark:bg-stone-400/20";
+    else
+      return "";
+  }
+}
+function isOperationActivated(operation) {
+  if (operation.activeFunc)
+    return operation.activeFunc();
+  else
+    return operation.active ?? false;
+}
+function isOperationDisabled(operation) {
+  if (operation.disabledFunc)
+    return operation.disabledFunc();
+  else
+    return operation.disabled ?? false;
+}
+</script>
+
+
+<div id="__hd_svelte_contextmenu"
+    class="
+            bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed
+            sm:shadow-xl sm:shadow-slate-700/10
+            sm:dark:shadow-black/80
+            sm:outline sm:outline-1 sm:outline-stone-500
+            z-40 fixed min-w-60 max-h-screen overflow-y-auto overscroll-contain"
+
+    style={css_position}
+    visible={visible}
+    bind:this={menu_root}>
+    <div class="
+                paper w-full sm:w-[24rem]
+                prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+                sm:max-w-3xl
+                m-0 pt-3 pb-5 px-4
+                sm:rounded
+                sm:bg-stone-100 sm:dark:bg-stone-900
+                flex flex-col
+                ">
+
+
+    {#if closeButtonPos}
+        <button class="     fixed w-6 h-6 flex items-center justify-center
+                            focus:outline-none font-medium text-sm text-center"
+                style={closeButtonPos}
+                on:click={ hide }> <!--focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-full  text-stone-500 bg-stone-200/70 hover:bg-stone-200  dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 -->
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
+    {#each operations as operation, index}
+        {@const is_separator = operation.separator}
+        {#if is_separator}
+            {#if index>0 && index < operations.length-1}
+                <hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700">
+            {/if}
+        {:else}
+            {@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 isTop = index==0}
+            {@const isBottom = index == operations.length-1}
+            {@const isFocused = index == focused_index}
+            {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
+            {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
+            {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
+
+            <button class="block w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none items-center"
+                    id={menu_item_id}
+                    bind:this={menu_items[index]}
+                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
+                    on:mouseenter = {(e) => {on_mouse_move(index)}}
+                    on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
+                    on:mousedown={mousedown}
+                    disabled={isOperationDisabled(operation)}
+                    class:opacity-60={isOperationDisabled(operation)}>
+
+                <div class="flex  justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
+                    {#if operation.icon}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
+                        <Icon s="md" component={operation.icon}/>
+                    {:else if operation.img}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
+                        <div class="w-4 h-4">
+                            <img src={operation.img} alt=""/>
+                        </div>
+                    {:else}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
+                        <div class="w-4 h-4"></div>
+                    {/if}
+                </div>
+                <div class="">
+                        <p class=""> {operation.caption}</p>
+                    {#if operation.description}
+                         <p  class="truncate inline-block text-xs">
+                            {operation.description}
+                        </p>
+                    {/if}
+                </div>
+                {#if has_submenu}
+                    <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>
+        {/if}
+    {/each}
+    </div>
+    </div>
+
+<!-- use usePreventScroll instead -->
+<!--style>
+    :global(#__hd_svelte_layout_root:has(#__hd_svelte_contextmenu[visible="true"]))
+    {
+        overflow: hidden;
+        position: fixed;
+    }
+</style-->

package/components/contextmenu-25.svelte.d.ts

@@ -0,0 +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, preference?: number) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+        getRenderedRect?: (() => DOMRect | undefined) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type Contextmenu_25Props = typeof __propDef.props;
+export type Contextmenu_25Events = typeof __propDef.events;
+export type Contextmenu_25Slots = typeof __propDef.slots;
+export default class Contextmenu_25 extends SvelteComponentTyped<Contextmenu_25Props, Contextmenu_25Events, Contextmenu_25Slots> {
+    get show(): (around: DOMRect | DOMPoint, _operations: any, preference?: number) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+    get getRenderedRect(): () => DOMRect | undefined;
+}
+export {};