@humandialog/forms.svelte 0.4.13 → 0.4.14

package/components/Floating_container.svelte

@@ -1,45 +1,78 @@
-<script>import { tick } from "svelte";
+<script>import { tick, afterUpdate } from "svelte";
+import { is_device_smaller_than } from "../utils";
 let x;
 let y;
 let visible = false;
 let toolbar;
 let props = {};
+let around_rect;
 let root_element;
 let invisible_button;
 $:
   display = visible ? "fixed" : "hidden";
-export async function show(_x, _y, _toolbar, _props = {}) {
-  x = _x;
-  y = _y;
+export async function show(around, _toolbar, _props = {}) {
+  if (around instanceof DOMRect) {
+    x = around.left;
+    y = around.bottom;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  props.onhide = () => {
+    hide();
+  };
   await tick();
   focus_first_element();
 }
+export function is_visible() {
+  return visible;
+}
 export function hide() {
   visible = false;
 }
+afterUpdate(() => {
+  if (!root_element)
+    return;
+  let rect = root_element.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 - around_rect.height;
+  if (rect.left < container_rect.left)
+    x = container_rect.left;
+  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"])');
-  console.log(focusable);
   focusable.focus();
 }
 function on_focus_out(e) {
-  if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
-  } else
-    hide();
+  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}"
-        style="left:{x}px; top:{y}px"
+        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} hide={() => hide()}/>
+    <svelte:component this={toolbar} {...props} />
 </div>
 

package/components/Floating_container.svelte.d.ts

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

package/components/Grid.menu.svelte

@@ -2,7 +2,7 @@
     import {context_items_store} from '../stores.js'
 
     export let operations = []
-    export let hide = undefined;
+    export let onhide = undefined;
     
     $: grid_cols = init(operations);
 
@@ -94,8 +94,8 @@
 
     function execute_action(e, operation)
     {
-        if(hide != undefined)
-            hide();
+        if(!!onhide)
+            onhide();
 
         if(!operation)
             return;

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    hide?: any;
+    onhide?: any;
     operations?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -14,7 +14,7 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        hide?: any;
+        onhide?: any;
         operations?: any[] | undefined;
     };
     events: {

package/components/combo/combo.svelte

@@ -56,9 +56,7 @@ switch (s) {
 let background_class = is_compact && !icon ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
 let appearance_class;
 if (is_compact)
-  appearance_class = `   text-gray-900 ${font_size} 
-                                focus:ring-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700 
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 ${background_class}`;
+  appearance_class = `${font_size}`;
 else
   appearance_class = `   bg-gray-50 border border-gray-300 text-gray-900 ${font_size} rounded-lg 
                                 focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700 
@@ -454,7 +452,7 @@ function on_focus_out(e) {
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
     
-<div class={cs}
+<div class="{cs} max-w-full inline-block"
     on:focusout={on_focus_out}
     bind:this={root_element}>
     {#if !is_compact}
@@ -462,12 +460,12 @@ function on_focus_out(e) {
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click={show}
-            class="{appearance_class} flex flex-row content-between items-center"
+            on:click={(e) => { show(e, undefined) }}
             class:cursor-pointer={can_be_activated && is_compact}
+            class="max-w-full {appearance_class} flex flex-row content-between items-center"
          >
             
-        <div class="flex-1 flex flex-row items-center">
+        <div class="max-w-full flex-1 flex flex-row items-center">
             {#if !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
@@ -480,7 +478,7 @@ function on_focus_out(e) {
 
             
             <p  bind:this={textbox}
-                class="dark:text-white {line_h}"
+                class="dark:text-white {line_h} truncate px-2.5 {background_class}"
                 class:ml-2={icon}
                 class:text-gray-400={ (!is_dropdown_open) && (!sel_item)}
                 class:text-gray-700={ is_dropdown_open || sel_item }

package/components/contextmenu.svelte

@@ -1,6 +1,7 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
 import { context_items_store } from "../stores";
+import { is_device_smaller_than } from "../utils";
 export let width_px = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -13,6 +14,7 @@ let min_width_px = 200;
 let focused_index = 0;
 let menu_items = [];
 let submenus = [];
+let around_rect;
 $:
   display = visible ? "block" : "none";
 afterUpdate(() => {
@@ -23,15 +25,22 @@ afterUpdate(() => {
   if (rect.right > container_rect.right)
     x = container_rect.right - rect.width;
   if (rect.bottom > container_rect.bottom)
-    y = container_rect.bottom - rect.height;
+    y = container_rect.bottom - rect.height - around_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;
+export async function show(around, _operations) {
+  if (around instanceof DOMRect) {
+    x = around.left;
+    y = around.bottom;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
   visible = true;
   operations = [..._operations];
   focused_index = 0;
@@ -39,6 +48,9 @@ export async function show(_x, _y, _operations) {
   if (menu_items.length)
     focus_menu_item(focused_index);
 }
+export function is_visible() {
+  return visible;
+}
 export function hide() {
   visible = false;
 }
@@ -91,10 +103,12 @@ function navigate_down() {
   }
 }
 function on_change_focus(e) {
-  if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
-    return;
-  else
-    hide();
+  if (!is_device_smaller_than("sm")) {
+    if (e.relatedTarget && e.relatedTarget.id.startsWith(menu_items_id_prefix))
+      return;
+    else
+      hide();
+  }
 }
 function on_mouse_move(index) {
   focus_menu_item(index);
@@ -142,7 +156,7 @@ function hide_submenu() {
 </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]" 
+    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] w-max" 
     style={`left:${x}px; top:${y}px; display:${display}`}
     bind:this={menu_root}
     on:focusout={on_change_focus}>

package/components/contextmenu.svelte.d.ts

@@ -4,7 +4,8 @@ declare const __propDef: {
         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;
+        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        is_visible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
         get_rendered_rect?: (() => DOMRect | undefined) | undefined;
     };
@@ -17,7 +18,8 @@ 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 show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
+    get is_visible(): () => boolean;
     get hide(): () => void;
     get get_rendered_rect(): () => DOMRect | undefined;
 }

package/components/date.svelte

@@ -1,45 +1,80 @@
 <script>import { getContext } from "svelte";
 import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
 import { inform_modification, push_changes } from "../updates.js";
-import { parse_width_directive } from "../utils.js";
+import { parse_width_directive, is_device_smaller_than } from "../utils.js";
 export let self = null;
 export let a = "";
 export let context = "";
 export let typename = "";
 export let date = null;
+export let on_select = void 0;
+export let type = "date";
+export let changed = void 0;
 export let s = "sm";
 export let c = "";
-let is_table_component = getContext("rIs-table-component");
+export let compact = false;
+export let in_context = "sel";
+let on_hide_callback = void 0;
+export function show(event, hide_callback) {
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  if (!!hide_callback)
+    on_hide_callback = hide_callback;
+  else
+    on_hide_callback = void 0;
+  if (input_element) {
+    input_element.focus();
+    if (is_device_smaller_than("sm")) {
+      input_element.click();
+    }
+    if ("showPicker" in HTMLInputElement.prototype) {
+      input_element.showPicker();
+    }
+  }
+}
+let is_compact = getContext("rIs-table-component") || compact;
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
+let font_size = "text-sm";
+let line_h = "h-4";
 switch (s) {
   case "md":
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
+    font_size = "text-sm";
+    line_h = "h-5";
+    break;
+  case "xs":
+    input_pt = "pt-0.5";
+    input_pb = "pb-0.5";
+    font_size = "text-xs";
+    line_h = "h-4";
     break;
 }
 let item = null;
-let additional_class = $$restProps.class ?? "";
+let user_class = $$restProps.class ?? "";
 let value = null;
 let rValue = "";
 let ctx = context ? context : getContext("ctx");
 let cs = parse_width_directive(c);
 let style;
-if (!is_table_component) {
+let input_element = void 0;
+let background_class = is_compact ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
+if (!is_compact) {
   style = `bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
                 focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700
                 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
 } else {
-  style = `bg-transparent text-sm block w-full  ${input_pb} ${input_pt} px-2.5`;
+  style = `${font_size}`;
 }
 let can_be_activated = true;
 let last_tick = -1;
 $:
-  setup($data_tick_store);
-function setup(data_tick_store2) {
-  if (data_tick_store2 <= last_tick)
-    return;
-  last_tick = data_tick_store2;
+  setup($data_tick_store, $context_items_store);
+function setup(...args) {
+  last_tick = data_tick_store;
   if (!date) {
     item = self ?? $context_items_store[ctx];
     if (!typename)
@@ -50,8 +85,8 @@ function setup(data_tick_store2) {
       value = new Date(item[a]);
   } else
     value = date;
-  if (is_table_component) {
-    if ($context_items_store["sel"] != self)
+  if (is_compact) {
+    if ($context_items_store[in_context] != self)
       can_be_activated = false;
     else
       can_be_activated = true;
@@ -75,14 +110,20 @@ function get_formatted_date(d) {
     hour = "0" + hour;
   if (minutes.length < 2)
     minutes = "0" + minutes;
-  return `${year}-${month}-${day} ${hour}:${minutes}`;
+  if (type == "datetime-local")
+    return `${year}-${month}-${day} ${hour}:${minutes}`;
+  else
+    return `${year}-${month}-${day}`;
 }
-function on_changed() {
+async function on_changed() {
   if (!rValue)
     value = null;
   else
     value = new Date(rValue);
-  if (item != null) {
+  console.log("rValue", rValue, "value", value);
+  if (on_select) {
+    await on_select(value);
+  } else if (item != null) {
     if (value)
       item[a] = value.toISOString();
     else
@@ -92,22 +133,89 @@ function on_changed() {
       $data_tick_store = $data_tick_store + 1;
       push_changes();
     }
+    if (!!changed)
+      changed(value);
   }
 }
+function blur(e) {
+  if (!!on_hide_callback)
+    on_hide_callback();
+}
 </script>
 
-{#if !can_be_activated}
-    <span class="{style} ml-0.5 h-7" >{rValue}</span>
+{#if is_compact}
+    <div class="inline-block relative {line_h}">
+        <span class="dark:text-white {font_size} truncate  px-2.5 {background_class}
+                    absolute left-0 top-0 h-full" >
+            {rValue}
+        
+            {#if can_be_activated}
+                {#if type == "datetime-local"}
+                    <input  type="datetime-local" 
+                            class="datepicker-input"
+                            on:change={on_changed}
+                            bind:value={rValue}
+                            bind:this={input_element}>
+                {:else}
+                    <input  type="date" 
+                            class="datepicker-input"
+                            on:change={on_changed}
+                            bind:value={rValue}
+                            bind:this={input_element}
+                            on:blur={blur}>
+                {/if}
+            {/if}
+        </span>
+    </div>
+
 {:else}
-    <input class="  {cs} {style} {additional_class}" 
-                    type="datetime-local" 
-                    on:change={on_changed}
-                    bind:value={rValue}/>
+    {#if type == "datetime-local"}
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+                type="datetime-local" 
+                on:change={on_changed}
+                bind:value={rValue}
+                bind:this={input_element}
+        />
+    {:else}
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+                type="date" 
+                on:change={on_changed}
+                bind:value={rValue}
+                bind:this={input_element}
+        />
+    {/if}
 {/if}
 
 
+   
+
+
 <style>
     input:focus {
     outline: 0px solid transparent;
     }
-</style>
+
+    .datepicker-input{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        box-sizing: border-box;
+    }
+
+    .datepicker-input::-webkit-calendar-picker-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+    }
+
+</style>
+

package/components/date.svelte.d.ts

@@ -7,8 +7,14 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         date?: Date | undefined;
+        on_select?: undefined;
+        type?: string | undefined;
+        changed?: undefined;
         s?: string | undefined;
         c?: string | undefined;
+        compact?: boolean | undefined;
+        in_context?: string | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,5 +25,6 @@ export type DateProps = typeof __propDef.props;
 export type DateEvents = typeof __propDef.events;
 export type DateSlots = typeof __propDef.slots;
 export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
+    get show(): (event: any, hide_callback: any) => void;
 }
 export {};

package/components/menu.d.ts

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

package/components/menu.js

@@ -3,7 +3,7 @@ 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) {
+export function show_menu(around, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!!!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -11,14 +11,18 @@ export function show_menu(x, y, operations) {
             target: app_div,
             props: {}
         });
-        menu_comopnent.show(x, y, operations);
+        menu_comopnent.show(around, operations);
+    }
+    else if (menu_comopnent) {
+        if (menu_comopnent.is_visible())
+            menu_comopnent.hide();
+        else
+            menu_comopnent.show(around, operations);
     }
-    else if (menu_comopnent)
-        menu_comopnent.show(x, y, operations);
     else
         console.error('what now?');
 }
-export function show_floating_toolbar(x, y, toolbar, props = {}) {
+export function show_floating_toolbar(around, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!!!floating_container) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -26,13 +30,19 @@ export function show_floating_toolbar(x, y, toolbar, props = {}) {
             target: app_div,
             props: {}
         });
-        toolbar_component.show(x, y, toolbar, props);
+        toolbar_component.show(around, toolbar, props);
+    }
+    else if (toolbar_component) {
+        if (toolbar_component.is_visible()) {
+            toolbar_component.hide();
+        }
+        else {
+            toolbar_component.show(around, toolbar, props);
+        }
     }
-    else if (toolbar_component)
-        toolbar_component.show(x, y, toolbar, props);
     else
         console.error('what now?');
 }
-export function show_grid_menu(x, y, operations) {
-    show_floating_toolbar(x, y, Grid, { operations: operations });
+export function show_grid_menu(around, operations) {
+    show_floating_toolbar(around, Grid, { operations: operations });
 }

package/components/table/table.svelte

@@ -86,7 +86,7 @@ function show_context_menu(e, itm, cinfo2) {
     return;
   e.stopPropagation();
   e.preventDefault();
-  show_menu(e.clientX, e.clientY, menu_operations);
+  show_menu(new DOMPoint(e.clientX, e.clientY), menu_operations);
 }
 </script>
 

package/desk.svelte

@@ -16,10 +16,30 @@
             set_dark_mode_default } from './stores.js'
     
     import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
-    import { handle_select } from './utils'
+    import { handle_select, is_device_smaller_than } from './utils'
     
     export let layout;
 
+    const sizes = {
+            bottom: 240,
+            toolbar: 40,
+            operations: 40,
+            sidebar: 320
+        }
+
+    $: outerWidth = 0
+    $: innerWidth = 0
+    $: outerHeight = 0
+    $: innerHeight = 0
+
+    const media_break_sm = 640; //px	@media (min-width: 640px) { ... }
+    const media_break_md = 768; //px	@media (min-width: 768px) { ... }
+    const media_break_lg = 1024; //px	@media (min-width: 1024px) { ... }
+    const media_break_xl = 1280; //px	@media (min-width: 1280px) { ... }
+    const media_break_2xl = 1536; //px
+    let test = "ala\n    ma\n\tkota"
+
+    $: is_small = is_device_smaller_than("sm")
     
     let main_side_panel_visibility = "hidden"
     let lg_content_area_horizontal_dim = ""
@@ -54,7 +74,7 @@
         else
         {
             main_side_panel_visibility = "lg:block"
-            lg_content_area_horizontal_dim = "lg:left-[360px] lg:w-[calc(100vw-360px)]"
+            lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
         }      
     }
     
@@ -63,7 +83,6 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
-    let lg_main_side_panel_height = "lg:h-[calc(100vh-240px)]" 
     let fab_bottom = "bottom-0"
                                 
     let content_top = ""
@@ -75,34 +94,39 @@
 
         if(!has_selected_item())
             bottom_bar_visible = false;
-        
+
         if(tools_visible)
         {
             tools_visibility = "fixed"
-            content_top = "top-20 sm:top-10"
+
+            if(is_small)
+                content_top = `top-[80px] sm:top-[40px]`
+            else
+                content_top = `top-[80px] sm:top-[40px]`
+            
             if(bottom_bar_visible)
-                content_height = "h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]"    
+                content_height = `h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]`    
             else    
-                content_height = "h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]" 
+                content_height = `h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
         {
             tools_visibility = "hidden"
-            content_top = "top-10 sm:top-0"
+            content_top = `top-[40px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = "h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]"           
+                content_height = `h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]`           
             else
-                content_height = "h-[calc(100vh-40px)] sm:h-screen"
+                content_height = `h-[calc(100vh-40px)] sm:h-screen`
         }
         
         
         
         if(bottom_bar_visible)
         {
-            lg_main_sidebar_height = "lg:h-[calc(100vh-240px)]"    
+            lg_main_sidebar_height = `lg:h-[calc(100vh-240px)]`    
             bottom_bar_visibility = "fixed"
-            fab_bottom = "bottom-[240px]";
+            fab_bottom = `bottom-[240px]`;
         }
         else
         {    
@@ -113,20 +137,10 @@
         
     }
     
-    let sm_main_side_panel_width = "sm:w-[320px]"
-    let lg_main_content_height = "lg:h-[calc(100vh-280px)]" 
-
-    $: outerWidth = 0;
-    $: innerWidth = 0;
-    $: outerHeight = 0;
-    $: innerHeight = 0;
-    const media_break_sm = 640; //px	@media (min-width: 640px) { ... }
-    const media_break_md = 768; //px	@media (min-width: 768px) { ... }
-    const media_break_lg = 1024; //px	@media (min-width: 1024px) { ... }
-    const media_break_xl = 1280; //px	@media (min-width: 1280px) { ... }
-    const media_break_2xl = 1536; //px
-    let test = "ala\n    ma\n\tkota"
-
+    
+    
+   
+    
     //$: screen.width = innerWidth;  
 </script>
 
@@ -164,9 +178,12 @@
             <!--#######################################################-->
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
-            <div  class="{main_side_panel_visibility} fixed left-0 top-10 w-screen h-[calc(100vh-40px)] z-10 overflow-x-hidden 
-                            sm:left-10 sm:top-0 {sm_main_side_panel_width} sm:h-full
-                            {lg_main_sidebar_height}" >
+            <div  class="{main_side_panel_visibility} fixed 
+                            left-0  sm:left-[40px]
+                            top-[40px]  sm:top-0 
+                            h-[calc(100vh-40px)] sm:h-full {lg_main_sidebar_height}
+                            w-screen sm:w-[320px] 
+                            z-10 overflow-x-hidden">
 
                 <div class=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-4 px-0">
                     <Configurable config={layout.sidebar[visible_sidebar]}>
@@ -178,15 +195,18 @@
             <!--##  HORIZONTAL TOOLS                 ######################-->
             <!--###########################################################-->
 
-            <div  class="   {tools_visibility} left-0 top-10 w-screen h-[40px] 
-                            sm:left-[40px] sm:top-0 sm:w-[calc(100vw-40px)]    
+            <div  class="   {tools_visibility} 
+                            w-screen sm:w-[calc(100vw-40px)] 
+                            h-[40px] 
+                            left-0 sm:left-[40px]     
+                            top-[40px] sm:top-0
                             {lg_content_area_horizontal_dim}
                             z-0 overflow-hidden " >
 
                 <Operations/>
             </div>
 
-            <div class="{tools_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-20">
+            <div class="!hidden {tools_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-20">
                 <Fab/>
             </div>
 

package/horizontal.toolbar.svelte

@@ -71,7 +71,7 @@
             let sidebar = $main_sidebar_visible_store;
             if(sidebar == "*")
             {
-                if(!previously_visible_sidebar)
+                if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
                     sidebar = Object.keys(app_config.sidebar)[0];
                 else
                     sidebar = previously_visible_sidebar;
@@ -83,9 +83,14 @@
 
     function show_options(e)
     {
-        let rect = e.target.getBoundingClientRect();
-        let x = rect.left;
-        let y = rect.bottom;
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
         let options = [];
 
         if(show_sign_in_out_icons)
@@ -149,7 +154,8 @@
                     });
         }
         
-        show_menu(x, y, options);    
+        let pt = new DOMPoint(rect.left, rect.bottom)
+        show_menu(pt, options);    
     }
 
 </script>

package/index.d.ts

@@ -7,7 +7,7 @@ export { default as Layout } from './desk.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
 export { default as Checkbox } from './components/checkbox.svelte';
-export { default as Date } from './components/date.svelte';
+export { default as DatePicker } from './components/date.svelte';
 export { default as Edit } from './components/edit.field.svelte';
 export { default as FileLoader } from './components/file.loader.svelte';
 export { default as Input } from './components/inputbox.ltop.svelte';

package/index.js

@@ -11,7 +11,7 @@ export { default as Layout } from './desk.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
 export { default as Checkbox } from './components/checkbox.svelte';
-export { default as Date } from './components/date.svelte';
+export { default as DatePicker } from './components/date.svelte';
 export { default as Edit } from './components/edit.field.svelte';
 export { default as FileLoader } from './components/file.loader.svelte';
 export { default as Input } from './components/inputbox.ltop.svelte';

package/operations.svelte

@@ -1,5 +1,6 @@
 <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";
+export let mobile = false;
 $:
   update($page_toolbar_operations, $context_toolbar_operations);
 let operations = [];
@@ -25,24 +26,29 @@ function on_click(e, operation) {
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();
+  let x = rect.left;
+  let y = mobile ? rect.top : rect.bottom;
   if (operation.menu)
-    show_menu(rect.left, rect.bottom, operation.menu);
+    show_menu(rect, operation.menu);
   else if (operation.toolbar)
-    show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
+    show_floating_toolbar(rect, operation.toolbar);
   else if (operation.grid)
-    show_grid_menu(rect.left, rect.bottom, operation.grid);
+    show_grid_menu(rect, operation.grid);
 }
 </script>
 
-<div class="bg-slate-100 w-full h-10 dark:bg-slate-800 overflow-x-clip overflow-y-hidden py-0 text-xs  flex flex-row">
+<div    class="bg-slate-100 w-full h-10 dark:bg-slate-800 overflow-x-clip overflow-y-hidden py-0 text-xs flex flex-row"
+        class:flex-row-reverse={mobile}>
     
     {#each operations as operation}
         <button type="button" 
                 class="py-2.5 px-5 
                 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 active:bg-slate-300 dark:active:bg-gray-600
-                border-r border-gray-200 focus:outline-none dark:border-gray-600
+                border-gray-200 focus:outline-none dark:border-gray-600
                 inline-flex items-center"
+                class:border-r={!mobile}
+                class:border-l={mobile}
                 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>

package/operations.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        mobile?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.0.2",
+    "@humandialog/auth.svelte": "^1.0.4",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"

package/utils.d.ts

@@ -1,3 +1,4 @@
+export function is_device_smaller_than(br: any): boolean;
 export function select_item(itm: any): void;
 export function activate_item(context_level: any, itm: any, operations?: null): void;
 export function clear_active_item(context_level: any): void;
@@ -16,3 +17,9 @@ export function should_be_comapact(): boolean;
 export namespace icons {
     const symbols: null;
 }
+export namespace SCREEN_SIZES {
+    const sm: number;
+    const md: number;
+    const lg: number;
+    const xl: number;
+}

package/utils.js

@@ -4,6 +4,18 @@ import { context_items_store, context_toolbar_operations } from "./stores";
 
 export let icons = {symbols :null}
 
+export const SCREEN_SIZES = {
+    sm: 640, //px	@media (min-width: 640px) { ... }
+    md: 768, //px	@media (min-width: 768px) { ... }
+    lg: 1024, //px	@media (min-width: 1024px) { ... }
+    xl: 1280, //px	@media (min-width: 1280px) { ... }
+}
+
+export function is_device_smaller_than(br)
+{
+    return window.innerWidth < SCREEN_SIZES[br]
+}
+
 export function select_item(itm)
 {
     let data_context = get(context_items_store);
@@ -178,8 +190,7 @@ export function selectable(node, itm)
         }
         catch(err)
         {
-            console.error(err);
-            console.log(node);
+            console.error(err, node);
         }
     }};
 }

package/vertical.toolbar.svelte

@@ -76,9 +76,15 @@
 
     function show_options(e)
     {
-        let rect = e.target.getBoundingClientRect();
-        let x = rect.right;
-        let y = rect.top;
+
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
         let options = [];
 
         if(show_sign_in_out_icons)
@@ -142,7 +148,8 @@
                     });
         }
         
-        show_menu(x, y, options);    
+        let pt = new DOMPoint(rect.right, rect.top)
+        show_menu(pt, options);    
     }
     
 </script>