@humandialog/forms.svelte 0.3.5 → 0.4.1

package/README.md

@@ -1,18 +1,31 @@
-# <img src="https://objectreef.dev/reef.png" alt="ObjectReef logo" width="26"> @humandialog/forms.svelte
-
-Basic Svelte UI components for Object Reef applications
-
-## Installing
-To install the package on your Svelte project type:\
-`npm install @humandialog/forms.svelte`
-
-## Usage
-To be continued..
-
-
-## About ObjectReef®
-Object Reef is a complete platform to design, test and deploy any high performance backend service. It ensures robust, scalability and security with zero tech debt. That Low Code Backend as a Services (BaaS) solution offers you everything you need to develop, maintain, integrate and run the software without the advanced technical knowledge.
-
-No matter, if you are creating the simple or complex and critical product, Object Reef is the platform, that simplifies the process of delivering the application backend. It has never been so quick and so robust.
-
+# <img src="https://objectreef.dev/reef.png" alt="ObjectReef logo" width="26"> @humandialog/forms.svelte
+
+Basic Svelte UI components for Object Reef applications
+
+## Installing
+To install the package on your Svelte project type:\
+`npm install @humandialog/forms.svelte`
+
+in your tailwind.config.cjs file add:
+```js
+const config = {
+  content: [  ... 
+              './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}', 
+              './node_modules/@humandialog/forms.svelte/**/*.{html,js,svelte,ts}']
+```
+
+## Usage
+
+
+
+To be continued..
+
+
+
+
+## About ObjectReef®
+Object Reef is a complete platform to design, test and deploy any high performance backend service. It ensures robust, scalability and security with zero tech debt. That Low Code Backend as a Services (BaaS) solution offers you everything you need to develop, maintain, integrate and run the software without the advanced technical knowledge.
+
+No matter, if you are creating the simple or complex and critical product, Object Reef is the platform, that simplifies the process of delivering the application backend. It has never been so quick and so robust.
+
 More info you'll find at https://objectreef.dev/

package/components/Fab.svelte

@@ -0,0 +1,82 @@
+<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
+let expanded = false;
+$:
+  update($page_toolbar_operations, $context_toolbar_operations);
+let operations = [];
+function update(...args) {
+  if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
+    operations = $context_toolbar_operations;
+  else
+    operations = $page_toolbar_operations;
+}
+function on_click(operation) {
+  expanded = false;
+  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);
+}
+function toggle_expand(e) {
+  expanded = !expanded;
+}
+</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 
+                            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 
+                            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={toggle_expand}>
+                    <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>
+                    </div>
+            </button>
+            {#if expanded}
+                <ul class="list-none m-0 absolute bottom-[60px] right-0">
+                    {#each operations 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)}}>
+                            <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>
+                            </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>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        {/if}
+{/if}
+

package/components/Fab.svelte.d.ts

@@ -0,0 +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 {};

package/components/combo/combo.svelte

@@ -4,7 +4,7 @@ import { parse_width_directive, should_be_comapact } from "../../utils.js";
 import { afterUpdate, getContext, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
-import Icon from "../../icon.svelte";
+import Icon from "../icon.svelte";
 import { Auth } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
 export let self = null;

package/components/contextmenu.svelte

@@ -0,0 +1,188 @@
+<script>import { afterUpdate, tick } from "svelte";
+import Icon from "./icon.svelte";
+import { context_items_store } from "../stores";
+export let width_px = 400;
+export let menu_items_id_prefix = "__hd_svelte_menuitem_";
+export let owner_menu_item = void 0;
+let x = 0;
+let y = 0;
+let visible = false;
+let menu_root;
+let operations = [];
+let min_width_px = 200;
+let focused_index = 0;
+let menu_items = [];
+let submenus = [];
+$:
+  display = visible ? "block" : "none";
+afterUpdate(() => {
+  let rect = menu_root.getBoundingClientRect();
+  if (rect.height == 0)
+    return;
+  let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  if (rect.right > container_rect.right)
+    x = container_rect.right - rect.width;
+  if (rect.bottom > container_rect.bottom)
+    y = container_rect.bottom - rect.height;
+  if (rect.left < container_rect.left)
+    x = container_rect.left;
+  if (rect.top < container_rect.top)
+    y = container_rect.top;
+});
+export async function show(_x, _y, _operations) {
+  x = _x;
+  y = _y;
+  visible = true;
+  operations = [..._operations];
+  focused_index = 0;
+  await tick();
+  if (menu_items.length)
+    focus_menu_item(focused_index);
+}
+export function hide() {
+  visible = false;
+}
+export function get_rendered_rect() {
+  if (menu_root)
+    return menu_root.getBoundingClientRect();
+  else
+    return void 0;
+}
+function on_keydown(e, operation, index) {
+  switch (e.key) {
+    case "Esc":
+    case "Escape":
+      hide();
+      break;
+    case "ArrowDown":
+      navigate_down();
+      break;
+    case "ArrowUp":
+      navigate_up();
+      break;
+    case "ArrowLeft":
+      hide_submenu();
+      break;
+    case "Enter":
+      execute_action(operation, index);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+  }
+}
+function navigate_up() {
+  let index = focused_index;
+  while (index > 0 && menu_items.length > 0) {
+    let prev_item = menu_items[--index];
+    if (prev_item) {
+      focus_menu_item(index);
+      break;
+    }
+  }
+}
+function navigate_down() {
+  let index = focused_index;
+  while (index + 1 < menu_items.length) {
+    let next_item = menu_items[++index];
+    if (next_item) {
+      focus_menu_item(index);
+      break;
+    }
+  }
+}
+function on_change_focus(e) {
+  if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
+    return;
+  else
+    hide();
+}
+function on_mouse_move(index) {
+  focus_menu_item(index);
+}
+function execute_action(operation, index) {
+  if (operation.menu) {
+    focus_menu_item(index);
+    return;
+  }
+  hide();
+  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);
+}
+function focus_menu_item(index) {
+  focused_index = index;
+  let element = menu_items[focused_index];
+  element.focus();
+  if (submenus && submenus.length && submenus[focused_index]) {
+    let rect = element.getBoundingClientRect();
+    let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+    let _x = rect.right;
+    let _y = rect.top;
+    let submenu_width = min_width_px;
+    let rendered_rect = submenus[focused_index].get_rendered_rect();
+    if (rendered_rect && rendered_rect.width > 0)
+      submenu_width = rendered_rect.width;
+    if (_x + submenu_width > container_rect.right) {
+      if (rect.left - container_rect.left > container_rect.right - rect.right)
+        _x = rect.left - submenu_width;
+    }
+    submenus[focused_index].show(_x, _y, operations[focused_index].menu);
+  }
+}
+function hide_submenu() {
+  if (!owner_menu_item)
+    return;
+  owner_menu_item.focus();
+}
+</script>
+
+<div id="__hd_svelte_contextmenu" 
+    class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md z-20 fixed min-w-[{min_width_px}px]" 
+    style={`left:${x}px; top:${y}px; display:${display}`}
+    bind:this={menu_root}
+    on:focusout={on_change_focus}>
+
+    {#each operations as operation, index}
+        {@const is_separator = operation.separator}
+        {#if is_separator}
+            <hr class="my-1 mx-1">
+        {:else}
+            {@const icon_placeholder_size = operation.description ? 12 : 10}
+            {@const menu_item_id = menu_items_id_prefix + index}
+            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-700' : ''}
+            {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
+            
+            <button class="font-medium m-0 p-2 text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
+                    id={menu_item_id}
+                    bind:this={menu_items[index]}
+                    on:click|stopPropagation={(e) => { execute_action(operation, index) } } 
+                    on:mouseenter = {(e) => {on_mouse_move(index)}}
+                    on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}>
+                    
+                <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+                    {#if operation.icon}
+                        {@const icon_size = icon_placeholder_size - 6}
+                        <Icon size={icon_size} component={operation.icon}/>
+                    {/if}
+                </div>
+                <div class="">
+                    <p>{operation.caption}</p>
+                    {#if operation.description}
+                        {@const shortcut_width_px = operation.shortcut ? 80 : 0}
+                        <p  class="text-sm font-normal text-gray-400 dark:text-gray-500 truncate inline-block"
+                            style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{operation.description}</p>
+                    {/if}
+                </div>
+                {#if has_submenu}
+                    <p class="ms-auto pr-1 text-sm font-mono text-gray-500">&rarr;</p>
+                    <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
+                {/if}
+            </button>
+        {/if}
+    {/each}
+</div>

package/components/contextmenu.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width_px?: number | undefined;
+        menu_items_id_prefix?: string | undefined;
+        owner_menu_item?: HTMLElement | undefined;
+        show?: ((_x: number, _y: number, _operations: any) => Promise<void>) | undefined;
+        hide?: (() => void) | undefined;
+        get_rendered_rect?: (() => DOMRect | undefined) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextmenuProps = typeof __propDef.props;
+export type ContextmenuEvents = typeof __propDef.events;
+export type ContextmenuSlots = typeof __propDef.slots;
+export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
+    get show(): (_x: number, _y: number, _operations: any) => Promise<void>;
+    get hide(): () => void;
+    get get_rendered_rect(): () => DOMRect | undefined;
+}
+export {};

package/components/delayed.spinner.svelte

@@ -0,0 +1,18 @@
+<script>import { Spinner } from "flowbite-svelte";
+import { onMount } from "svelte";
+export let delay = 100;
+let visible = false;
+onMount(() => {
+  visible = false;
+  setTimeout(() => {
+    visible = true;
+  }, delay);
+  return () => {
+  };
+});
+</script>
+
+
+{#if visible}
+    <Spinner/>
+{/if}

package/components/delayed.spinner.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        delay?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DelayedProps = typeof __propDef.props;
+export type DelayedEvents = typeof __propDef.events;
+export type DelayedSlots = typeof __propDef.slots;
+export default class Delayed extends SvelteComponentTyped<DelayedProps, DelayedEvents, DelayedSlots> {
+}
+export {};

package/components/document/internal/palette.row.svelte

@@ -1,5 +1,5 @@
 <svelte:options accessors={true}/>
-<script>import Icon from "../../../icon.svelte";
+<script>import Icon from "../../icon.svelte";
 export let id;
 export let cmd;
 export let width_px = 400;

package/{icon.svelte → components/icon.svelte}

@@ -1,5 +1,5 @@
 <svelte:options accessors={true}/>
-<script>import { icons } from "./utils.js";
+<script>import { icons } from "../utils.js";
 export let component = null;
 export let module_name = "fa/FaQuestion";
 export let img = "";
@@ -53,11 +53,6 @@ $: {
     _bg = color;
   } else if (symbol) {
   } else if (!component) {
-    import("../../node_modules/svelte-icons/" + module_name + ".svelte").then(
-      (module) => {
-        component = module.default || module;
-      }
-    );
   } else
     component = component;
 }

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

@@ -3,12 +3,12 @@
 /** @typedef {typeof __propDef.slots}  InputboxSlots */
 export default class Inputbox extends SvelteComponentTyped<{
     [x: string]: any;
+    label?: string | undefined;
+    a?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     c?: string | undefined;
-    label?: string | undefined;
     typename?: string | undefined;
-    a?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
     itype?: string | undefined;
@@ -25,12 +25,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        label?: string | undefined;
+        a?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         c?: string | undefined;
-        label?: string | undefined;
         typename?: string | undefined;
-        a?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
         itype?: string | undefined;

package/components/menu.d.ts

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

package/components/menu.js

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

package/components/simple.table.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  SimpleEvents */
 /** @typedef {typeof __propDef.slots}  SimpleSlots */
 export default class Simple extends SvelteComponentTyped<{
-    context?: string | undefined;
-    self?: null | undefined;
     focus?: boolean | undefined;
     select?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
     nav?: boolean | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -22,10 +22,10 @@ export type SimpleSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        context?: string | undefined;
-        self?: null | undefined;
         focus?: boolean | undefined;
         select?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
         nav?: boolean | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

package/components/table/_template.table.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  TemplateEvents */
 /** @typedef {typeof __propDef.slots}  TemplateSlots */
 export default class Template extends SvelteComponentTyped<{
-    context?: string | undefined;
-    self?: null | undefined;
     focus?: boolean | undefined;
     select?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
     nav?: boolean | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -30,10 +30,10 @@ export type TemplateSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        context?: string | undefined;
-        self?: null | undefined;
         focus?: boolean | undefined;
         select?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
         nav?: boolean | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

package/components/table/table.svelte

@@ -1,7 +1,8 @@
-<script>import { data_tick_store, context_items_store, context_info_store, context_types_store } from "../../stores.js";
+<script>import { data_tick_store, context_items_store, context_info_store, context_types_store, context_toolbar_operations } from "../../stores.js";
 import { getContext, setContext, onDestroy } from "svelte";
 import { rTable_definition } from "./table";
 import { parse_width_directive } from "../../utils.js";
+import { show_menu } from "../menu";
 export let context = "";
 export let collection = "";
 export let self = null;
@@ -14,6 +15,8 @@ export let focus = true;
 export let nav = true;
 export let c = "";
 export let typename = "";
+export let toolbar_operations = [];
+export let menu_operations = [];
 let definition = new rTable_definition();
 setContext("rTable-definition", definition);
 setContext("rIs-table-component", true);
@@ -59,6 +62,10 @@ export function select_item(itm, cinfo2) {
     $context_types_store[select] = itm.oclType;
   if (focus)
     $context_items_store.focused = select;
+  if (itm)
+    $context_toolbar_operations = [...toolbar_operations];
+  else
+    $context_toolbar_operations = [];
   if (nav)
     $data_tick_store = $data_tick_store + 1;
 }
@@ -72,6 +79,15 @@ function override_items_from_slot(...args) {
   }
   return 0;
 }
+function show_context_menu(e, itm, cinfo2) {
+  if (!menu_operations)
+    return;
+  if (menu_operations.length == 0)
+    return;
+  e.stopPropagation();
+  e.preventDefault();
+  show_menu(e.clientX, e.clientY, menu_operations);
+}
 </script>
 
 {#if true}
@@ -101,7 +117,8 @@ function override_items_from_slot(...args) {
             <tbody class="bg-white dark:bg-slate-900">
                 {#each items as item}
                     {#if (item != null )}
-                        <tr on:click={ (e) => { select_item(item, cinfo);} }
+                        <tr on:click={ (e) => { e.stopPropagation(); e.preventDefault(); select_item(item, cinfo);} }
+                            on:contextmenu={ (e) => {select_item(item, cinfo); show_context_menu(e, item, cinfo)} }
                             class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
                             class:bg-slate-100={item==selected_item}
                             class:dark:bg-slate-700={item==selected_item}>

package/components/table/table.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         nav?: boolean | undefined;
         c?: string | undefined;
         typename?: string | undefined;
+        toolbar_operations?: any[] | undefined;
+        menu_operations?: any[] | undefined;
         refresh?: (() => void) | undefined;
         update_objects?: ((_objects: any) => void) | undefined;
         update_self?: ((_self: any) => void) | undefined;

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
-    c?: string | undefined;
     label?: string | undefined;
+    c?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
     val?: string | undefined;
@@ -19,8 +19,8 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         label?: string | undefined;
+        c?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
         val?: string | undefined;

package/components/tile.title.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  TileSlots */
 export default class Tile extends SvelteComponentTyped<{
     [x: string]: any;
-    c?: string | undefined;
     label?: string | undefined;
     a?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,9 +17,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        c?: string | undefined;
         label?: string | undefined;
         a?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;