@humandialog/forms.svelte 0.4.7 → 0.4.8

package/components/Floating_container.svelte

@@ -3,15 +3,17 @@ let x;
 let y;
 let visible = false;
 let toolbar;
+let props = {};
 let root_element;
 let invisible_button;
 $:
   display = visible ? "fixed" : "hidden";
-export async function show(_x, _y, _toolbar) {
+export async function show(_x, _y, _toolbar, _props = {}) {
   x = _x;
   y = _y;
   visible = true;
   toolbar = _toolbar;
+  props = _props;
   await tick();
   focus_first_element();
 }
@@ -36,6 +38,6 @@ function on_focus_out() {
         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}/>
+    <svelte:component this={toolbar} {...props}/>
 </div>
 

package/components/Floating_container.svelte.d.ts

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

package/components/Grid.menu.svelte

@@ -0,0 +1,131 @@
+<script>
+    import {context_items_store} from '..'
+
+    export let operations = []
+
+    $: grid_cols = init(operations);
+    
+
+    function init(operations)
+    {
+        let cols_no = 0;
+        let current_row_cols_no = 0;
+
+        for(let i=0; i<operations.length; i++)
+        {
+            let operation = operations[i];
+            if(operation.separator)
+            {
+                if(current_row_cols_no > cols_no)
+                    cols_no = current_row_cols_no;
+
+                current_row_cols_no = 0;
+            }
+            else
+            {
+                let cols = operation.columns ?? 1;
+                current_row_cols_no += cols;
+            }
+        }
+
+        if(current_row_cols_no > cols_no)
+            cols_no = current_row_cols_no;
+
+        switch(cols_no)
+        {
+            case 1:
+                return "grid-cols-1";
+                
+            case 2:
+                return "grid-cols-2";
+                
+            case 3:
+                return "grid-cols-3";
+                
+            case 4:
+                return "grid-cols-4";
+                
+            case 5:
+                return "grid-cols-5";
+                
+            case 6:
+                return "grid-cols-6";
+                
+            case 7:
+                return "grid-cols-7";
+                
+            case 8:
+                return "grid-cols-8";
+                
+            case 9:
+                return "grid-cols-9";
+                
+            case 10:
+                return "grid-cols-10";
+        }
+    }
+
+    function col_span(n)
+    {
+        switch(n)
+        {
+        case 1:
+            return "col-span-1";
+        case 2:
+            return "col-span-2";
+        case 3:
+            return "col-span-3";
+        case 4:
+            return "col-span-4";
+        case 5:
+            return "col-span-5";
+        case 6:
+            return "col-span-6";
+        case 7:
+            return "col-span-7";
+        case 8:
+            return "col-span-8";
+        case 9:
+            return "col-span-9";
+        case 10:
+            return "col-span-10";
+        }
+    }
+
+    function execute_action(e, operation)
+    {
+        
+        if(!operation)
+            return;
+
+        if(!operation.action)
+            return;
+
+        let context_item = null
+        if($context_items_store.focused)
+            context_item = $context_items_store[$context_items_store.focused]
+        
+        
+        operation.action(context_item);
+    }
+
+</script>
+
+
+<div  class="grid gap-2 {grid_cols}">  
+    {#each operations as operation}
+        {#if !operation.separator}
+            {@const col=col_span(operation.columns ?? 1)}
+            
+            <button class=" py-2.5 px-5 {col}
+                            text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
+                            bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700
+                            border rounded border-gray-200 dark:border-gray-600 focus:outline-none
+                            inline-flex items-center justify-center"
+                            on:click={(e) => {execute_action(e, operation)}}>
+                <div>{operation.caption}</div>
+            </button>
+        {/if}
+    {/each}
+</div>
+

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+export default class Grid extends SvelteComponentTyped<{
+    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: {
+        operations?: any[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/inputbox.ltop.svelte.d.ts

@@ -6,8 +6,8 @@ export default class Inputbox extends SvelteComponentTyped<{
     label?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     typename?: string | undefined;
+    c?: string | undefined;
     a?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
@@ -28,8 +28,8 @@ declare const __propDef: {
         label?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         typename?: string | undefined;
+        c?: string | undefined;
         a?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;

package/components/menu.d.ts

@@ -1,2 +1,3 @@
 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;
+export declare function show_floating_toolbar(x: number, y: number, toolbar: any, props?: {}): void;
+export declare function show_grid_menu(x: number, y: number, operations: any): void;

package/components/menu.js

@@ -1,5 +1,6 @@
 import Menu from './contextmenu.svelte';
 import Floating_container from './Floating_container.svelte';
+import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 let toolbar_component = null;
 export function show_menu(x, y, operations) {
@@ -16,17 +17,21 @@ export function show_menu(x, y, operations) {
     else
         console.error('what now?');
 }
-export function show_floating_toolbar(x, y, toolbar) {
+export function show_floating_toolbar(x, y, toolbar, props = {}) {
     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);
+        toolbar_component.show(x, y, toolbar, props);
     }
     else if (toolbar_component)
-        toolbar_component.show(x, y, toolbar);
+        toolbar_component.show(x, y, toolbar, props);
     else
         console.error('what now?');
 }
+export function show_grid_menu(x, y, operations) {
+    console.log('show_grid_menu', operations);
+    show_floating_toolbar(x, y, Grid, { operations: operations });
+}

package/form.box.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Form extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     fit?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,8 +21,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         fit?: boolean | undefined;
     };
     events: {

package/index.d.ts

@@ -22,7 +22,7 @@ export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
-export { show_menu } from './components/menu';
+export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores';

package/index.js

@@ -27,7 +27,7 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
-export { show_menu } from './components/menu';
+export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores'; // tmp

package/operations.svelte

@@ -1,4 +1,4 @@
-<script>import { show_floating_toolbar, show_menu } from "./components/menu.js";
+<script>import { show_floating_toolbar, show_menu, show_grid_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);
@@ -12,28 +12,25 @@ function update(...args) {
 function on_click(e, operation) {
   if (!operation)
     return;
-  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) {
+  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);
+    return;
   }
+  let owner = e.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (!owner)
+    return;
+  let rect = owner.getBoundingClientRect();
+  if (operation.menu)
+    show_menu(rect.left, rect.bottom, operation.menu);
+  else if (operation.toolbar)
+    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
+  else if (operation.grid)
+    show_grid_menu(rect.left, rect.bottom, operation.grid);
 }
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -70,6 +70,7 @@
     "./components/Fab.svelte": "./components/Fab.svelte",
     "./components/file.loader.svelte": "./components/file.loader.svelte",
     "./components/Floating_container.svelte": "./components/Floating_container.svelte",
+    "./components/Grid.menu.svelte": "./components/Grid.menu.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.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  PageEvents */
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type PageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/page.svelte.d.ts

@@ -4,11 +4,11 @@
 export default class Page extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
-    cl?: string | undefined;
     typename?: string | undefined;
     focused_only?: boolean | undefined;
     in_context?: string | undefined;
+    cl?: string | undefined;
+    c?: string | undefined;
     toolbar_operations?: any;
     clears_context?: string | undefined;
 }, {
@@ -25,11 +25,11 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
-        cl?: string | undefined;
         typename?: string | undefined;
         focused_only?: boolean | undefined;
         in_context?: string | undefined;
+        cl?: string | undefined;
+        c?: string | undefined;
         toolbar_operations?: any;
         clears_context?: string | undefined;
     };

package/tile.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Tile extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tiles.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TilesEvents */
 /** @typedef {typeof __propDef.slots}  TilesSlots */
 export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type TilesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/tiles.vertical.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TilesEvents */
 /** @typedef {typeof __propDef.slots}  TilesSlots */
 export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,8 +16,8 @@ export type TilesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;