@humandialog/forms.svelte 0.4.11 → 0.4.13

package/components/Grid.menu.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {context_items_store} from '..'
+    import {context_items_store} from '../stores.js'
 
     export let operations = []
     export let hide = undefined;

package/components/combo/combo.svelte

@@ -31,23 +31,36 @@ let filtered_source = null;
 let mutation_observer = null;
 let highlighted_option = null;
 let item = null;
+let root_element;
 let label_mb = "mb-1";
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
+let font_size = "text-sm";
+let line_h = "h-5";
 switch (s) {
   case "md":
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
+    font_size = "text-sm";
+    line_h = "h-5";
+    break;
+  case "xs":
+    label_mb = "mb-0.5";
+    input_pt = "pt-0.5";
+    input_pb = "pb-0.5";
+    font_size = "text-xs";
+    line_h = "h-4";
     break;
 }
+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 text-sm 
+  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`;
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 ${background_class}`;
 else
-  appearance_class = `   bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
+  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 
                                 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
 let cs = c ? parse_width_directive(c) : "col-span-1";
@@ -76,12 +89,6 @@ afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
 });
-function toggle() {
-  if (is_dropdown_open)
-    hide();
-  else
-    show();
-}
 function dropdown_action(node) {
   if (is_dropdown_open)
     dropdown_height = node.getBoundingClientRect().height;
@@ -94,13 +101,22 @@ function dropdown_action(node) {
     }
   };
 }
-function show() {
+let on_hide_callback = void 0;
+export function show(event, hide_callback) {
   if (!can_be_activated)
     return;
   if (!combo)
     return;
   if (is_dropdown_open)
     return;
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  if (!!hide_callback)
+    on_hide_callback = hide_callback;
+  else
+    on_hide_callback = void 0;
   let client_rect;
   client_rect = new DOMRect();
   client_rect.x = 0;
@@ -112,6 +128,8 @@ function show() {
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
   let palette_width_px = rect.width;
+  if (palette_width_px < 120)
+    palette_width_px = 120;
   let preferred_palette_height = dropdown_height > 0 ? dropdown_height : palette_max_height_px;
   let preferred_palette_width = palette_width_px;
   let x = 0, y = 0;
@@ -131,11 +149,11 @@ function show() {
     y = rect.y;
     show_above = true;
   } else
-    show_fullscreen = true;
-  if (false) {
+    y = rect.y + rect.height;
+  if (show_fullscreen) {
     dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
   } else {
-    dropdown_position = `width: ${rect.width}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
+    dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
@@ -163,12 +181,15 @@ function show() {
     highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
   }
 }
-function hide() {
+export function hide() {
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
   combo_text = get_combo_text();
-  textbox.innerHtml = combo_text;
+  if (!!textbox)
+    textbox.innerHtml = combo_text;
+  if (!!on_hide_callback)
+    on_hide_callback();
   tick_request_internal = tick_request_internal + 1;
 }
 function selected_item(itm, a2) {
@@ -420,6 +441,11 @@ function setup_view(...args) {
   if (textbox)
     textbox.innerHTML = combo_text;
 }
+function on_focus_out(e) {
+  if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
+  } else
+    hide();
+}
 </script>
 
 <slot/>     <!-- definition slot first -->
@@ -427,16 +453,18 @@ function setup_view(...args) {
 
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
-
+    
 <div class={cs}
-    on:focusout={(e) => setTimeout(() => {hide()}, 100)}>
+    on:focusout={on_focus_out}
+    bind:this={root_element}>
     {#if !is_compact}
         <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click|preventDefault|stopPropagation={show}
+            on:click={show}
             class="{appearance_class} flex flex-row content-between items-center"
+            class:cursor-pointer={can_be_activated && is_compact}
          >
             
         <div class="flex-1 flex flex-row items-center">
@@ -450,16 +478,19 @@ function setup_view(...args) {
                 {/if}
             {/if}
 
+            
             <p  bind:this={textbox}
-                class="ml-2 dark:text-white"
+                class="dark:text-white {line_h}"
+                class:ml-2={icon}
                 class:text-gray-400={ (!is_dropdown_open) && (!sel_item)}
                 class:text-gray-700={ is_dropdown_open || sel_item }
+                class:w-10={!combo_text}
                 contenteditable={is_dropdown_open}
                 on:keydown={on_keydown}>
                 {combo_text}</p>
         </div>
         
-        {#if can_be_activated }
+        {#if can_be_activated && !is_compact }
             <Icon size={3} component={FaChevronDown} class="flex-none text-gray-700 dark:text-gray-200"/>
         {/if}
     </div>
@@ -487,7 +518,8 @@ function setup_view(...args) {
                             class:dark:bg-gray-700={highlighted_option == item}
                             class:dark:hover:bg-gray-700={highlighted_option == item}
                             on:mousemove={() => on_mouse_move(item)}
-                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}>
+                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                            tabindex="-1">
 
                             {#if icon}
                                 {#if item.Color}

package/components/combo/combo.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         c?: string | undefined;
         compact?: boolean | undefined;
         in_context?: string | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+        hide?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,5 +28,7 @@ export type ComboProps = typeof __propDef.props;
 export type ComboEvents = typeof __propDef.events;
 export type ComboSlots = typeof __propDef.slots;
 export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+    get hide(): () => void;
 }
 export {};

package/components/delayed.spinner.svelte

@@ -1,6 +1,43 @@
 <script>import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
+export let color = "blue";
+export let size = 8;
 export let delay = 100;
+let user_class = $$props.class ?? "";
+const sizes = {
+  1: "w-1 h-1",
+  2: "w-2 h-2",
+  3: "w-3 h-3",
+  4: "w-4 h-4",
+  5: "w-5 h-5",
+  6: "w-6 h-6",
+  7: "w-7 h-7",
+  8: "w-8 h-8",
+  9: "w-9 h-9",
+  10: "w-10 h-10",
+  11: "w-11 h-11",
+  12: "w-12 h-12",
+  14: "w-14 h-14",
+  16: "w-16 h-16",
+  20: "w-20 h-20",
+  24: "w-24 h-24",
+  28: "w-28 h-28",
+  32: "w-32 h-32",
+  36: "w-36 h-36",
+  40: "w-40 h-40"
+};
+let iconsize = sizes[size];
+const colors = {
+  blue: "fill-blue-600",
+  gray: "fill-gray-600 dark:fill-gray-300",
+  green: "fill-green-500",
+  red: "fill-red-600",
+  yellow: "fill-yellow-400",
+  pink: "fill-pink-600",
+  purple: "fill-purple-600",
+  white: "fill-white"
+};
+let fillColorClass = colors[color];
 let visible = false;
 onMount(() => {
   visible = false;
@@ -14,5 +51,18 @@ onMount(() => {
 
 
 {#if visible}
-    <Spinner/>
+    <svg
+        role="status"
+        class='inline -mt-px animate-spin dark:text-gray-600 {iconsize} text-gray-300 {fillColorClass} {user_class}'
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+
+            <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+            <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+    </svg>
 {/if}

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

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        color?: string | undefined;
+        size?: number | undefined;
         delay?: number | undefined;
     };
     events: {

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

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

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>

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

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    inserter?: any;
+    border?: boolean | undefined;
+    inserter_placeholder?: 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: {
+        inserter?: any;
+        border?: boolean | undefined;
+        inserter_placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.item.svelte

@@ -0,0 +1,60 @@
+<script>import Icon from "../icon.svelte";
+import { context_items_store, auto_hide_sidebar } from "../../stores";
+import {
+  selectable as _selectable,
+  is_selected,
+  editable as _editable
+} from "../../utils";
+export let href;
+export let icon = void 0;
+export let active = false;
+export let selectable = void 0;
+export let editable = void 0;
+$:
+  context_data = $context_items_store;
+let user_class = $$props.class ?? "";
+function selectable_if_needed(node, selectable2) {
+  if (selectable2)
+    _selectable(node, selectable2);
+}
+function selected(itm, context_data2) {
+  if (is_selected(itm))
+    return true;
+  else
+    return false;
+}
+function editable_if_needed(node, editable2) {
+  if (editable2)
+    _editable(node, editable2);
+}
+</script>
+
+<li>
+    <a
+        href={href}
+        on:click={ (e) => auto_hide_sidebar() } 
+        on:contextmenu
+        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
+        class:bg-gray-200={active}
+        class:dark:bg-gray-700={active}
+        use:selectable_if_needed={selectable}
+        class:selected={selected(selectable, context_data)}
+                            >
+            {#if icon}
+                <Icon size={5} component={icon}/>
+            {/if}
+            <span   class="ml-3"
+                    use:editable_if_needed={editable}>
+                <slot/>
+            </span>
+    </a>
+</li>
+
+
+<style>
+    .selected {
+    border-width: 2px;
+    --tw-border-opacity: 1 !important;
+    border-color: rgb(147 197 253 / var(--tw-border-opacity)) !important
+}
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        icon?: any | undefined;
+        active?: boolean | undefined;
+        selectable?: any | undefined;
+        editable?: any | undefined;
+    };
+    events: {
+        contextmenu: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+}
+export {};

package/components/sidebar/sidebar.svelte

@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<aside class="w-full" aria-label="Sidebar">
+    <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+        <slot/>
+    </div>
+</aside>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [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: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

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

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

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

package/desk.svelte

@@ -16,8 +16,8 @@
             set_dark_mode_default } from './stores.js'
     
     import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
-
-
+    import { handle_select } from './utils'
+    
     export let layout;
 
     
@@ -133,7 +133,11 @@
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
 
 <AuthorizedView>
-    <div id="__hd_svelte_layout_root" class="{$dark_mode_store}">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div    id="__hd_svelte_layout_root" class="{$dark_mode_store}"
+            on:click={handle_select} 
+            on:contextmenu={handle_select}>
+
         <div class="bg-white dark:bg-gray-900 dark:text-white      min-h-screen h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->

package/form.box.svelte.d.ts

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

package/index.d.ts

@@ -24,5 +24,10 @@ export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
+export { default as Sidebar } from './components/sidebar/sidebar.svelte';
+export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
+export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
+export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { select_item, activate_item, clear_active_item, is_active, is_selected, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores';

package/index.js

@@ -29,5 +29,10 @@ export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
 export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
+export { default as Sidebar } from './components/sidebar/sidebar.svelte';
+export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
+export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
+export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { select_item, activate_item, clear_active_item, is_active, is_selected, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -76,6 +76,10 @@
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
     "./components/menu": "./components/menu.js",
     "./components/radio.svelte": "./components/radio.svelte",
+    "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
+    "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
+    "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",
+    "./components/sidebar/sidebar.svelte": "./components/sidebar/sidebar.svelte",
     "./components/simple.table.svelte": "./components/simple.table.svelte",
     "./components/table/column.svelte": "./components/table/column.svelte",
     "./components/table/item.svelte": "./components/table/item.svelte",

package/page.row.svelte.d.ts

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

package/page.svelte

@@ -95,9 +95,15 @@
         if(!clears_context)
             return;
 
+        let contexts = clears_context.split(' ');
+        contexts.forEach(c => 
+        {
+            $context_items_store[c] = null;
+            $context_info_store[c] = '';
+        })
+
         e.stopPropagation();
-        $context_items_store[clears_context] = null;
-        $context_info_store[clears_context] = '';
+       
         $context_toolbar_operations = [];
         $data_tick_store = $data_tick_store + 1;
     }

package/page.svelte.d.ts

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

package/tile.svelte.d.ts

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

package/tiles.row.svelte.d.ts

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

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

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

package/utils.d.ts

@@ -1,3 +1,16 @@
+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;
+export function is_selected(itm: any): boolean;
+export function is_active(context_level: any, itm: any): boolean;
+export function editable(node: any, action: any): {
+    destroy(): void;
+};
+export function start_editing(element: any, finish_callback: any): void;
+export function selectable(node: any, itm: any): {
+    destroy(): void;
+};
+export function handle_select(e: any): void;
 export function parse_width_directive(c: any): string;
 export function should_be_comapact(): boolean;
 export namespace icons {

package/utils.js

@@ -1,7 +1,219 @@
-import { getContext } from "svelte";
+import { getContext, tick } from "svelte";
+import {get} from 'svelte/store'
+import { context_items_store, context_toolbar_operations } from "./stores";
 
 export let icons = {symbols :null}
 
+export function select_item(itm)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm;
+    data_context.focused = 'sel';
+    context_items_store.set( {...data_context} )
+}
+
+export function activate_item(context_level, itm, operations=null)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm; //null;
+    data_context[context_level] = itm;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    if(operations && Array.isArray(operations))
+        context_toolbar_operations.set( [...operations] )
+}
+
+export function clear_active_item(context_level)
+{
+    let data_context = get(context_items_store);
+    data_context[context_level] = null;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    context_toolbar_operations.set( [] )
+}
+
+export function is_selected(itm)
+{
+    let data_context = get(context_items_store);
+    if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function is_active(context_level, itm)
+{
+    let data_context = get(context_items_store);
+    if(data_context != undefined && data_context[context_level] != undefined && data_context[context_level] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function editable(node, action)
+{
+    const org_text = node.textContent;
+    const blur_listener = async (e) =>
+    {
+        await finish_editing(true);
+    }
+
+    const key_listener = async (e) =>
+    {
+        switch(e.key)
+        {
+        case 'Esc':
+        case 'Escape':
+            await finish_editing(true);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+        case 'Enter':
+            await finish_editing(false);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+        }
+    }
+
+    const finish_editing = async (cancel) =>
+    {
+        node.removeEventListener("blur", blur_listener);
+        node.removeEventListener("keydown", key_listener);
+        node.contentEditable = "false"
+
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+
+        if(cancel)
+        {
+            node.innerHTML = org_text;
+        }
+        else if(action)
+        {
+            await action(node.textContent)
+        }
+
+        node.dispatchEvent(new Event("finish"))
+        node.removeEventListener("finish", (e) => {});
+    }
+
+    const edit_listener = async (e) =>
+    {
+        //console.log('Edit event fired:', itm, "node", node)
+        node.contentEditable = "true"
+        node.addEventListener("blur", blur_listener);
+        node.addEventListener("keydown", key_listener);
+        
+        node.focus();
+        
+        await tick();
+        let range = document.createRange();
+        range.selectNodeContents(node);
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+    }
+
+    node.addEventListener("edit", edit_listener);
+    node.classList.add("editable")
+    node.classList.add("focus:outline-none")
+    return {
+        destroy() {
+            node.removeEventListener("edit", edit_listener)
+            node.classList.remove("editable")
+            node.contentEditable = "false"
+        }};
+}
+
+export function start_editing(element, finish_callback)
+{
+    let editable_node = null;
+    
+    if(element.classList.contains("editable"))
+        editable_node = element;
+    else
+    {
+        let editables = element.getElementsByClassName("editable");
+        if(editables && editables.length > 0)
+            editable_node = editables[0];
+    }
+
+    if(editable_node)
+    {
+        if(editable_node.contentEditable == "true")
+            return;
+
+        if(finish_callback)
+        {
+            editable_node.addEventListener("finish", (e) => {finish_callback()})
+        }
+
+        const edit_event = new Event("edit")
+        editable_node.dispatchEvent(edit_event)
+    }
+}
+
+export function selectable(node, itm)
+{
+    const select_listener = (e) =>
+    {
+        select_item(itm);
+    }
+
+    node.setAttribute("selectable", "true")
+    node.addEventListener("select", select_listener);
+
+    return {
+    destroy() {
+        node.removeEventListener("select", select_listener)
+        try{
+            node.removeAttribute("selectable")
+        }
+        catch(err)
+        {
+            console.error(err);
+            console.log(node);
+        }
+    }};
+}
+
+export function handle_select(e)
+{
+    let node = e.target;
+    if(!node)
+    {
+        select_item(null);
+        return;
+    }
+
+    let selection_node = null;
+    
+    while(!!node)
+    {
+        if(node.hasAttribute("selectable"))
+        {
+            selection_node = node;
+            break;
+        }
+
+        node = node.parentElement;
+    }
+
+    if(selection_node)
+        selection_node.dispatchEvent(new Event("select"))
+    else
+        select_item(null);
+}
+
+
+
 export function parse_width_directive(c)
 {   
     let cs = '';