@humandialog/forms.svelte 1.3.11 → 1.3.13

package/components/Fab.svelte

@@ -1,9 +1,9 @@
 <script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
 $:
-  update($pageToolbarOperations, $contextToolbarOperations);
+  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -11,17 +11,32 @@ let toolboxOperations = [];
 let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
-let isMain = false;
-function update(...args) {
-  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+let isDirectPositioningMode = false;
+function setupCurrentContextOperations(...args) {
+  isDirectPositioningMode = false;
+  if ($toolsActionsOperations && Array.isArray($toolsActionsOperations) && toolsActionsOperations.length > 0) {
+    operations = $toolsActionsOperations;
+  } else if ($toolsActionsOperations && $toolsActionsOperations.operations && $toolsActionsOperations.operations.length > 0) {
+    operations = $toolsActionsOperations.operations;
+    if ($toolsActionsOperations.opver && $toolsActionsOperations.opver == 1)
+      isDirectPositioningMode = true;
+  } else if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
-  else
-    operations = $pageToolbarOperations;
-  if (operations && operations.length > 0 && operations[0].main) {
-    isMain = true;
+  } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
+    operations = $contextToolbarOperations.operations;
+    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
+      isDirectPositioningMode = true;
   } else {
-    isMain = false;
+    if (Array.isArray($pageToolbarOperations))
+      operations = $pageToolbarOperations;
+    else {
+      operations = $pageToolbarOperations.operations;
+      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
+        isDirectPositioningMode = true;
+    }
   }
+  if (isDirectPositioningMode)
+    return;
   if (operations.length > 0)
     mainOperation = operations[0];
   else
@@ -46,7 +61,6 @@ export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
     return;
-  console.log("activateMainOperation");
   mainOperationButton.click();
 }
 function on_click(e, operation) {
@@ -100,33 +114,97 @@ function getSelectionPos() {
     return 0;
 }
 function calculatePosition(operation) {
-  let right = 0;
-  let result = `bottom: 10px; right:${right}px`;
+  const isLeftHanded = false;
+  let result = "";
+  const fab = operation.fab;
+  if (fab.length != 3)
+    return "";
+  const section = fab[0];
+  const col_no = parseInt(fab[1]);
+  const row_no = parseInt(fab[2]);
+  if (col_no == NaN || row_no == NaN)
+    return "";
+  const width = 55;
+  const height = 55;
+  const margin = 10;
+  if (!isLeftHanded) {
+    switch (section) {
+      case "M":
+        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "S":
+        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "A":
+        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "C":
+        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "T":
+        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+      case "F":
+        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+    }
+  } else {
+    switch (section) {
+      case "M":
+        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "S":
+        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        break;
+      case "A":
+        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "C":
+        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        break;
+      case "T":
+        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+      case "F":
+        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        break;
+    }
+  }
   return result;
 }
 function operationVisible(operation) {
-  return false;
+  if (!operation.fab)
+    return false;
+  return true;
 }
 </script>
 
-{#if isMain}
+{#if isDirectPositioningMode}
     {#if operations && operations.length > 0}
-        {#each operations as operation, idx}
-            {#if operationVisible(operation)}
-            <button  
-                    class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                        font-medium rounded-full text-sm text-center shadow-md
-                        w-[55px] h-[55px] 
-                        fixed m-0 absolute bottom-0
-                        dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                        flex items-center justify-center
-                        disable-dbl-tap-zoom"
-                        style={calculatePosition(operation)}
-                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
-                        on:mousedown={mousedown} >
-            <div class="w-7 h-7"><svelte:component this={operation.icon}/></div>
-        </button>
-        {/if}
+        {#each operations as group}
+            {#if group.operations && group.operations.length > 0}
+                {#each group.operations as operation}
+                    {#if operationVisible(operation)}
+                        {@const position = calculatePosition(operation)}
+                        {#if position}
+                            <button  
+                                class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+                                        font-medium rounded-full text-sm text-center shadow-md
+                                        w-[35px] h-[35px] 
+                                        fixed m-0  
+                                        dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                        flex items-center justify-center
+                                        disable-dbl-tap-zoom
+                                        cursor-pointer z-40"
+                                        style={position}
+                                        on:click|stopPropagation={(e) => {on_click(e, operation)}} 
+                                        on:mousedown={mousedown} >
+                            <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                            </button>
+                        {/if}
+                    {/if}
+                {/each} 
+            {/if}
         {/each}
     {/if}
 {:else}
@@ -138,7 +216,7 @@ function operationVisible(operation) {
                     class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
                         font-medium rounded-full text-sm text-center shadow-md
                         w-[55px] h-[55px] 
-                        fixed m-0 absolute bottom-0 right-[0px]
+                        fixed m-0 bottom-0 right-[0px]
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                         flex items-center justify-center
                         disable-dbl-tap-zoom"
@@ -151,7 +229,7 @@ function operationVisible(operation) {
         {#if secondaryOperation || isExpandable}
             
             <!-- horizontal container -->
-            <div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
+            <div class="flex flex-row m-0 fixed bottom-[10px] right-[60px]">
             
                 {#if isExpandable}
                     <!-- Expander -->
@@ -238,7 +316,7 @@ function operationVisible(operation) {
 
         {#if operations.length > 2} <!-- has vertical operations -->
             <!-- vertical tools container  -->
-            <ul class="list-none m-0 absolute bottom-[70px] right-0">
+            <ul class="list-none m-0 fixed bottom-[70px] right-0">
                 {#if (isExpandable && vToolboxExpanded) || !isExpandable}
                     {@const verticalOperations = operations.slice(2).reverse()}
                     {#each verticalOperations as operation}

package/components/Fab.svelte.d.ts

@@ -1,17 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        activateMainOperation?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FabProps = typeof __propDef.props;
-export type FabEvents = typeof __propDef.events;
-export type FabSlots = typeof __propDef.slots;
-export default class Fab extends SvelteComponentTyped<FabProps, FabEvents, FabSlots> {
-    get activateMainOperation(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        activateMainOperation?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FabProps = typeof __propDef.props;
+export type FabEvents = typeof __propDef.events;
+export type FabSlots = typeof __propDef.slots;
+export default class Fab extends SvelteComponentTyped<FabProps, FabEvents, FabSlots> {
+    get activateMainOperation(): () => void;
+}
+export {};

package/components/Floating_container.svelte

@@ -1,4 +1,7 @@
 <script>import { tick, afterUpdate } from "svelte";
+import { isDeviceSmallerThan } from "../utils";
+import { toolsActionsOperations } from "../stores";
+import { FaTimes } from "svelte-icons/fa";
 let x;
 let y;
 let visible = false;
@@ -6,8 +9,6 @@ let toolbar;
 let props = {};
 let around_rect;
 let root_element;
-$:
-  display = visible ? "fixed" : "hidden";
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -22,20 +23,44 @@ export async function show(around, _toolbar, _props = {}) {
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
   props.onHide = () => {
     hide();
   };
   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();
   if (!was_visible)
     root_element.addEventListener("click", on_before_container_click, true);
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
   return visible;
 }
 export function hide() {
   visible = false;
+  cssPosition = calculatePosition(x, y, around_rect, false, false);
+  $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
   root_element.removeEventListener("click", on_before_container_click, true);
 }
@@ -52,28 +77,68 @@ function on_before_window_click() {
 function on_before_container_click() {
   hide_window_indicator--;
 }
-afterUpdate(() => {
-  if (!root_element)
-    return;
-  let rect = root_element.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  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)
-    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;
-});
+let cssPosition = "";
+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 = root_element.getBoundingClientRect();
+      if (myRect && 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 = root_element.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    const m = 15;
+    let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+    if (myRect) {
+      if (myRect.right > screenRect.right)
+        x2 = screenRect.right - myRect.width;
+      if (myRect.bottom > screenRect.bottom)
+        y2 = screenRect.bottom - myRect.height - around_rect.height;
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+  }
+  console.log(result);
+  return result;
+}
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow {display} z-30"
-        style="left:{x}px; top:{y}px; width: max-content; height:max-content"
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow  z-30 fixed"
+        style={cssPosition}
         bind:this={root_element}>
     <svelte:component this={toolbar} {...props} />
 </div>

package/components/Floating_container.svelte.d.ts

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

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

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

package/components/button.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        self?: null | undefined;
-        operation?: string | undefined;
-        params?: null | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        action?: null | undefined;
-        hiddenFunc?: undefined;
-        disabledFunc?: undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        self?: null | undefined;
+        operation?: string | undefined;
+        params?: null | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        action?: null | undefined;
+        hiddenFunc?: undefined;
+        disabledFunc?: undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/checkbox.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        c?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/components/combo/combo.d.ts

@@ -1,19 +1,19 @@
-export declare class rCombo_item {
-    Key: any | undefined;
-    Name: string | undefined;
-    Avatar: string | undefined;
-    Color: string | undefined;
-    Icon: any | undefined;
-}
-export declare class rCombo_definition {
-    source: rCombo_item[];
-    collection_expr: string | undefined;
-    collection_path: string | undefined;
-    collection: object[] | undefined;
-    onCollect: undefined;
-    element_key: string | undefined;
-    element_name: string | undefined;
-    element_avatar: string | undefined;
-    element_icon: string | undefined;
-}
-export declare const cached_sources: Map<string, Promise<object>>;
+export declare class rCombo_item {
+    Key: any | undefined;
+    Name: string | undefined;
+    Avatar: string | undefined;
+    Color: string | undefined;
+    Icon: any | undefined;
+}
+export declare class rCombo_definition {
+    source: rCombo_item[];
+    collection_expr: string | undefined;
+    collection_path: string | undefined;
+    collection: object[] | undefined;
+    onCollect: undefined;
+    element_key: string | undefined;
+    element_name: string | undefined;
+    element_avatar: string | undefined;
+    element_icon: string | undefined;
+}
+export declare const cached_sources: Map<string, Promise<object>>;