@humandialog/forms.svelte 0.4.12 → 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/sidebar/sidebar.brand.svelte

@@ -0,0 +1,16 @@
+
+<script>
+    export let href = "/";
+    export let img = "";
+
+</script>
+
+<a href={href} class="flex items-center pl-2.5 mb-5">
+    {#if img}
+        <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
+    {/if}
+
+    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+        <slot/>
+    </span>
+</a>

package/components/sidebar/sidebar.brand.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    img?: string | undefined;
+    href?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        img?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.group.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Icon from '../icon.svelte'
+    import Edit from '../edit.field.svelte'
+    import {FaPlus} from 'svelte-icons/fa'
+
+    export let border = false;
+    export let inserter = undefined;
+    export let inserter_placeholder = 'New'
+
+    let border_class = border ? " pt-4 mt-4 border-t border-gray-200 dark:border-gray-700" : ""
+</script>
+
+<ul class="space-y-2 {border_class}">
+    <slot/>
+
+    {#if inserter}
+        <Edit class="p-2 text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
+            <Icon size={5} component={FaPlus} class="mr-3"/>
+        </Edit>
+    {/if}
+</ul>