@humandialog/forms.svelte 0.4.12 → 0.4.14

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/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, is_device_smaller_than } from './utils'
+    
+    export let layout;
 
+    const sizes = {
+            bottom: 240,
+            toolbar: 40,
+            operations: 40,
+            sidebar: 320
+        }
 
-    export let layout;
+    $: 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,27 +137,21 @@
         
     }
     
-    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>
 
 <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)  ######################-->
@@ -160,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]}>
@@ -174,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';
@@ -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

@@ -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';
@@ -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/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.12",
+  "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"
@@ -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/utils.d.ts

@@ -1,5 +1,25 @@
+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;
+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 {
     const symbols: null;
 }
+export namespace SCREEN_SIZES {
+    const sm: number;
+    const md: number;
+    const lg: number;
+    const xl: number;
+}