@humandialog/forms.svelte 1.1.4 → 1.1.6

package/components/contextmenu.svelte

@@ -26,8 +26,13 @@ afterUpdate(() => {
   let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
   if (isDeviceSmallerThan("sm")) {
     const sel = window.getSelection();
+    console.log("sel", sel);
     if (sel && sel.rangeCount > 0 && sel.focusNode && sel.focusNode.nodeType == sel.focusNode.TEXT_NODE) {
-      container_rect.height -= 300;
+      const el = sel.focusNode.parentElement;
+      if (el && (el.isContentEditable || el.contentEditable == "true" || el.tagName == "INPUT")) {
+        console.log("keyboard visible, move menu 300px up", el);
+        container_rect.height -= 300;
+      }
     }
   }
   let xShifted = false;

package/console.svelte

@@ -12,7 +12,7 @@
 
     async function onKeyDown(e)
     {
-        if(!$session.isActive)
+        if(!$session.isActive && !$session.isUnauthorizedGuest)
         {
             prevLines = [...prevLines, "Sign-in first"]
             input = "";

package/desk.svelte

@@ -4,6 +4,7 @@
     import Configurable from './internal/configurable.content.svelte'
     import Operations from './operations.svelte'
     import Fab from './components/Fab.svelte'
+     import {Alert} from 'flowbite-svelte'
         
     import {main_sidebar_visible_store, 
             tools_visible_store, 
@@ -15,26 +16,15 @@
             set_default_tools_visible,
             set_dark_mode_default,
             sidebar_left_pos,
-            wholeAppReloader } from './stores.js'
+            wholeAppReloader,
+            alerts } from './stores.js'
     
-    import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handleSelect, isDeviceSmallerThan } from './utils'
-	import { afterUpdate, onMount } from 'svelte';
+    //import { AuthorizedView} from '@humandialog/auth.svelte'
+    import { handleSelect, isDeviceSmallerThan, removeAt } from './utils'
+    import { afterUpdate, onMount } from 'svelte';
     
     export let layout;
 
-    onMount( () => {
-        window.addEventListener('resize', on_resize)
-        return () => {
-            window.removeEventListener('resize', on_resize)
-        }
-    })
-
-    function on_resize()
-    {
-        auto_hide_sidebar();
-    }
-
     const sizes = {
             bottom: 240,
             toolbar: 40,
@@ -156,10 +146,34 @@
     }
 
     //$: screen.width = innerWidth;  
+
+    $: switchBodyClass($dark_mode_store);
+    function switchBodyClass(...args)
+    {
+        document.body.className = $dark_mode_store;
+    }
+
+    onMount( () => {
+        window.addEventListener('resize', on_resize)
+        return () => {
+            window.removeEventListener('resize', on_resize)
+            
+            // remove dark class form body element when we leave Layout view
+            if($dark_mode_store)
+                document.body.classList.remove($dark_mode_store)
+        }
+    })
+
+    function on_resize()
+    {
+        auto_hide_sidebar();
+    }
+
 </script>
 
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
 
+
 <!--AuthorizedView {autoRedirectToSignIn}-->
     
     {#key $wholeAppReloader}
@@ -270,6 +284,29 @@
                         
                     </div>    
 
+                    <!--##########################################################-->
+                    <!--##  ALERTS ###############################################-->
+                    <!--##########################################################-->
+                    <section class="absolute left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
+                        {#if $alerts && $alerts.length > 0}
+                            {#each $alerts as alert, idx}
+                                <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row">
+                                    <button class="sm:hidden font-bold  ml-auto"
+                                            on:click={() => {$alerts = removeAt($alerts, idx)}}>
+                                        x
+                                    </button>
+                                    <p>
+                                        {alert}
+                                    </p>
+                                    <button class="hidden sm:block font-bold  ml-auto"
+                                            on:click={() => {$alerts = removeAt($alerts, idx)}}>
+                                        x
+                                    </button>
+                                </Alert>    
+                            {/each}
+                        {/if}
+                    </section>
+
                     <!-- #########################################################-->
                     <!-- ## MODAL DIALOG #########################################-->
                     <!-- #########################################################-->
@@ -290,6 +327,8 @@
   /* Track */
   /* Handle */
   /* Handle on hover */
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255/var(--tw-bg-opacity));
 }
 #__hd_svelte_layout_root ::-webkit-scrollbar {
   width: 10px;
@@ -309,6 +348,8 @@
   /* Track */
   /* Handle */
   /* Handle on hover */
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 25 23/var(--tw-bg-opacity));
 }
 #__hd_svelte_layout_root.dark ::-webkit-scrollbar {
   width: 10px;
@@ -329,7 +370,6 @@
   background-color: rgb(255 255 255/var(--tw-bg-opacity));
 }
 
-/* dark:bg-gray-900 */
 :global(body.dark) {
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23/var(--tw-bg-opacity));

package/index.d.ts

@@ -53,7 +53,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';

package/index.js

@@ -59,7 +59,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan } from './utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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.8.1",
+    "@humandialog/auth.svelte": "^1.8.3",
     "flowbite-svelte": "^0.44.4",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"

package/stores.d.ts

@@ -31,6 +31,9 @@ export const page_title: import("svelte/store").Writable<string>;
 export const nav_titles: import("svelte/store").Writable<{}>;
 export const mainContentPageReloader: import("svelte/store").Writable<number>;
 export const wholeAppReloader: import("svelte/store").Writable<number>;
+export const alerts: import("svelte/store").Writable<never[]>;
+export function addAlert(txt: any): void;
+export function onErrorShowAlert(txt: any): void;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;

package/stores.js

@@ -12,6 +12,15 @@ export const page_title = writable('');
 export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
 export const wholeAppReloader = writable(1)
+export const alerts = writable([])
+
+export const addAlert = (txt) => {
+    let al = get(alerts)
+    al = [txt, ...al];
+    alerts.set(al);
+}
+
+export const onErrorShowAlert = addAlert;
 
 export function setNavigatorTitle(key, title)
 {

package/tenant.members.svelte

@@ -18,11 +18,11 @@
     import Combo from './components/combo/combo.svelte'
 	import Modal from './modal.svelte'
 	import Checkbox from './components/checkbox.svelte';
-    import {Popover, Alert} from 'flowbite-svelte'
+   
 	import { reef, session, signInHRef } from '@humandialog/auth.svelte';
 	import { ComboSource } from './';
-    import {removeAt} from './utils'
     import {showMenu} from './components/menu'
+    import {onErroronErrorAddAlert} from './stores'
 	
 
     // ==============================================================================
@@ -202,8 +202,7 @@
             else
             {
                 const err_msg = await res.text();
-                alerts.push(err_msg)
-                alerts = [...alerts];
+                onErrorShowAlert(err_msg);
                 return false;
             }
         }
@@ -230,8 +229,7 @@
             else
             {
                 const err_msg = await res.text();
-                alerts.push(err_msg)
-                alerts = [...alerts];
+                onErrorShowAlert(err_msg)
                 return false;
             }
         }
@@ -259,7 +257,7 @@
             else
             {
                 const err_msg = await res.text();
-                alerts = [err_msg, ...alerts];
+                onErrorShowAlert(err_msg);
                 return false;
             }
         }
@@ -527,12 +525,12 @@
                 else
                 {
                     const err_msg = await res.text();
-                    alerts = [err_msg, ...alerts];
+                    onErrorShowAlert(err_msg);
                 }
         }
         catch (err)
         {
-            alerts = [err, ...alerts];
+            onErrorShowAlert(err);
         }
 
         new_user.name = '';
@@ -555,8 +553,6 @@
         create_new_user_enabled = false;
     }
 
-    let alerts = []
-
     let removeModal;
     let userToRemove;
     function askToRemove(user)
@@ -586,12 +582,12 @@
             else
             {
                 const err = await res.text()
-                alerts = [err, ...alerts];
+                onErrorShowAlert(err);
             }
         }
         catch(err)
         {
-            alerts = [err, ...alerts];
+            onErrorShowAlert(err);
         }
     }
 
@@ -620,7 +616,7 @@
             else
             {
                 const err = await res.text()
-                alerts = [err, ...alerts];
+                onErrorShowAlert(err);
             }
         }
         catch(err)
@@ -628,7 +624,7 @@
             deleteAccountModal.hide();
 
             console.error(err)
-            alerts = [err, ...alerts];
+            onErrorShowAlert(err);
         }
     }
     
@@ -640,20 +636,7 @@
         clearsContext='props sel'>
     <!--a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a-->
 
-    <!-- alerts -->
-    <section class="absolute left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
-        {#each alerts as alert, idx}
-            <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row">
-                <p>
-                    {alert}
-                </p>
-                <button class="font-bold  ml-auto"
-                        on:click={() => {alerts = removeAt(alerts, idx)}}>
-                    x
-                </button>
-            </Alert>    
-        {/each}
-    </section>
+