@humandialog/forms.svelte 0.4.36 → 0.4.38

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

@@ -1,75 +1,75 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        context?: string | undefined;
-        collection?: string | undefined;
-        self?: null | undefined;
-        objects?: null | undefined;
-        headers?: any[] | undefined;
-        fields?: any[] | undefined;
-        select?: string | undefined;
-        cinfo?: string | undefined;
-        focus?: boolean | undefined;
-        nav?: boolean | undefined;
-        c?: string | undefined;
-        typename?: string | undefined;
-        toolbar_operations?: any[] | undefined;
-        menu_operations?: any[] | undefined;
-        refresh?: (() => void) | undefined;
-        update_objects?: ((_objects: any) => void) | undefined;
-        update_self?: ((_self: any) => void) | undefined;
-        select_item?: ((itm: any, cinfo: any) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        c0: {
-            item: unknown;
-        };
-        c1: {
-            item: unknown;
-        };
-        c2: {
-            item: unknown;
-        };
-        c3: {
-            item: unknown;
-        };
-        c4: {
-            item: unknown;
-        };
-        c5: {
-            item: unknown;
-        };
-        c6: {
-            item: unknown;
-        };
-        c7: {
-            item: unknown;
-        };
-        c8: {
-            item: unknown;
-        };
-        c9: {
-            item: unknown;
-        };
-        c10: {
-            item: unknown;
-        };
-        c11: {
-            item: unknown;
-        };
-    };
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
-    get refresh(): () => void;
-    get update_objects(): (_objects: any) => void;
-    get update_self(): (_self: any) => void;
-    get select_item(): (itm: any, cinfo: any) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        collection?: string | undefined;
+        self?: null | undefined;
+        objects?: null | undefined;
+        headers?: any[] | undefined;
+        fields?: any[] | undefined;
+        select?: string | undefined;
+        cinfo?: string | undefined;
+        focus?: boolean | undefined;
+        nav?: boolean | undefined;
+        c?: string | undefined;
+        typename?: string | undefined;
+        toolbar_operations?: any[] | undefined;
+        menu_operations?: any[] | undefined;
+        refresh?: (() => void) | undefined;
+        update_objects?: ((_objects: any) => void) | undefined;
+        update_self?: ((_self: any) => void) | undefined;
+        select_item?: ((itm: any, cinfo: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        c0: {
+            item: unknown;
+        };
+        c1: {
+            item: unknown;
+        };
+        c2: {
+            item: unknown;
+        };
+        c3: {
+            item: unknown;
+        };
+        c4: {
+            item: unknown;
+        };
+        c5: {
+            item: unknown;
+        };
+        c6: {
+            item: unknown;
+        };
+        c7: {
+            item: unknown;
+        };
+        c8: {
+            item: unknown;
+        };
+        c9: {
+            item: unknown;
+        };
+        c10: {
+            item: unknown;
+        };
+        c11: {
+            item: unknown;
+        };
+    };
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+    get refresh(): () => void;
+    get update_objects(): (_objects: any) => void;
+    get update_self(): (_self: any) => void;
+    get select_item(): (itm: any, cinfo: any) => void;
+}
+export {};

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

@@ -1,35 +1,35 @@
-/** @typedef {typeof __propDef.props}  TextareaProps */
-/** @typedef {typeof __propDef.events}  TextareaEvents */
-/** @typedef {typeof __propDef.slots}  TextareaSlots */
-export default class Textarea extends SvelteComponentTyped<{
-    label?: string | undefined;
-    c?: string | undefined;
-    s?: string | undefined;
-    placeholder?: string | undefined;
-    val?: string | undefined;
-    sy?: string | undefined;
-    r?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        c?: string | undefined;
-        s?: string | undefined;
-        placeholder?: string | undefined;
-        val?: string | undefined;
-        sy?: string | undefined;
-        r?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TextareaProps */
+/** @typedef {typeof __propDef.events}  TextareaEvents */
+/** @typedef {typeof __propDef.slots}  TextareaSlots */
+export default class Textarea extends SvelteComponentTyped<{
+    label?: string | undefined;
+    c?: string | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    val?: string | undefined;
+    sy?: string | undefined;
+    r?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        c?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        val?: string | undefined;
+        sy?: string | undefined;
+        r?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tile.title.svelte.d.ts

@@ -1,29 +1,29 @@
-/** @typedef {typeof __propDef.props}  TileProps */
-/** @typedef {typeof __propDef.events}  TileEvents */
-/** @typedef {typeof __propDef.slots}  TileSlots */
-export default class Tile extends SvelteComponentTyped<{
-    [x: string]: any;
-    label?: string | undefined;
-    c?: string | undefined;
-    a?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TileProps = typeof __propDef.props;
-export type TileEvents = typeof __propDef.events;
-export type TileSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string | undefined;
-        c?: string | undefined;
-        a?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TileProps */
+/** @typedef {typeof __propDef.events}  TileEvents */
+/** @typedef {typeof __propDef.slots}  TileSlots */
+export default class Tile extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string | undefined;
+    c?: string | undefined;
+    a?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TileProps = typeof __propDef.props;
+export type TileEvents = typeof __propDef.events;
+export type TileSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        c?: string | undefined;
+        a?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/desk.svelte

@@ -17,7 +17,7 @@
     
     import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handle_select, is_device_smaller_than } from './utils'
-	import { onMount } from 'svelte';
+	import { afterUpdate, onMount } from 'svelte';
     
     export let layout;
 
@@ -86,7 +86,7 @@
         }
         else
         {
-            main_side_panel_visibility = "lg:block"
+            main_side_panel_visibility = "fixed lg:block"
             lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
         }      
     }
@@ -96,6 +96,7 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
+    let fab_visibility = "hidden"
     let fab_bottom = "bottom-0"
                                 
     let content_top = ""
@@ -110,12 +111,10 @@
 
         if(tools_visible)
         {
-            tools_visibility = "fixed"
+            tools_visibility = "hidden sm:block sm:fixed"
+            fab_visibility = "fixed sm:hidden"
 
-            if(is_small)
-                content_top = `top-[80px] sm:top-[40px]`
-            else
-                content_top = `top-[80px] sm:top-[40px]`
+            content_top = 'top-[40px] sm:top-[40px]'
             
             if(bottom_bar_visible)
                 content_height = `h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]`    
@@ -149,11 +148,7 @@
         }
         
     }
-    
-    
-    
-   
-    
+
     //$: screen.width = innerWidth;  
 </script>
 
@@ -169,7 +164,7 @@
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[40px] z-50  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
+            <header class="fixed sm:hidden w-screen top-0 h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
                     <div class=" flex flex-row justify-between    bg-slate-900   text-gray-100 ">
                         <HorizontalToolbar app_config={layout}/>
                     <div>
@@ -191,12 +186,12 @@
             <!--#######################################################-->
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
-            <div  class="{main_side_panel_visibility} fixed 
-                            left-0  sm:left-[40px]
+            <div  class="{main_side_panel_visibility}  
+                            left-[40px]  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">
+                            w-[calc(100vw-40px)] sm:w-[320px] 
+                            z-20 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]}>
@@ -204,55 +199,59 @@
                     </Configurable>
                 </div>
             </div>    
-            <!--###########################################################-->
-            <!--##  HORIZONTAL TOOLS                 ######################-->
-            <!--###########################################################-->
 
-            <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 " >
+            <section on:click|capture={auto_hide_sidebar}>
 
-                <Operations/>
-            </div>
+                <!--###########################################################-->
+                <!--##  HORIZONTAL TOOLS                 ######################-->
+                <!--###########################################################-->
 
-            <div class="!hidden {tools_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-20">
-                <Fab/>
-            </div>
+                <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-10 overflow-hidden " >
 
-            <!--#######################################################-->
-            <!--##  CONTENT                          ##################-->
-            <!--#######################################################-->
-            <div  class="fixed left-0  w-screen  
-                            sm:left-[40px]  sm:w-[calc(100vw-40px)]    
-                            {content_top}
-                            {content_height}
-                            {lg_content_area_horizontal_dim}
-                            z-0 overflow-x-hidden" 
-                            
-                            on:click={(e) => auto_hide_sidebar() } 
-                            on:keydown={(e) => auto_hide_sidebar()}>
-                    <Configurable config={layout.mainContent}>
-                        <div slot='alt'></div>
-                    </Configurable>
-            </div>    
+                    <Operations/>
+                </div>
 
+                <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
+                    <Fab/>
+                </div>
 
+                <!--#######################################################-->
+                <!--##  CONTENT                          ##################-->
+                <!--#######################################################-->
+                <div  class="fixed left-0  w-screen  
+                                sm:left-[40px]  sm:w-[calc(100vw-40px)]    
+                                {content_top}
+                                {content_height}
+                                {lg_content_area_horizontal_dim}
+                                z-0 overflow-x-hidden" 
+                                >
+                        <Configurable config={layout.mainContent}>
+                            <div slot='alt'></div>
+                        </Configurable>
+                </div>    
 
-            <!--###########################################################-->
-            <!--##  BOTTOM SIDEBAR          ###############################-->
-            <!--###########################################################-->
 
-            <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[240px] z-10 overflow-y-hidden overflow-x-auto 
-                        sm:left-[40px] sm:w-[100vw-40px] " >
-                    <Configurable config={layout.selectionDetails} >
-                        <div slot="alt"></div>
-                    </Configurable>
-                
-            </div>    
+
+                <!--###########################################################-->
+                <!--##  BOTTOM SIDEBAR          ###############################-->
+                <!--###########################################################-->
+
+                <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[240px] z-20 overflow-y-hidden overflow-x-auto 
+                            sm:left-[40px] sm:w-[100vw-40px] " >
+                        <Configurable config={layout.selectionDetails} >
+                            <div slot="alt"></div>
+                        </Configurable>
+                    
+                </div>    
+
+            </section>
+
         </div>
     </div>
 </AuthorizedView>

package/desk.svelte.d.ts

@@ -1,23 +1,23 @@
-/** @typedef {typeof __propDef.props}  DeskProps */
-/** @typedef {typeof __propDef.events}  DeskEvents */
-/** @typedef {typeof __propDef.slots}  DeskSlots */
-export default class Desk extends SvelteComponentTyped<{
-    layout: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DeskProps = typeof __propDef.props;
-export type DeskEvents = typeof __propDef.events;
-export type DeskSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        layout: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  DeskProps */
+/** @typedef {typeof __propDef.events}  DeskEvents */
+/** @typedef {typeof __propDef.slots}  DeskSlots */
+export default class Desk extends SvelteComponentTyped<{
+    layout: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DeskProps = typeof __propDef.props;
+export type DeskEvents = typeof __propDef.events;
+export type DeskSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        layout: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/form.box.svelte.d.ts

@@ -1,35 +1,35 @@
-/** @typedef {typeof __propDef.props}  FormProps */
-/** @typedef {typeof __propDef.events}  FormEvents */
-/** @typedef {typeof __propDef.slots}  FormSlots */
-export default class Form extends SvelteComponentTyped<{
-    context?: string | undefined;
-    self?: null | undefined;
-    c?: string | undefined;
-    cl?: string | undefined;
-    fit?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        context?: string | undefined;
-        self?: null | undefined;
-        c?: string | undefined;
-        cl?: string | undefined;
-        fit?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  FormProps */
+/** @typedef {typeof __propDef.events}  FormEvents */
+/** @typedef {typeof __propDef.slots}  FormSlots */
+export default class Form extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    cl?: string | undefined;
+    fit?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        cl?: string | undefined;
+        fit?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/horizontal.toolbar.svelte

@@ -2,6 +2,7 @@
     import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
     import FaSun from 'svelte-icons/fa/FaSun.svelte'
     import FaEllipsisH from 'svelte-icons/fa/FaEllipsisH.svelte'
+    import FaCog from 'svelte-icons/fa/FaCog.svelte'
     import FaTools from 'svelte-icons/fa/FaTools.svelte'
     import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
@@ -172,27 +173,23 @@
 
 </script>
 
-<div class="mr-0 flex h-10">
-    <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
-        <Icon size={6} component={icon}/>
-    </button>
-</div>
-
-<div class="ml-auto flex h-10">
-            
+<div class="ml-auto flex h-10">        
     <button
-        class="h-full w-16 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
+        class="h-full w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
         on:click={show_options}>
 
-        <Icon size={6} component={FaEllipsisH} />
+        <Icon size={4} component={FaCog} />
     </button>
+</div>
 
-    
-   
+<div class="right-0 flex h-10">
+    <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
+        <Icon size={6} component={icon}/>
+    </button>
 </div>
 
 {#if tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
-    <div  class="block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
+    <div  class="flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
         <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
             <VerticalToolbar {app_config} mobile={true}/>
         </div>    

package/horizontal.toolbar.svelte.d.ts

@@ -1,23 +1,23 @@
-/** @typedef {typeof __propDef.props}  HorizontalProps */
-/** @typedef {typeof __propDef.events}  HorizontalEvents */
-/** @typedef {typeof __propDef.slots}  HorizontalSlots */
-export default class Horizontal extends SvelteComponentTyped<{
-    app_config: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HorizontalProps = typeof __propDef.props;
-export type HorizontalEvents = typeof __propDef.events;
-export type HorizontalSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        app_config: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  HorizontalProps */
+/** @typedef {typeof __propDef.events}  HorizontalEvents */
+/** @typedef {typeof __propDef.slots}  HorizontalSlots */
+export default class Horizontal extends SvelteComponentTyped<{
+    app_config: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HorizontalProps = typeof __propDef.props;
+export type HorizontalEvents = typeof __propDef.events;
+export type HorizontalSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        app_config: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};