@humandialog/forms.svelte 1.3.11 → 1.3.12

package/components/Fab.svelte

@@ -11,17 +11,26 @@ let toolboxOperations = [];
 let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
-let isMain = false;
+let isDirectPositioningMode = false;
 function update(...args) {
-  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+  isDirectPositioningMode = false;
+  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 +55,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 +108,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-10"
+                                        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 +210,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 +223,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 +310,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.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>>;

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 {};