@humandialog/forms.svelte 1.4.7 → 1.4.9

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.

package/operations.svelte

@@ -200,7 +200,7 @@ function isOperationDisabled(operation) {
                         </button>
                     {/each}
                 {:else}
-                    {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
+                    {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-100 border-stone-200'}
                     {@const disabledLightColors ='text-stone-400 border-stone-200'}
 
                     {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
@@ -216,7 +216,7 @@ function isOperationDisabled(operation) {
                             focus:outline-none
                             inline-flex items-center
                             {colors}"
-                            class:bg-stone-700={isActive}
+                            class:bg-stone-200={isActive}
                             class:dark:bg-stone-800={isActive}
                             disabled={isDisabled}
                             on:mousedown={(e) => mousedown(e, operation)}
@@ -258,7 +258,7 @@ function isOperationDisabled(operation) {
                         {colors}
                         focus:outline-none
                         inline-flex items-center"
-                        class:bg-stone-700={isActive}
+                        class:bg-stone-200={isActive}
                         class:dark:bg-stone-800={isActive}
                         disabled={isDisabled}
                         on:mousedown={(e) => mousedown(e, operation)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "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.12",
+    "@humandialog/auth.svelte": "^1.8.14",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -45,6 +45,7 @@
     "pdfjs-dist": "^4.10.38",
     "qs": "^6.14.0",
     "svelte-icons": "^2.1.0",
+    "svelte-share-buttons-component": "^3.0.0",
     "svelte-spa-router": "^4.0.1"
   },
   "keywords": [
@@ -67,6 +68,8 @@
   "homepage": "https://github.com/HumanDialog/forms.svelte#readme",
   "exports": {
     "./package.json": "./package.json",
+    "./components/breadcrumb.svelte": "./components/breadcrumb.svelte",
+    "./components/breadcrumb_utils": "./components/breadcrumb_utils.js",
     "./components/button.svelte": "./components/button.svelte",
     "./components/checkbox.svelte": "./components/checkbox.svelte",
     "./components/combo/combo.item.svelte": "./components/combo/combo.item.svelte",
@@ -130,6 +133,7 @@
     "./components/list/list.title.svelte": "./components/list/list.title.svelte",
     "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",
+    "./components/paginator.svelte": "./components/paginator.svelte",
     "./components/radio.svelte": "./components/radio.svelte",
     "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
     "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",

package/stores.d.ts

@@ -49,3 +49,5 @@ 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

@@ -160,6 +160,12 @@ 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()
 {
     
@@ -169,6 +175,8 @@ export function restore_defults()
     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/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( {