@humandialog/forms.svelte 0.4.6 → 0.4.7

package/components/Floating_container.svelte

@@ -0,0 +1,41 @@
+<script>import { tick } from "svelte";
+let x;
+let y;
+let visible = false;
+let toolbar;
+let root_element;
+let invisible_button;
+$:
+  display = visible ? "fixed" : "hidden";
+export async function show(_x, _y, _toolbar) {
+  x = _x;
+  y = _y;
+  visible = true;
+  toolbar = _toolbar;
+  await tick();
+  focus_first_element();
+}
+export function hide() {
+  visible = false;
+}
+function focus_first_element() {
+  invisible_button.focus();
+  return;
+  let focusable = root_element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  console.log(focusable);
+  focusable.focus();
+}
+function on_focus_out() {
+  hide();
+}
+</script>
+
+<div    id="__hd_svelte_floating_container"
+        class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display}"
+        style="left:{x}px; top:{y}px"
+        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}/>
+</div>
+

package/components/Floating_container.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: ((_x: number, _y: number, _toolbar: any) => Promise<void>) | 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(): (_x: number, _y: number, _toolbar: any) => Promise<void>;
+    get hide(): () => void;
+}
+export {};

package/components/menu.d.ts

@@ -1 +1,2 @@
 export declare function show_menu(x: number, y: number, operations: any): void;
+export declare function show_floating_toolbar(x: number, y: number, toolbar: any): void;

package/components/menu.js

@@ -1,5 +1,7 @@
 import Menu from './contextmenu.svelte';
+import Floating_container from './Floating_container.svelte';
 let menu_comopnent = null;
+let toolbar_component = null;
 export function show_menu(x, y, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!!!menu_element) {
@@ -14,3 +16,17 @@ export function show_menu(x, y, operations) {
     else
         console.error('what now?');
 }
+export function show_floating_toolbar(x, y, toolbar) {
+    let floating_container = document.getElementById("__hd_svelte_floating_container");
+    if (!!!floating_container) {
+        toolbar_component = new Floating_container({
+            target: document.body,
+            props: {}
+        });
+        toolbar_component.show(x, y, toolbar);
+    }
+    else if (toolbar_component)
+        toolbar_component.show(x, y, toolbar);
+    else
+        console.error('what now?');
+}

package/horizontal.toolbar.svelte

@@ -9,7 +9,7 @@
     import FaBars from 'svelte-icons/fa/FaBars.svelte'
     import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
     import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
-    import {show_menu} from './components/menu.js'
+    import {show_menu} from './components/menu'
     //import Menu from './components/contextmenu.svelte'
 
     import {
@@ -81,12 +81,9 @@
         }
     }
 
-    //let menu;
-    let options_owner;
-
-    function show_options()
+    function show_options(e)
     {
-        let rect = options_owner.getBoundingClientRect();
+        let rect = e.target.getBoundingClientRect();
         let x = rect.left;
         let y = rect.bottom;
         let options = [];
@@ -167,8 +164,7 @@
             
     <button
         class="h-full w-16 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
-        on:click={()=> {show_options()}}
-        bind:this={options_owner}>
+        on:click={show_options}>
 
         <Icon size={6} component={FaEllipsisH} />
     </button>

package/operations.svelte

@@ -1,4 +1,5 @@
-<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
+<script>import { show_floating_toolbar, show_menu } from "./components/menu.js";
+import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
 $:
   update($page_toolbar_operations, $context_toolbar_operations);
 let operations = [];
@@ -8,15 +9,31 @@ function update(...args) {
   else
     operations = $page_toolbar_operations;
 }
-function on_click(operation) {
+function on_click(e, operation) {
   if (!operation)
     return;
-  if (!operation.action)
-    return;
-  let focused_item = null;
-  if ($context_items_store.focused)
-    focused_item = $context_items_store[$context_items_store.focused];
-  operation.action(focused_item);
+  if (operation.menu) {
+    let owner = e.target;
+    while (owner && owner.tagName != "BUTTON")
+      owner = owner.parentElement;
+    if (!owner)
+      return;
+    let rect = owner.getBoundingClientRect();
+    show_menu(rect.left, rect.bottom, operation.menu);
+  } else if (operation.toolbar) {
+    let owner = e.target;
+    while (owner && owner.tagName != "BUTTON")
+      owner = owner.parentElement;
+    if (!owner)
+      return;
+    let rect = owner.getBoundingClientRect();
+    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
+  } else 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);
+  }
 }
 </script>
 
@@ -24,7 +41,7 @@ function on_click(operation) {
     
     {#each operations as operation}
         <button type="button" class="py-2.5 px-5 text-xs font-medium text-gray-900 bg-slate-100 hover:bg-slate-200 border-r border-gray-200 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"
-                on:click={(e) => {on_click(operation)}}>
+                on:click={(e) => {on_click(e, operation)}}>
             <div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
             <span class="ml-1">{operation.caption}</span>
         </button>    

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -69,6 +69,7 @@
     "./components/edit.field.svelte": "./components/edit.field.svelte",
     "./components/Fab.svelte": "./components/Fab.svelte",
     "./components/file.loader.svelte": "./components/file.loader.svelte",
+    "./components/Floating_container.svelte": "./components/Floating_container.svelte",
     "./components/icon.svelte": "./components/icon.svelte",
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",

package/page.svelte

@@ -18,7 +18,7 @@
         "w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0" // border-green-500
     export let c = ''
     
-    export let toolbar_operations = [];
+    export let toolbar_operations = undefined;
     export let clears_context = '';
 
     
@@ -34,8 +34,13 @@
     }
 
     onMount(() => {
-            $page_toolbar_operations = [...toolbar_operations]
-            return () => { $page_toolbar_operations = [] }
+            if(toolbar_operations != undefined && Array.isArray(toolbar_operations))
+            {
+                $page_toolbar_operations = [...toolbar_operations]
+                return () => { $page_toolbar_operations = [] }
+            }
+            else
+                return () => {}
     })
 
     setContext('ctx', context)
@@ -87,6 +92,7 @@
 
     function clear_selection(e)
     {
+        console.log(e, clears_context)
         if(!clears_context)
             return;
 

package/page.svelte.d.ts

@@ -9,7 +9,7 @@ export default class Page extends SvelteComponentTyped<{
     typename?: string | undefined;
     focused_only?: boolean | undefined;
     in_context?: string | undefined;
-    toolbar_operations?: any[] | undefined;
+    toolbar_operations?: any;
     clears_context?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -30,7 +30,7 @@ declare const __propDef: {
         typename?: string | undefined;
         focused_only?: boolean | undefined;
         in_context?: string | undefined;
-        toolbar_operations?: any[] | undefined;
+        toolbar_operations?: any;
         clears_context?: string | undefined;
     };
     events: {

package/vertical.toolbar.svelte

@@ -6,7 +6,7 @@
     import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
     import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
-    import {show_menu} from './components/menu.js'
+    import {show_menu} from './components/menu'
     //import Menu from './components/contextmenu.svelte'
 
     import {dark_mode_store, 
@@ -74,12 +74,9 @@
             show_sidebar(key);
     }
 
-    //let menu;
-    let options_owner;
-
-    function show_options()
+    function show_options(e)
     {
-        let rect = options_owner.getBoundingClientRect();
+        let rect = e.target.getBoundingClientRect();
         let x = rect.right;
         let y = rect.top;
         let options = [];
@@ -170,8 +167,7 @@
             
             <button
                 class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
-                on:click={()=> {show_options()}}
-                bind:this={options_owner}>
+                on:click={show_options}>
 
                 <Icon size={6} component={FaEllipsisH} />
             </button>