@humandialog/forms.svelte 1.4.6 → 1.4.8

package/index.d.ts

@@ -59,11 +59,11 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
-export { informModification, informModificationEx, informItem, pushChanges } from './updates';
+export { informModification, informModificationEx, informItem, pushChanges, hasModifications } from './updates';
 export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';

package/index.js

@@ -65,11 +65,11 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
-export { informModification, informModificationEx, informItem, pushChanges } from './updates'; // tmp
+export { informModification, informModificationEx, informItem, pushChanges, hasModifications } from './updates'; // tmp
 export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';

package/modal.svelte

@@ -19,7 +19,7 @@ export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -44,7 +44,6 @@ export function hide() {
   if (!open)
     return;
   open = false;
-  popToolsActionsOperations();
 }
 let root;
 afterUpdate(
@@ -75,7 +74,7 @@ function on_cancel(event) {
 </script>
 
 {#if open}
-<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
+<div class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
     <!--
       Background backdrop, show/hide based on modal state.
   
@@ -88,7 +87,7 @@ function on_cancel(event) {
     -->
     <div class="fixed w-screen h-screen inset-0 bg-stone-500 dark:bg-stone-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity"></div>
   
-    <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
+    <div class="fixed z-30 inset-0 w-screen overflow-y-auto">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <!--
           Modal panel, show/hide based on modal state.
@@ -107,7 +106,7 @@ function on_cancel(event) {
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                 {#if icon}
-                    <Icon component={icon} size={6} class="text-stone-700"/>
+                    <Icon component={icon} s="2xl" class="text-stone-700"/>
                 {/if}
               </div>
               <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "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.10",
+    "@humandialog/auth.svelte": "^1.8.12",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -143,6 +143,7 @@
     "./components/table/table": "./components/table/table.js",
     "./components/tag.colors.svelte": "./components/tag.colors.svelte",
     "./components/tag.svelte": "./components/tag.svelte",
+    "./components/tags.palette.svelte": "./components/tags.palette.svelte",
     "./components/tags.svelte": "./components/tags.svelte",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
     "./components/tile.title.svelte": "./components/tile.title.svelte",

package/stores.d.ts

@@ -48,3 +48,6 @@ 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>;
+export const fabCollapsed: import("svelte/store").Writable<any>;
+export const showFABAlways: import("svelte/store").Writable<any>;
+export const leftHandedFAB: import("svelte/store").Writable<any>;

package/stores.js

@@ -157,6 +157,15 @@ bottom_bar_visible_store.subscribe( (value) => { localStorage.bottom_bar_visible
 export const right_sidebar_visible_store = writable(false)
 export const visible_property_tab_store = writable('');
 
+export const fabCollapsed = writable( (localStorage.fabCollapsed && localStorage.fabCollapsed == 'true') || false )
+fabCollapsed.subscribe( (value) => { localStorage.fabCollapsed = (value ? 'true' : '') } );
+
+export const showFABAlways = writable( (localStorage.showFABAlways && localStorage.showFABAlways == 'true') || false )
+showFABAlways.subscribe( (value) => { localStorage.showFABAlways = (value ? 'true' : '') } );
+
+export const leftHandedFAB = writable( (localStorage.leftHandedFAB && localStorage.leftHandedFAB == 'true') || false )
+leftHandedFAB.subscribe( (value) => { localStorage.leftHandedFAB = (value ? 'true' : '') } );
+
 export function restore_defults()
 {
     
@@ -165,6 +174,9 @@ export function restore_defults()
     bottom_bar_visible_store.set(false);
     right_sidebar_visible_store.set(false);
     visible_property_tab_store.set('');
+    fabCollapsed.set(false)
+    showFABAlways.set(false)
+    leftHandedFAB.set(false)
 }
 
 export function toggle_sidebar(index)

package/tenant.members.svelte

@@ -776,7 +776,7 @@
             <!--Checkbox class="mt-2 text-xs font-normal" self={new_user} a="maintainer">
                 <div class="flex flex-row items-center">
                     <span class="">Maintainer</span>
-                    <Icon id="b1" size={4} component={FaInfoCircle} class="text-stone-400 ml-5 pt-0 mt-1"/>
+                    <Icon id="b1" s="md" component={FaInfoCircle} class="text-stone-400 ml-5 pt-0 mt-1"/>
                     <Popover class="w-64 text-sm font-light text-stone-500 bg-white dark:bg-stone-800 dark:border-stone-600 dark:text-stone-400" triggeredBy="#b1" color="dropdown">
                         Means that the invited user will be able to add/remove others and manage permissions in this organization.
                     </Popover>

package/updates.d.ts

@@ -1,4 +1,5 @@
 export function informModification(itm: any, field_name: any, type_name?: undefined): boolean;
 export function informModificationEx(typeName: any, itemId: any, attribName: any, attribValue: any): boolean;
+export function hasModifications(): boolean;
 export function informItem(itm: any, type_name?: undefined): boolean;
-export function pushChanges(): void;
+export function pushChanges(afterPushCallback?: undefined): void;

package/updates.js

@@ -51,6 +51,12 @@ export function informModificationEx(typeName, itemId, attribName, attribValue)
     return true;
 }
 
+export function hasModifications()
+{
+    //console.log('hasModifications', modified_items_map.size)
+    return modified_items_map.size > 0
+}
+
 export function informItem(itm, type_name=undefined)
 {
     if(type_name == undefined)
@@ -81,8 +87,15 @@ export function informItem(itm, type_name=undefined)
 
 const update_request_ticket = writable(0);
 let last_update_ticket = 0;
-export function pushChanges()
+let afterPushCallbacks = []
+
+export function pushChanges(afterPushCallback=undefined)
 {
+    //console.trace()
+
+    if(afterPushCallback)
+        afterPushCallbacks.push(afterPushCallback);
+
     update_request_ticket.update(n => n + 1);
 }
 
@@ -140,13 +153,18 @@ update_request_ticket.subscribe(async (v) => {
                 body: JSON.stringify( { Items: changes } )
             })
             if (res.ok) {
+
                 modified_items_map.clear();
+                afterPushCallbacks.forEach( cb => cb())
+                afterPushCallbacks = []
             }
             else
             {
                 if(res.status == 400)   // basic exception like access rights 
                 {
                     modified_items_map.clear();
+                    afterPushCallbacks.forEach( cb => cb())
+                    afterPushCallbacks = []
                 }
 
                 const err = await res.text()

package/utils.js

@@ -84,21 +84,32 @@ export function clearActiveItem(context_level)
 
 export function refreshToolbarOperations()
 {
+    
+    let refreshed = false
+
     const contextOperations = get(contextToolbarOperations)
     if(contextOperations)
     {
+        
         if(Array.isArray(contextOperations))
         {
-            if(contextOperations.length)
+            if(contextOperations.length > 0)
+            {
                 contextToolbarOperations.set([...contextOperations])
+                refreshed = true
+            }
         }
         else
         {
-            if(contextOperations.operations.length)
+            if(contextOperations.operations && contextOperations.operations.length > 0)
+            {
                 contextToolbarOperations.set({...contextOperations})
+                refreshed = true
+            }
         }
     }
-    else
+    
+    if(!refreshed)
     {
         const pageOperations = get(pageToolbarOperations);
         if(pageOperations)
@@ -108,6 +119,7 @@ export function refreshToolbarOperations()
                 if(pageOperations.length > 0)
                 {
                     pageToolbarOperations.set([...pageOperations])
+                    refreshed = true
                 }
             }
             else
@@ -115,6 +127,7 @@ export function refreshToolbarOperations()
                 if(pageOperations.operations && pageOperations.operations.length > 0)
                 {
                     pageToolbarOperations.set({...pageOperations})
+                    refreshed = true
                 }
             }
         }
@@ -159,6 +172,7 @@ export function editable(node, params)
     let onRemove = undefined;
     let onFinish = undefined;
     let onSoftEnter = undefined;
+    let onSingleChange = undefined
     if(params instanceof Object)
     {
         action = params.action ?? params;
@@ -166,6 +180,7 @@ export function editable(node, params)
         onRemove = params.remove ?? undefined
         onFinish = params.onFinish ?? undefined
         onSoftEnter = params.onSoftEnter ?? undefined;
+        onSingleChange = params.onSingleChange ?? undefined
        
         if(params.readonly)
             return;
@@ -323,7 +338,12 @@ export function editable(node, params)
         currentEditable = node;
         node.addEventListener("save", save_listener)
         
-        observer = new MutationObserver(() => { has_changed = true; });
+        observer = new MutationObserver(() => { 
+            has_changed = true; 
+            if(onSingleChange)
+                onSingleChange(node.textContent)
+        });
+
         observer.observe(   node,  {
                                 childList: true,
                                 attributes: true,

package/vertical.toolbar.svelte

@@ -19,13 +19,15 @@
             context_info_store,
             contextToolbarOperations,
             data_tick_store,
-            reloadWholeApp
+            reloadWholeApp,
+            showFABAlways,
+            leftHandedFAB
         } from "./stores.js";     
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 	import { pop, push } from 'svelte-spa-router';
 	import { tick } from 'svelte';
-	import { popNavigationPage } from './utils';
+	import { isDeviceSmallerThan, popNavigationPage } from './utils';
     
 
     export let appConfig = undefined;
@@ -218,6 +220,22 @@
                 });
         }
 
+        if(!isDeviceSmallerThan("sm"))
+        {
+            options.push({
+                caption: 'Floating actions',
+                icon: $showFABAlways ? FaToggleOn : FaToggleOff,
+                action: (f) => { $showFABAlways = !$showFABAlways; }
+            })
+
+            options.push({
+                caption: 'Left-handed floating actions',
+                icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
+                disabled: !$showFABAlways,
+                action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
+            })
+        }
+
         if(has_selection_details)
         {
             options.push( {
@@ -361,7 +379,7 @@
                 class:bg-orange-500={isSelected}
                 on:click={tab.onclick}>
                 
-                <Icon class="w-5 h-5" component={tab.icon}/>
+                <Icon s="xl" component={tab.icon}/>
             </button>
         {/each}
     </div>
@@ -373,7 +391,7 @@
             {#if show_groups_switch_menu}
                 <button class="h-12 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                         on:click|stopPropagation={show_groups}>
-                    <Icon size={4} component={FaUsers} />
+                    <Icon s="md" component={FaUsers} />
                 </button>
             {/if}
 
@@ -381,7 +399,7 @@
                 class="h-12  px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 on:click|stopPropagation={show_options}>
 
-                <Icon size={4} component={FaCog} />
+                <Icon s="md" component={FaCog} />
             </button>
 
         </div>