@humandialog/forms.svelte 0.5.8 → 0.5.10

package/components/Fab.svelte

@@ -1,16 +1,39 @@
 <script>import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
-import FaChevronUp from "svelte-icons/fa/FaChevronUp.svelte";
-import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
-let expanded = false;
+import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
 $:
   update($pageToolbarOperations, $contextToolbarOperations);
 let operations = [];
+let mainOperation = null;
+let secondaryOperation = null;
+let toolboxOperations = [];
+let isExpandable = false;
+let vToolboxExpanded = false;
+let hToolboxExpanded = false;
 function update(...args) {
   if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
     operations = $contextToolbarOperations;
   else
     operations = $pageToolbarOperations;
+  if (operations.length > 0)
+    mainOperation = operations[0];
+  else
+    mainOperation = null;
+  secondaryOperation = null;
+  toolboxOperations = [];
+  if (operations.length > 1) {
+    const operation = operations[1];
+    if (!operation.separator) {
+      if (!operation.toolbox)
+        secondaryOperation = operation;
+      else
+        toolboxOperations = operation.toolbox;
+    }
+  }
+  if (operations.length == 3 && secondaryOperation != null || operations.length > 3 || toolboxOperations.length > 0)
+    isExpandable = true;
+  else
+    isExpandable = false;
 }
 function on_click(e, operation) {
   if (!operation)
@@ -22,7 +45,7 @@ function on_click(e, operation) {
     operation.action(focused_item);
   }
   let owner = e.target;
-  while (owner && owner.tagName != "BUTTON")
+  while (owner && (owner.tagName != "BUTTON" && owner.tagName != "LI"))
     owner = owner.parentElement;
   if (!owner)
     return;
@@ -39,113 +62,104 @@ function on_click(e, operation) {
   else if (operation.grid)
     showMenu(rect, operation.grid);
 }
-function toggle_expand(e) {
-  expanded = !expanded;
+function toggleExpandToolboxV(e) {
+  vToolboxExpanded = !vToolboxExpanded;
+  hToolboxExpanded = vToolboxExpanded;
+}
+function toggleExpandToolboxH(e) {
+  hToolboxExpanded = !hToolboxExpanded;
+  vToolboxExpanded = hToolboxExpanded;
 }
 function mousedown(e) {
   e.preventDefault();
 }
+function getSelectionPos() {
+  const selection = window.getSelection();
+  if (selection?.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    let rect;
+    rect = range.getBoundingClientRect();
+    let result = window.innerHeight - rect.top;
+    result = Math.floor(result);
+    console.log("selection box", result);
+    return result;
+  } else
+    return 0;
+}
 </script>
 
 {#if operations && operations.length > 0}
-        
-    {@const main_operation = operations[0]}
+    {@const topPosition = 350}
+    {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
     <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-[10px] right-[0px]
+                    fixed m-0 absolute 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"
-                    on:click|stopPropagation={(e) => {on_click(e, main_operation)}} 
+                    style={verticalPosition}
+                    on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
                     on:mousedown={mousedown} >
-        <div class="w-7 h-7"><svelte:component this={main_operation.icon}/></div>
+        <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
     </button>
 
-    {#if operations.length > 1}
-        {@const secondary_operation = operations[1]}
-        {#if !secondary_operation.separator}
-            <button class=" bg-transparent 
-                            w-[55px] h-[55px] 
-                            fixed m-0 absolute bottom-[10px] right-[60px]
-                            flex items-center justify-center
-                            disable-dbl-tap-zoom"
-                            on:click|stopPropagation={(e) => {on_click(e, secondary_operation)}} 
-                            on:mousedown={mousedown} >
-                <div class="    w-10 h-10 
-                                text-white bg-zinc-500 hover:bg-zinc-500
-                                dark:bg-zinc-500 dark:hover:bg-zinc-500
-                                font-medium rounded-full text-sm text-center shadow-md
-                                flex items-center justify-center">
-                    <div class="w-5 h-5">
-                        <svelte:component this={secondary_operation.icon}/>
+    {#if secondaryOperation || isExpandable}
+        
+        <!-- horizontal container -->
+        <div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
+        
+            {#if isExpandable}
+                <!-- Expander -->
+                <button class=" bg-transparent mr-2
+                                w-[55px] h-[55px] 
+                                flex items-center justify-center
+                                disable-dbl-tap-zoom"
+                                on:click|stopPropagation={toggleExpandToolboxH}
+                                on:mousedown={mousedown}>
+                    <div class="    w-10 h-10
+                                    text-white bg-zinc-500 hover:bg-zinc-500 
+                                    font-medium rounded-full text-sm text-center shadow-md
+                                    dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                    flex items-center justify-center">
+                        <div class="w-2 h-2">
+                            {#if hToolboxExpanded}
+                                <FaCircle/>
+                            {:else}
+                                <FaCircle/>
+                            {/if}
+                        </div>
                     </div>
-                </div>
-            </button>
-        {/if}
+                </button>
 
-        {#if operations.length == 3}
-            {@const thrid_operation = operations[2]}
-            <button class=" bg-transparent
-                            w-[55px] h-[55px] 
-                            fixed m-0 absolute bottom-[70px] right-[0px]
-                            
-                            flex items-center justify-center
-                            disable-dbl-tap-zoom"
-                            on:click|stopPropagation={(e) => {on_click(e, thrid_operation)}} 
-                            on:mousedown={mousedown} >
-                <div class="    w-10 h-10
-                            text-white bg-zinc-500 hover:bg-zinc-500 
-                            font-medium rounded-full text-sm text-center shadow-md
-                            dark:bg-zinc-500 dark:hover:bg-zinc-500
-                            flex items-center justify-center">
-                    <div class="w-5 h-5">
-                        <svelte:component this={thrid_operation.icon}/>
-                    </div>
-                </div>
-            </button>
-        {:else if operations.length > 3}
-            <button class=" bg-transparent
-                            w-[55px] h-[55px] 
-                            fixed m-0 absolute bottom-[70px] right-[0px]
-                            
-                            flex items-center justify-center
-                            disable-dbl-tap-zoom"
-                            on:click|stopPropagation={toggle_expand}
-                            on:mousedown={mousedown}>
-                <div class="    w-10 h-10
-                                text-white bg-zinc-500 hover:bg-zinc-500 
-                                font-medium rounded-full text-sm text-center shadow-md
-                                dark:bg-zinc-500 dark:hover:bg-zinc-500
-                                flex items-center justify-center">
-                    <div class="w-5 h-5">
-                        {#if expanded}
-                            <FaChevronDown/>
-                        {:else}
-                            <FaChevronUp/>
-                        {/if}
-                    </div>
-                </div>
-            </button>
-            {#if expanded}
-                {@const operations_to_expand = operations.slice(2).reverse()}
-                <ul class="list-none m-0 absolute bottom-[125px] right-0">
-                    {#each operations_to_expand as operation}
-                        {#if !operation.separator}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <li class="flex flex-row px-0 py-0 justify-end group"
-                                on:click|stopPropagation={(e) => {on_click(e, operation)}}
-                                on:mousedown={mousedown}>
-                                {#if operation.caption}
-                                    <div>
-                                        <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
-                                    </div>
-                                {/if}
+                {#if hToolboxExpanded}
+                    {#if secondaryOperation}
+                        <button class="     bg-transparent
+                                            mx-0 mr-2 w-[55px] h-[55px] 
+                                            flex items-center justify-center
+                                            disable-dbl-tap-zoom"
+                                            on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
+                                            on:mousedown={mousedown}>
+                            <div class="    w-10 h-10
+                                            text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                            dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                            font-medium rounded-full text-sm text-center shadow-md
+                                            flex items-center justify-center">
+                                <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
+                            </div>
+                        </button>
+                    {:else if toolboxOperations.length > 0}
+                        {@const toolbox=toolboxOperations.reverse()}
+                        {#each toolbox as operation}
+                            {#if !operation.separator}
+                                <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <button class=" bg-transparent
-                                                mx-0 mb-4 w-[55px] h-[55px] 
-                                                flex items-center justify-center
-                                                disable-dbl-tap-zoom">
-                                    <div class="    w-[55px] h-[55px]
+                                                    mx-0 mr-2 w-[55px] h-[55px] 
+                                                    flex items-center justify-center
+                                                    disable-dbl-tap-zoom"
+                                                    on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                                                    on:mousedown={mousedown}>
+                                    <div class="    w-10 h-10
                                                     text-white bg-zinc-500 group-hover:bg-zinc-500 
                                                     dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                                     font-medium rounded-full text-sm text-center shadow-md
@@ -153,13 +167,66 @@ function mousedown(e) {
                                         <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
                                     </div>
                                 </button>
-                            </li>
-                        {/if}
-                    {/each}
-                </ul>
+                            {/if}
+                        {/each}
+
+                    {/if}
+                {/if}
+            {:else}
+                <button class=" bg-transparent
+                                mx-0 mr-2 w-[55px] h-[55px] 
+                                flex items-center justify-center
+                                disable-dbl-tap-zoom"
+                        on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
+                        on:mousedown={mousedown}>
+                    <div class="    w-10 h-10
+                                    text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                    dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                    font-medium rounded-full text-sm text-center shadow-md
+                                    flex items-center justify-center">
+                        <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
+                    </div>
+                </button>
             {/if}
-        {/if}
-    {/if} 
+
+        </div>
+    {/if}
+
+    {#if operations.length > 2} <!-- has vertical operations -->
+        <!-- vertical tools container  -->
+        <ul class="list-none m-0 absolute bottom-[70px] right-0">
+            {#if (isExpandable && vToolboxExpanded) || !isExpandable}
+                {@const verticalOperations = operations.slice(2).reverse()}
+                {#each verticalOperations as operation}
+                    {#if !operation.separator}
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <li class="flex flex-row px-0 py-0 justify-end group"
+                            on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                            on:mousedown={mousedown}>
+                            {#if operation.caption}
+                                <div>
+                                    <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
+                                </div>
+                            {/if}
+                            <button class=" bg-transparent
+                                            mx-0 mb-2 w-[55px] h-[55px] 
+                                            flex items-center justify-center
+                                            disable-dbl-tap-zoom">
+                                <div class="    w-10 h-10
+                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                                font-medium rounded-full text-sm text-center shadow-md
+                                                flex items-center justify-center">
+                                    <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                                </div>
+                            </button>
+                        </li>
+                    {/if}
+                {/each}
+            {/if}
+        </ul>
+    {/if}
+
 {/if}
 
 <style>

package/components/Fab.svelte.d.ts

@@ -1,14 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    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> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    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> {
+}
+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<{
+    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 {};

package/components/button.svelte.d.ts

@@ -1,24 +1,24 @@
-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;
-    };
-    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;
+    };
+    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,17 +1,17 @@
-export declare class rCombo_item {
-    Key: any | undefined;
-    Name: string | undefined;
-    Avatar: string | undefined;
-    Color: string | 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;
-}
-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;
+}
+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;
+}
+export declare const cached_sources: Map<string, Promise<object>>;

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

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        key?: any | undefined;
-        name?: string | undefined;
-        avatar?: string | undefined;
-        color?: 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: {
+        key?: any | undefined;
+        name?: string | undefined;
+        avatar?: string | undefined;
+        color?: 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.js

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