@humandialog/forms.svelte 0.4.36 → 0.4.38

package/components/Fab.svelte

@@ -1,4 +1,7 @@
 <script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
+import { show_floating_toolbar, show_menu, show_grid_menu } from "./menu.js";
+import FaChevronUp from "svelte-icons/fa/FaChevronUp.svelte";
+import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
 let expanded = false;
 $:
   update($page_toolbar_operations, $context_toolbar_operations);
@@ -9,16 +12,32 @@ function update(...args) {
   else
     operations = $page_toolbar_operations;
 }
-function on_click(operation) {
-  expanded = false;
+function on_click(e, operation) {
   if (!operation)
     return;
-  if (!operation.action)
+  if (operation.action) {
+    let focused_item = null;
+    if ($context_items_store.focused)
+      focused_item = $context_items_store[$context_items_store.focused];
+    operation.action(focused_item);
+  }
+  let owner = e.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (!owner)
     return;
-  let focused_item = null;
-  if ($context_items_store.focused)
-    focused_item = $context_items_store[$context_items_store.focused];
-  operation.action(focused_item);
+  let rect = owner.getBoundingClientRect();
+  const margin = 15;
+  rect.x -= margin;
+  rect.y -= margin;
+  rect.width += 2 * margin;
+  rect.height += 2 * margin;
+  if (operation.menu)
+    show_menu(rect, operation.menu);
+  else if (operation.toolbar)
+    show_floating_toolbar(rect, operation.toolbar);
+  else if (operation.grid)
+    show_grid_menu(rect, operation.grid);
 }
 function toggle_expand(e) {
   expanded = !expanded;
@@ -26,57 +45,112 @@ function toggle_expand(e) {
 </script>
 
 {#if operations && operations.length > 0}
-    
-        {#if operations.length == 1}
-            {@const operation = operations[0]}
-            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+        
+    {@const main_operation = operations[0]}
+    <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]
+                    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)}} >
+        <div class="w-7 h-7"><svelte:component this={main_operation.icon}/></div>
+    </button>
+
+    {#if operations.length > 1}
+        {@const secondary_operation = operations[1]}
+        <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)}} >
+            <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
-                            mr-2 mb-2 w-10 h-10 
-                            dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                            flex items-center justify-center"
-                            on:click|stopPropagation={(e) => {on_click(operation)}} >
-                <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-            </button>
-        {:else}
-            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+                            flex items-center justify-center">
+                <div class="w-5 h-5">
+                    <svelte:component this={secondary_operation.icon}/>
+                </div>
+            </div>
+        </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)}} >
+                <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
-                            mr-2 mb-2 w-10 h-10 
-                            dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                            flex items-center justify-center"
+                            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}>
+                <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">
-                        <svg    xmlns="http://www.w3.org/2000/svg" 
-                                viewBox="0 0 192 512" 
-                                style=" stroke: currentColor;
-                                        fill: currentColor;
-                                        stroke-width: 0;
-                                        width: 100%;
-                                        height: auto;
-                                        max-height: 100%;">
-                            <path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" />
-                        </svg>
+                        {#if expanded}
+                            <FaChevronDown/>
+                        {:else}
+                            <FaChevronUp/>
+                        {/if}
                     </div>
+                </div>
             </button>
             {#if expanded}
-                <ul class="list-none m-0 absolute bottom-[60px] right-0">
-                    {#each operations as operation}
+                {@const operations_to_expand = operations.slice(2)}
+                <ul class="list-none m-0 absolute bottom-[125px] right-0">
+                    {#each operations_to_expand as operation}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="flex flex-row px-1 py-0 justify-end group"
-                            on:click|stopPropagation={(e) => {on_click(operation)}}>
+                        <li class="flex flex-row px-0 py-0 justify-end group"
+                            on:click|stopPropagation={(e) => {on_click(e, operation)}}>
                             <div>
-                                <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
+                                <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
                             </div>
-                            <button class=" text-white bg-blue-700 group-hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
-                                            font-medium rounded-full text-sm text-center shadow-md
-                                            mr-1 mb-2 w-10 h-10 
-                                            dark:bg-blue-600 dark:group-hover:bg-blue-700 dark:focus:ring-blue-800
-                                            flex items-center justify-center">
-                                <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                            <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]
+                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                dark:bg-zinc-500 dark:group-hover:bg-blue-700
+                                                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>
                     {/each}
                 </ul>
             {/if}
         {/if}
+    {/if} 
 {/if}
 
+<style>
+
+.disable-dbl-tap-zoom {
+  touch-action: manipulation;
+}
+</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

@@ -1,5 +1,4 @@
 <script>import { tick, afterUpdate } from "svelte";
-import { is_device_smaller_than } from "../utils";
 let x;
 let y;
 let visible = false;
@@ -7,7 +6,6 @@ let toolbar;
 let props = {};
 let around_rect;
 let root_element;
-let invisible_button;
 $:
   display = visible ? "fixed" : "hidden";
 export async function show(around, _toolbar, _props = {}) {
@@ -20,20 +18,39 @@ export async function show(around, _toolbar, _props = {}) {
     y = around.y;
     around_rect = new DOMRect(x, y, 0, 0);
   }
+  const was_visible = visible;
   visible = true;
   toolbar = _toolbar;
   props = _props;
   props.onhide = () => {
     hide();
   };
+  hide_window_indicator = 0;
+  window.addEventListener("click", on_before_window_click, true);
   await tick();
-  focus_first_element();
+  if (!was_visible)
+    root_element.addEventListener("click", on_before_container_click, true);
 }
 export function is_visible() {
   return visible;
 }
 export function hide() {
   visible = false;
+  window.removeEventListener("click", on_before_window_click, true);
+  root_element.removeEventListener("click", on_before_container_click, true);
+}
+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--;
 }
 afterUpdate(() => {
   if (!root_element)
@@ -51,28 +68,12 @@ afterUpdate(() => {
   if (rect.top < container_rect.top)
     y = container_rect.top;
 });
-function focus_first_element() {
-  invisible_button.focus();
-  return;
-  let focusable = root_element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-  focusable.focus();
-}
-function on_focus_out(e) {
-  if (!is_device_smaller_than("sm")) {
-    if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
-    } else
-      hide();
-  } else {
-  }
-}
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display}"
+        class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display} z-30"
         style="left:{x}px; top:{y}px; width: max-content; height:max-content"
-        on:focusout={on_focus_out}
         bind:this={root_element}>
-    <button class="w-0 h-0 fixed bg-transparent " bind:this={invisible_button}></button>
     <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;
-        is_visible?: (() => 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 is_visible(): () => boolean;
-    get hide(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
+        is_visible?: (() => 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 is_visible(): () => 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,25 +1,25 @@
-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;
-    };
-    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;
+    };
+    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;
-    on_collect: 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;
+    on_collect: 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;
-    on_collect = 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;
+    on_collect = undefined;
+    element_key;
+    element_name;
+    element_avatar;
+}
+export const cached_sources = new Map();