@humandialog/forms.svelte 0.3.4 → 0.4.1

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^1.0.0-next.90",
     "@sveltejs/kit": "^1.0.0-next.587",
     "@sveltejs/package": "^1.0.0-next.6",
+    "@tailwindcss/typography": "^0.5.10",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.15",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "postcss": "^8.4.29",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
+    "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
     "vite": "^4.0.0"
@@ -24,7 +28,8 @@
   "dependencies": {
     "@humandialog/auth.svelte": "^1.0.2",
     "flowbite-svelte": "^0.29.13",
-    "svelte-icons": "^2.1.0"
+    "svelte-icons": "^2.1.0",
+    "svelte-spa-router": "^3.3.0"
   },
   "keywords": [
     "svelte",
@@ -52,7 +57,9 @@
     "./components/combo/combo.source.svelte": "./components/combo/combo.source.svelte",
     "./components/combo/combo.svelte": "./components/combo/combo.svelte",
     "./components/combo/combo": "./components/combo/combo.js",
+    "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
+    "./components/delayed.spinner.svelte": "./components/delayed.spinner.svelte",
     "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",
     "./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
     "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
@@ -60,9 +67,12 @@
     "./components/document/internal/Selection_range": "./components/document/internal/Selection_range.js",
     "./components/document/rich.edit.svelte": "./components/document/rich.edit.svelte",
     "./components/edit.field.svelte": "./components/edit.field.svelte",
+    "./components/Fab.svelte": "./components/Fab.svelte",
     "./components/file.loader.svelte": "./components/file.loader.svelte",
+    "./components/icon.svelte": "./components/icon.svelte",
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
+    "./components/menu": "./components/menu.js",
     "./components/radio.svelte": "./components/radio.svelte",
     "./components/simple.table.svelte": "./components/simple.table.svelte",
     "./components/table/column.svelte": "./components/table/column.svelte",
@@ -71,9 +81,13 @@
     "./components/table/table": "./components/table/table.js",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
     "./components/tile.title.svelte": "./components/tile.title.svelte",
+    "./desk.svelte": "./desk.svelte",
     "./form.box.svelte": "./form.box.svelte",
-    "./icon.svelte": "./icon.svelte",
+    "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",
     ".": "./index.js",
+    "./internal/configurable.content.svelte": "./internal/configurable.content.svelte",
+    "./internal/loading.svelte": "./internal/loading.svelte",
+    "./operations.svelte": "./operations.svelte",
     "./page.row.svelte": "./page.row.svelte",
     "./page.svelte": "./page.svelte",
     "./stores": "./stores.js",
@@ -81,7 +95,8 @@
     "./tiles.row.svelte": "./tiles.row.svelte",
     "./tiles.vertical.row.svelte": "./tiles.vertical.row.svelte",
     "./updates": "./updates.js",
-    "./utils": "./utils.js"
+    "./utils": "./utils.js",
+    "./vertical.toolbar.svelte": "./vertical.toolbar.svelte"
   },
   "svelte": "./index.js"
 }

package/page.svelte

@@ -1,4 +1,14 @@
 <script>
+    import { setContext, onMount } from 'svelte';
+    import {
+        context_items_store,
+        data_tick_store,
+        context_types_store,
+        context_info_store,
+        context_toolbar_operations,
+        page_toolbar_operations     } from './stores.js'
+    
+
     export let context = "data"
     export let self = null
     export let typename = '';
@@ -7,17 +17,11 @@
     export let cl =
         "w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0" // border-green-500
     export let c = ''
-    import {
-        writable
-    } from 'svelte/store';
-    import {
-        setContext
-    } from 'svelte';
-    import {
-        context_items_store,
-        data_tick_store,
-        context_types_store
-    } from './stores.js'
+    
+    export let toolbar_operations = [];
+    export let clears_context = '';
+
+    
     switch (c) {
         case 'main':
             cl = "w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0"
@@ -28,6 +32,12 @@
         default:
             //NOP    
     }
+
+    onMount(() => {
+            $page_toolbar_operations = [...toolbar_operations]
+            return () => { $page_toolbar_operations = [] }
+    })
+
     setContext('ctx', context)
     let item = null;
     let visibilty = "hidden"
@@ -74,9 +84,21 @@
             //console.log("--------------")
         }
     }
+
+    function clear_selection(e)
+    {
+        if(!clears_context)
+            return;
+
+        e.stopPropagation();
+        $context_items_store[clears_context] = null;
+        $context_info_store[clears_context] = '';
+        $context_toolbar_operations = [];
+        $data_tick_store = $data_tick_store + 1;
+    }
 </script>
 
-<div class="{visibilty} {cl} bg-slate-100 dark:bg-slate-800 ">
+<div class="bg-slate-100 dark:bg-slate-800 {visibilty} {cl}" on:click={clear_selection}>
     {#if visibilty == "" }
         <slot/>
     {/if}

package/page.svelte.d.ts

@@ -9,6 +9,8 @@ export default class Page extends SvelteComponentTyped<{
     typename?: string | undefined;
     focused_only?: boolean | undefined;
     in_context?: string | undefined;
+    toolbar_operations?: any[] | undefined;
+    clears_context?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -28,6 +30,8 @@ declare const __propDef: {
         typename?: string | undefined;
         focused_only?: boolean | undefined;
         in_context?: string | undefined;
+        toolbar_operations?: any[] | undefined;
+        clears_context?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/stores.d.ts

@@ -1,3 +1,10 @@
+export function has_selected_item(): boolean;
+export function has_data_item(): boolean;
+export function restore_defults(): void;
+export function toggle_sidebar(index: any): void;
+export function auto_hide_sidebar(): void;
+export function hide_sidebar(): void;
+export function show_sidebar(index: any): void;
 export const data_tick_store: import("svelte/store").Writable<number>;
 export const context_items_store: import("svelte/store").Writable<{
     focused: string;
@@ -13,3 +20,11 @@ export const context_types_store: import("svelte/store").Writable<{
     data: null;
     sel: null;
 }>;
+export const context_toolbar_operations: import("svelte/store").Writable<never[]>;
+export const page_toolbar_operations: import("svelte/store").Writable<never[]>;
+export const dark_mode_store: import("svelte/store").Writable<any>;
+export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
+export const tools_visible_store: import("svelte/store").Writable<any>;
+export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
+export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
+export const visible_property_tab_store: import("svelte/store").Writable<string>;

package/stores.js

@@ -4,4 +4,75 @@ import {writable, get} from 'svelte/store';
 export const data_tick_store = writable(1);
 export const context_items_store = writable({focused:'', data: null, sel: null})
 export const context_info_store = writable({data: '', sel: ''})
-export const context_types_store = writable({focused:'', data: null, sel: null})
+export const context_types_store = writable({focused:'', data: null, sel: null})
+export const context_toolbar_operations = writable([]);
+export const page_toolbar_operations = writable([]);
+
+export function has_selected_item()
+{
+    let itm = get(context_items_store).sel
+    return itm !== null && itm !== undefined;
+}
+
+export function has_data_item()
+{
+    let itm = get(context_items_store).data
+    return itm !== null && itm !== undefined;
+}
+
+
+export const dark_mode_store = writable( localStorage.dark_mode || '')
+dark_mode_store.subscribe( (value) => {  localStorage.dark_mode = value } );
+
+export const main_sidebar_visible_store = writable(sessionStorage.main_sidebar_visible_store || '*');
+main_sidebar_visible_store.subscribe( (value) => { sessionStorage.main_sidebar_visible_store = value });
+
+export const tools_visible_store = writable ((sessionStorage.tools_visible_store && sessionStorage.tools_visible_store == 'true') || false);
+tools_visible_store.subscribe( (value) => { sessionStorage.tools_visible_store = (value ? 'true' : '') } );
+
+export const bottom_bar_visible_store = writable( (sessionStorage.bottom_bar_visible_store && sessionStorage.bottom_bar_visible_store == 'true') || false);
+bottom_bar_visible_store.subscribe( (value) => { sessionStorage.bottom_bar_visible_store = (value ? 'true' : '') } );
+
+export const right_sidebar_visible_store = writable(false)
+export const visible_property_tab_store = writable('');
+
+export function restore_defults()
+{
+    main_sidebar_visible_store.set('*');
+    tools_visible_store.set(false);
+    bottom_bar_visible_store.set(false);
+    right_sidebar_visible_store.set(false);
+    visible_property_tab_store.set('');
+}
+
+export function toggle_sidebar(index)
+{
+    //console.log("ts: " + index)
+    if(get(main_sidebar_visible_store) == index)
+        main_sidebar_visible_store.set('*')
+    else
+        main_sidebar_visible_store.set(index)
+}
+
+export function auto_hide_sidebar()
+{
+//    console.log("sw: " + screen.width)
+    
+    if(screen.width < 1024)
+        hide_sidebar()
+}
+    
+export function hide_sidebar()
+{
+    main_sidebar_visible_store.set('*')
+    //console.log("auto_hide_sidebar:" + get(main_sidebar_visible_store))
+}
+
+export function show_sidebar(index)
+{
+    //console.log('show_sidebar:', index);
+    main_sidebar_visible_store.set(index)
+}
+
+
+

package/vertical.toolbar.svelte

@@ -0,0 +1,146 @@
+<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 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;
+        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="px-0 w-10">
+        {#each tabs as tab}
+            <button
+                class="h-16 px-0 flex justify-center items-center w-full 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="mt-auto h-auto items-center w-full">
+        
+        {#if show_sign_in_out_icons }
+            {#if !is_logged_in}
+                <a  href={sign_in_href} class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500">
+                    <Icon size={6} component={FaSignInAlt}/>
+                </a> 
+            {:else}
+                <a  href={sign_out_href} class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500">
+                    <Icon size={6} component={FaSignOutAlt}/>
+                </a>
+            {/if}
+        {/if}
+
+        {#if config && config.operations}
+            <button
+                class="h-16 px-0 flex justify-center items-center w-full 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-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
+                on:click={()=> ($dark_mode_store = 'dark')}
+                >
+                <Icon size={6} component={FaMoon} />
+            </button>
+            {:else}
+            <button
+                class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
+                on:click={()=> ($dark_mode_store = '')}
+                >
+                <Icon size={6} component={FaSun} />
+                
+            </button>
+            {/if}
+        {/if}
+
+        {#if !config || config.gotoRoot }
+            <a href='#/'>
+            <button
+                class="h-16 px-0 flex justify-center items-center w-full hover:bg-orange-500"
+                >
+                <Icon size={6} component={GoPrimitiveDot} />
+            </button>
+            </a>
+        {/if}
+
+        {#if has_selection_details}
+            <button
+                class="h-16 px-0 flex justify-center items-center w-full text-slate-200 hover:bg-orange-500"
+                class:text-blue-300={$bottom_bar_visible_store}
+                on:click={()=> ($bottom_bar_visible_store = !$bottom_bar_visible_store)}
+                >
+
+                <Icon size={6} component={FaEllipsisH} />
+            </button>
+        {/if}
+
+    </div>
+

package/vertical.toolbar.svelte.d.ts

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

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 ObjectReef
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.