@humandialog/forms.svelte 0.5.15 → 0.5.16

package/components/document/internal/palette.svelte

@@ -1,5 +1,5 @@
 <svelte:options accessors={true}/>
-<script>import { tick } from "svelte";
+<script>import { tick, afterUpdate } from "svelte";
 import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
@@ -22,9 +22,23 @@ export function showAsToolbox(rect) {
   const windowWidth = window.innerWidth - 2 * margin;
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
-  css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  const mainContentDiv = document.getElementById("__hd_svelte_main_content_container");
+  toolboxY += window.scrollY;
+  css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
   dispatch("palette_shown");
 }
+let toolboxElement;
+afterUpdate(
+  async () => {
+    if (isToolbox && visible && toolboxElement) {
+      let layoutRoot = document.getElementById("__hd_svelte_layout_root");
+      if (!!layoutRoot && toolboxElement.parentElement != layoutRoot) {
+        await tick();
+        layoutRoot.appendChild(toolboxElement);
+      }
+    }
+  }
+);
 export function show(x, y, up = false) {
   isToolbox = false;
   css_style = `width: ${width_px}px; max-height:${max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
@@ -130,6 +144,7 @@ function mousedown(e) {
   beforeTrackingClient = new DOMPoint(touch.clientX, touch.clientY);
   beforeTrackingPos = new DOMPoint(toolboxX, toolboxY);
   isMoving = true;
+  e.stopPropagation();
 }
 function mousemove(e) {
   if (isMoving && beforeTrackingClient && beforeTrackingPos) {
@@ -138,7 +153,8 @@ function mousemove(e) {
     const touch = e.touches.item(0);
     const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
     toolboxX = beforeTrackingPos.x + trackDelta.x;
-    css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+    css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
+    e.stopPropagation();
   }
 }
 function mouseup(e) {
@@ -156,7 +172,8 @@ function mouseup(e) {
             hidden={!visible}
             on:touchstart={mousedown}
             on:touchmove={mousemove}
-            on:touchend={mouseup}>
+            on:touchend={mouseup}
+            bind:this={toolboxElement}>
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
                 {@const id = "cpi_" + idx}

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

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

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

@@ -4,8 +4,8 @@
 export default class Simple extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
-    context?: string | undefined;
     self?: null | undefined;
+    context?: string | undefined;
     nav?: boolean | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -24,8 +24,8 @@ declare const __propDef: {
     props: {
         focus?: boolean | undefined;
         select?: string | undefined;
-        context?: string | undefined;
         self?: null | undefined;
+        context?: string | undefined;
         nav?: boolean | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

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

@@ -4,8 +4,8 @@
 export default class Template extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
-    context?: string | undefined;
     self?: null | undefined;
+    context?: string | undefined;
     nav?: boolean | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
     props: {
         focus?: boolean | undefined;
         select?: string | undefined;
-        context?: string | undefined;
         self?: null | undefined;
+        context?: string | undefined;
         nav?: boolean | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

package/console.svelte

@@ -0,0 +1,128 @@
+<script>
+	import { reef, session } from "@humandialog/auth.svelte";
+	import { afterUpdate } from "svelte";
+    import { contextTypesStore, contextItemsStore} from './stores.js'
+
+	let prevLines = [];
+    let prompt = '>'
+    let input = ""
+    let inputElement;
+    let protocol = 'cons';
+    let protoButtonBorderClass = ''
+
+    async function onKeyDown(e)
+    {
+        if(!$session.isActive)
+        {
+            prevLines = [...prevLines, "Sign-in first"]
+            input = "";
+        }
+
+        if(e.key == 'Enter')
+        {
+            prevLines = [...prevLines, `${prompt} ${input}`];
+
+            if(input.startsWith('self'))
+            {
+                let navItem = getNav('props');
+                if(!navItem)
+                    navItem = getNav('data')
+
+                if(navItem)
+                    input = input.replace('self', navItem)
+            }
+
+            const apiVer = $session.configuration.api_version;
+            const result = await reef.fetch(`/${protocol}/${apiVer}/${input}`)
+            const res = await result.text();
+            prevLines = [...prevLines, res]
+
+            
+            input = "";
+        }
+        else if(e.key == 'Esc' || e.key == 'Escape')
+        {
+            input = "";
+        }
+    }
+
+    function getNav(contextLevel)
+    {
+        let navItem = '';
+        const pageItem = $contextItemsStore[contextLevel]
+        if(pageItem)
+        {
+            if(pageItem.$ref)
+                navItem = pageItem.$ref; //.substr(2); 
+            else if(pageItem.Id)
+            {
+                if(pageItem.$type)
+                    navItem = pageItem.$type + '/' + pageItem.Id;
+                else if(pageItem.oclType)
+                    navItem = pageItem.oclType + '/' + pageItem.Id;
+                else if($contextTypesStore[contextLevel])
+                    navItem = $contextTypesStore[contextLevel] + '/' + pageItem.Id;
+            }
+        }
+        return navItem;
+    }
+
+    afterUpdate(() =>
+    {
+        inputElement?.scrollIntoView();
+    })
+
+
+    function protoChange()
+    {
+        if(protocol == 'cons')
+        {
+            protocol = 'json';
+            protoButtonBorderClass = "border border-stone-400"
+        }
+        else
+        {
+            protocol = 'cons';
+            protoButtonBorderClass = ""
+        }
+    }
+
+</script>
+
+<div class="h-full overflow-y-auto">
+    <button class="fixed right-0 m-2 w-6 h-6 text-stone-200 {protoButtonBorderClass}" on:click={protoChange}>
+        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16 4C14 4 11 5 11 9C11 13 11 15 11 18C11 21 6 23 6 23C6 23 11 25 11 28C11 31 11 35 11 39C11 43 14 44 16 44"/>
+            <path d="M32 4C34 4 37 5 37 9C37 13 37 15 37 18C37 21 42 23 42 23C42 23 37 25 37 28C37 31 37 35 37 39C37 43 34 44 32 44"/>
+        </svg>
+    </button>
+
+    <div class="p-2 w-full min-h-full  
+                bg-stone-800 border-l border-t border-black font-mono text-stone-200">
+        {#each prevLines as line}
+            <p class="whitespace-pre-wrap">{line}</p>
+        {/each}
+        <p bind:this={inputElement} class="whitespace-pre-wrap">{prompt} 
+            <input  type=text name="cmd" id="cmd" 
+                    autocomplete="off"
+                    class="bg-stone-800 w-11/12"
+                    bind:value={input} 
+                    on:keydown={onKeyDown}
+                    placeholder="Type command here">
+        </p>
+    </div>
+</div>
+<style>
+    input:focus {
+    outline: 0px solid transparent;
+  }
+
+  svg {
+        stroke: currentColor;
+        fill: currentColor;
+        stroke-width: 0;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }  
+</style>

package/console.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ConsoleProps */
+/** @typedef {typeof __propDef.events}  ConsoleEvents */
+/** @typedef {typeof __propDef.slots}  ConsoleSlots */
+export default class Console extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ConsoleProps = typeof __propDef.props;
+export type ConsoleEvents = typeof __propDef.events;
+export type ConsoleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/desk.svelte

@@ -107,8 +107,8 @@
         bottom_bar_visible = $bottom_bar_visible_store
         let dts = $data_tick_store;
 
-        if(!hasSelectedItem())
-            bottom_bar_visible = false;
+        //if(!hasSelectedItem())
+        //    bottom_bar_visible = false;
 
         if(tools_visible)
         {
@@ -118,9 +118,9 @@
             content_top = 'top-[50px] sm:top-[40px]'
             
             if(bottom_bar_visible)
-                content_height = `min-h-[calc(100vh-290px)] sm:min-h-[calc(100vh-280px)]`    
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`    
             else    
-                content_height = `min-h-[calc(100vh-50px)] sm:min-h-[calc(100vh-40px)]` 
+                content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
@@ -128,9 +128,9 @@
             tools_visibility = "hidden"
             content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = `min-h-[calc(100vh-290px)] sm:min-h-[calc(100vh-240px)]`           
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
             else
-                content_height = `min-h-[calc(100vh-50px)] sm:min-h-screen`
+                content_height = `h-[calc(100vh-50px)] sm:h-screen`
         }
         
         
@@ -161,7 +161,7 @@
             on:click={handleSelect} 
             on:contextmenu={handleSelect}>
 
-        <div class="bg-white dark:bg-stone-900 dark:text-white      min-h-screen">    
+        <div class="bg-white dark:bg-stone-900 dark:text-white  overflow-x-clip overflow-y-clip  h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
@@ -206,7 +206,11 @@
             </div>    
             {/if}
 
-            <section on:click|capture={auto_hide_sidebar}>
+            <!-- ! below overflow-x-clip prevents horizontal scrollbar when vertical scrollbar is visible. Default
+                behaviour is the content expand vertically, and only vertical scrollbar can be visible.
+                When content on the main page needs to be expanded horizontally (like kanban chart for example) then
+                that component should define overflow-x-* itself -->
+            <section on:click|capture={auto_hide_sidebar} class="">
 
                 <!--###########################################################-->
                 <!--##  HORIZONTAL TOOLS                 ######################-->
@@ -231,14 +235,15 @@
                 <!--##  CONTENT                          ##################-->
                 <!--#######################################################-->
                 <!-- fixed => relative, content-height => min content height -- -->
-                <div  class="relative left-0  w-screen  
+                <div    id="__hd_svelte_main_content_container"
+                        class="relative left-0  w-screen  
                                 sm:left-[40px]  sm:w-[calc(100vw-40px)]    
                                 {content_top}
                                 {content_height}
                                 {lg_content_area_horizontal_dim}
-                                z-0 overflow-x-hidden" 
+                                z-0 overflow-x-hidden overflow-y-auto" 
                                 >
-                        <Configurable config={layout.mainContent} min_h_class={content_height}>
+                        <Configurable config={layout.mainContent} min_h_class="min-h-full">
                             <div slot='alt'></div>
                         </Configurable>
                 </div>    

package/form.box.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  FormEvents */
 /** @typedef {typeof __propDef.slots}  FormSlots */
 export default class Form extends SvelteComponentTyped<{
-    context?: string | undefined;
     self?: null | undefined;
+    context?: string | undefined;
     c?: string | undefined;
     cl?: string | undefined;
     fit?: boolean | undefined;
@@ -19,8 +19,8 @@ export type FormSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        context?: string | undefined;
         self?: null | undefined;
+        context?: string | undefined;
         c?: string | undefined;
         cl?: string | undefined;
         fit?: boolean | undefined;

package/horizontal.toolbar.svelte

@@ -44,6 +44,7 @@
     
     let config = null;
     let has_selection_details = false;
+    let selection_details_caption = 'Properties'
     
     let show_sign_in_out_icons = false;
     let is_logged_in = false;
@@ -57,6 +58,8 @@
     {
         config = appConfig.mainToolbar;
         has_selection_details = appConfig.selectionDetails;
+        if(has_selection_details)
+            selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
         is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
@@ -200,7 +203,7 @@
         if(has_selection_details)
         {
             options.push( {
-                        caption: 'Properties',
+                        caption: selection_details_caption,
                         icon: $bottom_bar_visible_store ? FaToggleOn : FaToggleOff,
                         action: (focused) => { $bottom_bar_visible_store = !$bottom_bar_visible_store }
                     });

package/index.d.ts

@@ -38,6 +38,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
+export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';
 export { default as Tags } from './components/tags.svelte';
 export { default as Kanban } from './components/kanban/kanban.svelte';

package/index.js

@@ -44,6 +44,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
+export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';
 export { default as Tags } from './components/tags.svelte';
 export { default as Kanban } from './components/kanban/kanban.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -123,6 +123,7 @@
     "./components/tags.svelte": "./components/tags.svelte",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
     "./components/tile.title.svelte": "./components/tile.title.svelte",
+    "./console.svelte": "./console.svelte",
     "./desk.svelte": "./desk.svelte",
     "./form.box.svelte": "./form.box.svelte",
     "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",

package/page.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
     [x: string]: any;
+    self?: null | undefined;
     clearsContext?: string | undefined;
     context?: string | undefined;
-    self?: null | undefined;
     c?: string | undefined;
     cl?: string | undefined;
     typename?: string | undefined;
@@ -26,9 +26,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        self?: null | undefined;
         clearsContext?: string | undefined;
         context?: string | undefined;
-        self?: null | undefined;
         c?: string | undefined;
         cl?: string | undefined;
         typename?: string | undefined;

package/stores.js

@@ -21,7 +21,7 @@ export function setNavigatorTitle(key, title)
 
 export function hasSelectedItem()
 {
-    let itm = get(contextItemsStore).sel
+    let itm = get(contextItemsStore).props
     return itm !== null && itm !== undefined;
 }
 

package/tile.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TileEvents */
 /** @typedef {typeof __propDef.slots}  TileSlots */
 export default class Tile extends SvelteComponentTyped<{
-    context?: string | undefined;
     self?: null | undefined;
+    context?: string | undefined;
     c?: string | undefined;
     cl?: string | undefined;
 }, {
@@ -18,8 +18,8 @@ export type TileSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        context?: string | undefined;
         self?: null | undefined;
+        context?: string | undefined;
         c?: string | undefined;
         cl?: string | undefined;
     };

package/vertical.toolbar.svelte

@@ -36,6 +36,7 @@
     let tabs = new Array();
     let config = null;
     let has_selection_details = false;
+    let selection_detils_caption = 'Properties';
     
     let show_sign_in_out_icons = false;
     let is_logged_in = false;
@@ -45,6 +46,8 @@
     $:{
         config = appConfig.mainToolbar;
         has_selection_details = appConfig.selectionDetails;
+        if(has_selection_details)
+            selection_detils_caption = appConfig.selectionDetails.caption ?? 'Properties'
         is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
@@ -168,7 +171,7 @@
         if(has_selection_details)
         {
             options.push( {
-                        caption: 'Properties',
+                        caption: selection_detils_caption,
                         icon: $bottom_bar_visible_store ? FaToggleOn : FaToggleOff,
                         action: (focused) => { $bottom_bar_visible_store = !$bottom_bar_visible_store }
                     });