@humandialog/forms.svelte 0.3.5 → 0.4.1

package/desk.svelte

@@ -0,0 +1,202 @@
+<script>
+    import HorizontalToolbar from './horizontal.toolbar.svelte'
+    import VerticalToolbar from './vertical.toolbar.svelte'
+    import Configurable from './internal/configurable.content.svelte'
+    import Operations from './operations.svelte'
+    import Fab from './components/Fab.svelte'
+        
+    import {main_sidebar_visible_store, 
+            tools_visible_store, 
+            bottom_bar_visible_store, 
+            auto_hide_sidebar,
+            has_selected_item,
+            dark_mode_store,
+            data_tick_store } from './stores.js'
+    
+    import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
+
+
+    export let layout;
+
+    
+    let main_side_panel_visibility = "hidden"
+    let lg_content_area_horizontal_dim = ""
+    
+    let visible_sidebar = "*"
+    
+    $: { visible_sidebar = $main_sidebar_visible_store
+        
+        if(visible_sidebar == "*")
+        {
+            main_side_panel_visibility = "hidden"
+            lg_content_area_horizontal_dim = ""
+        }
+        else
+        {
+            main_side_panel_visibility = "lg:block"
+            lg_content_area_horizontal_dim = "lg:left-[360px] lg:w-[calc(100vw-360px)]"
+        }      
+    }
+    
+    let tools_visibility = "hidden"
+    let tools_visible = false
+    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 = ""
+    let content_height = ""                                
+    
+    $: { tools_visible = $tools_visible_store
+        bottom_bar_visible = $bottom_bar_visible_store
+        let dts = $data_tick_store;
+
+        if(!has_selected_item())
+            bottom_bar_visible = false;
+        
+        if(tools_visible)
+        {
+            tools_visibility = "fixed"
+            content_top = "top-20 sm:top-10"
+            if(bottom_bar_visible)
+                content_height = "h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]"    
+            else    
+                content_height = "h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]" 
+               
+        }
+        else
+        {
+            tools_visibility = "hidden"
+            content_top = "top-10 sm:top-0"
+            if(bottom_bar_visible)
+                content_height = "h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]"           
+            else
+                content_height = "h-[calc(100vh-40px)] sm:h-screen"
+        }
+        
+        
+        
+        if(bottom_bar_visible)
+        {
+            lg_main_sidebar_height = "lg:h-[calc(100vh-240px)]"    
+            bottom_bar_visibility = "fixed"
+            fab_bottom = "bottom-[240px]";
+        }
+        else
+        {    
+            lg_main_sidebar_height = ""
+            bottom_bar_visibility = "hidden"
+            fab_bottom = "bottom-0"
+        }
+        
+    }
+    
+    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 class="{$dark_mode_store}">
+        <div class="bg-white dark:bg-gray-900 dark:text-white      min-h-screen h-screen">    
+            <!--###########################################################-->
+            <!--##  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" >
+                    <div class=" flex flex-row justify-between    bg-slate-900   text-gray-100 ">
+                        <HorizontalToolbar app_config={layout}/>
+                    <div>
+            </header>        
+
+
+            <!--HorizontalToolbar /-->
+            <!--#######################################################-->
+            <!--##  VERTICAL TOOLBAR                 ##################-->
+            <!--#######################################################-->
+            <div  class="hidden sm:block fixed left-0 top-0 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={layout}/>
+                </div>    
+            </div>
+
+            <!--VerticalToolbar /-->
+
+            <!--#######################################################-->
+            <!--##  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=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-4 px-0">
+                    <Configurable config={layout.sidebar[visible_sidebar]}>
+                        <div slot='alt'></div>
+                    </Configurable>
+                </div>
+            </div>    
+            <!--###########################################################-->
+            <!--##  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)]    
+                            {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">
+                <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" 
+                            
+                            on:click={(event) => {
+                                auto_hide_sidebar()}} on:keydown={(event) => {
+                                auto_hide_sidebar()}}>
+                    <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>    
+        </div>
+    </div>
+</AuthorizedView>

package/desk.svelte.d.ts

@@ -0,0 +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 {};

package/horizontal.toolbar.svelte

@@ -0,0 +1,150 @@
+<script>
+    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 FaTools from 'svelte-icons/fa/FaTools.svelte'
+    import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
+    import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
+    import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
+
+    import {
+        dark_mode_store,
+        toggle_sidebar,
+        show_sidebar,
+        hide_sidebar,
+        tools_visible_store,
+        bottom_bar_visible_store,
+        right_sidebar_visible_store,
+        main_sidebar_visible_store
+    } from "./stores.js";
+    import Icon from './components/icon.svelte';
+    import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
+    
+
+    export let app_config;
+    
+    let tabs = new Array();
+    let config = null;
+    let has_selection_details = false;
+    let has_horizontal_tools = false;
+
+    let show_sign_in_out_icons = false;
+    let is_logged_in = false;
+    let sign_in_href = '';
+    let sign_out_href = '';
+
+    $:
+    {
+        config = app_config.mainToolbar;
+        has_selection_details = app_config.selectionDetails;
+        has_horizontal_tools = app_config.horizontalTools;
+        is_logged_in = $session.is_active;
+        show_sign_in_out_icons = app_config.auth ? true : false;
+        sign_in_href = $signin_href;
+        sign_out_href = $signout_href;
+
+        tabs = new Array();
+
+        Object.keys(app_config.sidebar).forEach( (key) =>    
+            { 
+                const ctab = app_config.sidebar[key];
+                const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
+                if(can_show)
+                    tabs.push({key: key, icon: ctab.icon}); 
+            });
+
+        // there is no current visible sidebar
+        if($main_sidebar_visible_store != '*')
+        {
+            if(tabs.every( (e) => e.key != $main_sidebar_visible_store))
+            {
+                if(tabs.length)
+                    show_sidebar(tabs[0].key);
+                else
+                    hide_sidebar();
+            }
+        }
+    }
+
+</script>
+
+<div class="mr-0 flex h-10">
+    {#each tabs as tab}
+        <button type="button" class=" w-16 h-full flex justify-center items-center  hover:bg-orange-500"
+            class:text-blue-300={$main_sidebar_visible_store == tab.key}
+            on:click={()=> (toggle_sidebar(tab.key))}>
+            
+            <Icon size={6} component={tab.icon}/>
+        </button>
+    {/each}
+</div>
+
+<div class="ml-auto flex h-10">
+    
+    {#if show_sign_in_out_icons }
+        {#if !is_logged_in}
+            <a  href={sign_in_href} class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500">
+                <Icon size={6} component={FaSignInAlt}/>
+            </a> 
+        {:else}
+            <a  href={sign_out_href} class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500">
+                <Icon size={6} component={FaSignOutAlt}/>
+            </a>
+        {/if}
+    {/if}
+
+    {#if has_horizontal_tools}
+        <button
+            class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500"
+            class:text-blue-300={$tools_visible_store}
+            on:click={()=> ($tools_visible_store = !$tools_visible_store)}
+            >
+            <Icon size={6} component={FaTools}/>
+        </button>   
+    {/if}
+
+    {#if !config || config.darkMode }
+        {#if $dark_mode_store == ''}
+        <button
+            class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500"
+            on:click={()=> ($dark_mode_store = 'dark')}
+            >
+            <div class="w-6 h-6">
+                <FaMoon />
+            </div>
+        </button>
+        {:else}
+        <button
+            class="h-full w-16 px-0 flex justify-center items-center   text-slate-100 hover:bg-orange-500"
+            on:click={()=> ($dark_mode_store = '')}
+            >
+            <div class="w-6 h-6">
+                <FaSun />
+            </div>
+        </button>
+        {/if}
+    {/if}
+
+    {#if !config || config.gotoRoot }
+        <a href='#/'>
+        <button
+            class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500"
+            >
+            <Icon size={6} component={GoPrimitiveDot} />
+        </button>
+        </a>
+    {/if}
+   
+    {#if has_selection_details}
+        <button
+            class="h-full w-16 px-0 flex justify-center items-center   text-slate-100  hover:bg-orange-500"
+            class:text-blue-300={$bottom_bar_visible_store}
+            on:click={()=> ($bottom_bar_visible_store = !$bottom_bar_visible_store)}
+            >
+            <div class="w-6 h-6">
+                <FaEllipsisH />
+            </div>
+        </button>
+    {/if}
+   
+</div>

package/horizontal.toolbar.svelte.d.ts

@@ -0,0 +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 {};

package/index.d.ts

@@ -2,7 +2,9 @@ export { default as Page } from "./page.svelte";
 export { default as Tile } from "./tile.svelte";
 export { default as Row } from "./tiles.row.svelte";
 export { default as Box } from "./form.box.svelte";
-export { default as Icon } from "./icon.svelte";
+export { default as Operations } from './operations.svelte';
+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';
@@ -19,3 +21,9 @@ export { default as Combo } from './components/combo/combo.svelte';
 export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
+export { default as Spinner } from './components/delayed.spinner.svelte';
+export { default as Menu } from './components/contextmenu.svelte';
+export { show_menu } from './components/menu';
+export { default as Fab } from './components/Fab.svelte';
+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

@@ -5,8 +5,10 @@ export { default as Tile } from "./tile.svelte";
 export { default as Row } from "./tiles.row.svelte";
 export { default as Box } from "./form.box.svelte";
 //export { default as TilesVerticalRow } from "./tiles.vertical.row.svelte";
+export { default as Operations } from './operations.svelte';
+export { default as Layout } from './desk.svelte';
 // @ts-ignore
-export { default as Icon } from "./icon.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';
@@ -23,3 +25,9 @@ export { default as Combo } from './components/combo/combo.svelte';
 export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
+export { default as Spinner } from './components/delayed.spinner.svelte';
+export { default as Menu } from './components/contextmenu.svelte';
+export { show_menu } from './components/menu';
+export { default as Fab } from './components/Fab.svelte';
+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/internal/configurable.content.svelte

@@ -0,0 +1,81 @@
+<script>
+    import Router from 'svelte-spa-router'
+    import {wrap} from 'svelte-spa-router/wrap'
+    import Loading from './loading.svelte'
+    
+    export let config;
+    
+    let component = null;
+    let props = {};
+    let routes = null;
+    
+    $: {
+        if(config)
+        {
+            if(config.props)
+                props = config.props;
+
+            if(config.module)
+            {
+                import(config.module).then( (module) => { 
+                                                            component = module.default || module; 
+                                                        } );
+            }
+            else if(config.component)
+                component = config.component;
+            else if(config.routes)
+            {
+                routes = new Map();
+                Object.keys(config.routes).forEach((path) => 
+                {
+                    const route_element = config.routes[path];
+                    
+                    if(route_element.component)
+                    {
+                        routes.set(path, wrap({
+                            component: route_element.component,
+                            props: route_element.props,
+                            conditions: route_element.conditions
+                        }))
+                    }
+                    else if(route_element.module)
+                    {
+                        routes.set(path, wrap({
+                            asyncComponent: () => import(route_element.module),
+                            loadingComponent: Loading,
+                            loadingParams: { message: 'Loading the route '+ route_element.module },
+                            props: route_element.props,
+                            conditions: route_element.conditions
+                        }))
+                    }
+                })
+            }
+            else
+            {
+                component = null;
+                props = {};
+                routes = null;
+            }
+        }
+        else
+        {
+            component = null;
+            props = {};
+            routes = null;
+        }
+    }
+  
+</script>
+
+
+{#if routes}
+    <Router {routes}/>
+{:else if component}
+    <svelte:component this={component} {...props}/>
+{:else if config && config.module}
+    <p>Loading component...</p>
+{:else}
+    <slot name="alt" />
+{/if}
+
+

package/internal/configurable.content.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ConfigurableProps */
+/** @typedef {typeof __propDef.events}  ConfigurableEvents */
+/** @typedef {typeof __propDef.slots}  ConfigurableSlots */
+export default class Configurable extends SvelteComponentTyped<{
+    config: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    alt: {};
+}> {
+}
+export type ConfigurableProps = typeof __propDef.props;
+export type ConfigurableEvents = typeof __propDef.events;
+export type ConfigurableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        config: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        alt: {};
+    };
+};
+export {};

package/internal/loading.svelte

@@ -0,0 +1,6 @@
+<script>
+    export let params
+</script>
+
+
+<h2>Loading…</h2>

package/internal/loading.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LoadingProps */
+/** @typedef {typeof __propDef.events}  LoadingEvents */
+/** @typedef {typeof __propDef.slots}  LoadingSlots */
+export default class Loading extends SvelteComponentTyped<{
+    params: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LoadingProps = typeof __propDef.props;
+export type LoadingEvents = typeof __propDef.events;
+export type LoadingSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        params: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/operations.svelte

@@ -0,0 +1,35 @@
+<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
+$:
+  update($page_toolbar_operations, $context_toolbar_operations);
+let operations = [];
+function update(...args) {
+  if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
+    operations = $context_toolbar_operations;
+  else
+    operations = $page_toolbar_operations;
+}
+function on_click(operation) {
+  if (!operation)
+    return;
+  if (!operation.action)
+    return;
+  let focused_item = null;
+  if ($context_items_store.focused)
+    focused_item = $context_items_store[$context_items_store.focused];
+  operation.action(focused_item);
+}
+</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">
+    
+    {#each operations as operation}
+        <button type="button" class="py-2.5 px-5 text-xs font-medium text-gray-900 bg-slate-100 hover:bg-slate-200 border-r border-gray-200 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"
+                on:click={(e) => {on_click(operation)}}>
+            <div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
+            <span class="ml-1">{operation.caption}</span>
+        </button>    
+    {/each}
+
+    
+
+</div>

package/operations.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OperationsProps = typeof __propDef.props;
+export type OperationsEvents = typeof __propDef.events;
+export type OperationsSlots = typeof __propDef.slots;
+export default class Operations extends SvelteComponentTyped<OperationsProps, OperationsEvents, OperationsSlots> {
+}
+export {};