@humandialog/forms.svelte 1.3.17 → 1.4.1

package/components/tags.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         compact?: boolean | undefined;
         inContext?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
+        allowNewTags?: boolean | undefined;
+        readOnly?: boolean | undefined;
         changed?: undefined;
         s?: string | undefined;
         show?: ((event: any, hideCallback: any) => Promise<void>) | undefined;

package/desk.svelte

@@ -17,7 +17,7 @@
             set_dark_mode_default,
             sidebar_left_pos,
             wholeAppReloader,
-            alerts } from './stores.js'
+            alerts, removeAlert } from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
@@ -271,7 +271,7 @@
 
     function onSelectionChanged(e)
     {
-        console.log('onSelectionChanged')
+        //console.log('onSelectionChanged')
         determineFABVisibilityAsync();
     }
 
@@ -459,14 +459,14 @@
                             {#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)}}>
+                                            on:click={() => {removeAlert(alert)}}>
                                         x
                                     </button>
                                     <p>
-                                        {alert}
+                                        {alert.msg}
                                     </p>
                                     <button class="hidden sm:block font-bold  ml-auto"
-                                            on:click={() => {$alerts = removeAt($alerts, idx)}}>
+                                            on:click={() => {removeAlert(alert)}}>
                                         x
                                     </button>
                                 </Alert>    

package/horizontal.toolbar.svelte

@@ -27,8 +27,11 @@
 	import { isDeviceSmallerThan, isOnNavigationPage, pushNavigationPage, popNavigationPage } from './utils.js';
     
 
-    export let appConfig;
+    export let appConfig = undefined;
     export let clearsContext = 'sel props'
+
+    export let definedTabs = undefined
+    export let mainToolbarConfig = undefined
     
     let config = null;
     let has_selection_details = false;
@@ -45,23 +48,39 @@
 
     $:
     {
-        config = appConfig.mainToolbar;
-        has_selection_details = appConfig.selectionDetails;
-        if(has_selection_details)
-            selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
+        if(appConfig)
+        {
+            config = appConfig.mainToolbar;
+            has_selection_details = appConfig.selectionDetails;
+            if(has_selection_details)
+                selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
+        }
+        else
+        {
+            config = mainToolbarConfig
+            has_selection_details = false
+        }
+
         is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
         sign_out_href = $signOutHRef;
         //user_is_in_multiple_groups = $session.tenants.length > 1
 
-        tabs = Object.keys(appConfig.sidebar);
-        if(tabs.length > 1)
-            icon = FaBars;
-        else    
+        if(definedTabs && Array.isArray(definedTabs) && definedTabs.length > 0)
         {
-            let first_tab = appConfig.sidebar[tabs[0]];
-            icon = first_tab.icon;
+            
+        }
+        else
+        {
+            tabs = Object.keys(appConfig.sidebar);
+            if(tabs.length > 1)
+                icon = FaBars;
+            else    
+            {
+                let first_tab = appConfig.sidebar[tabs[0]];
+                icon = first_tab.icon;
+            }
         }
     }
 
@@ -283,9 +302,17 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="no-print flex flex-row w-full" on:click={clearSelection}>
     <div class="flex-none left-0 flex h-12 sm:h-10">
-        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-            <Icon class="w-5 h-5" component={icon}/>
-        </button>
+        {#if definedTabs && definedTabs.length > 0}
+            {#each definedTabs as tab}
+                <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={tab.onclick}>
+                    <Icon class="w-5 h-5" component={tab.icon}/>
+                </button>    
+            {/each}
+        {:else}
+            <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
+                <Icon class="w-5 h-5" component={icon}/>
+            </button>
+        {/if}
     </div>
 
     <div class="grow">

package/horizontal.toolbar.svelte.d.ts

@@ -2,8 +2,10 @@
 /** @typedef {typeof __propDef.events}  HorizontalEvents */
 /** @typedef {typeof __propDef.slots}  HorizontalSlots */
 export default class Horizontal extends SvelteComponentTyped<{
-    appConfig: any;
+    appConfig?: any;
     clearsContext?: string | undefined;
+    definedTabs?: any;
+    mainToolbarConfig?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -14,8 +16,10 @@ export type HorizontalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        appConfig: any;
+        appConfig?: any;
         clearsContext?: string | undefined;
+        definedTabs?: any;
+        mainToolbarConfig?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as Box } from "./form.box.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
 export { default as VerticalToolbar } from './vertical.toolbar.svelte';
+export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as IconT } from "./components/icon.ex.svelte";
 export { default as Button } from './components/button.svelte';
@@ -39,6 +40,7 @@ export { default as ListInserter } from './components/list/list.inserter.svelte'
 export { default as ListDateProperty } from './components/list/list.date.svelte';
 export { default as ListComboProperty } from './components/list/list.combo.svelte';
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
+export { default as ListTags } from './components/list/list.tags.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
@@ -56,9 +58,13 @@ 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, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
-export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
+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 { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
 export { informModification, informModificationEx, informItem, pushChanges } 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';
+export { default as IcH4 } from './components/document/internal/h4.icon.svelte';

package/index.js

@@ -9,6 +9,7 @@ export { default as Box } from "./form.box.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
 export { default as VerticalToolbar } from './vertical.toolbar.svelte';
+export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
 // @ts-ignore
 export { default as Icon } from "./components/icon.svelte";
 export { default as IconT } from "./components/icon.ex.svelte";
@@ -45,6 +46,7 @@ export { default as ListInserter } from './components/list/list.inserter.svelte'
 export { default as ListDateProperty } from './components/list/list.date.svelte';
 export { default as ListComboProperty } from './components/list/list.combo.svelte';
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
+export { default as ListTags } from './components/list/list.tags.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
@@ -62,9 +64,13 @@ 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, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
-export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
+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 { 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 { 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';
+export { default as IcH4 } from './components/document/internal/h4.icon.svelte';

package/operations.svelte

@@ -6,21 +6,20 @@ $:
 let operations = [];
 let leftOperations = [];
 let rightOperations = [];
+let hasOperations = false;
 function update(...args) {
-  let isOpVer1 = false;
+  let opVer = 0;
   if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
   } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
-    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
-      isOpVer1 = true;
+    opVer = $contextToolbarOperations.opver ?? 0;
   } else {
     if (Array.isArray($pageToolbarOperations))
       operations = $pageToolbarOperations;
     else {
       operations = $pageToolbarOperations.operations;
-      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
-        isOpVer1 = true;
+      opVer = $pageToolbarOperations.opver ?? 0;
     }
   }
   leftOperations = [];
@@ -28,7 +27,7 @@ function update(...args) {
   let AOperations = [];
   let BOperations = [];
   let COperations = [];
-  if (isOpVer1) {
+  if (opVer == 1) {
     operations.forEach((group) => {
       if (group.operations && group.operations.length > 0) {
         AOperations = [...AOperations, ...group.operations.filter((o) => o.tbr == "A")];
@@ -38,10 +37,56 @@ function update(...args) {
     });
     leftOperations = [...AOperations, ...BOperations];
     rightOperations = [...COperations];
+  } else if (opVer == 2) {
+    operations.forEach((group) => {
+      if (group.tbr) {
+        const expandOperation = {
+          caption: group.caption ?? "",
+          icon: group.icon ?? void 0,
+          preAction: group.preAction,
+          activeFunc: group.activeFunc,
+          menu: group.operations
+        };
+        switch (group.tbr) {
+          case "A":
+            AOperations.push(expandOperation);
+            break;
+          case "B":
+            BOperations.push(expandOperation);
+            break;
+          case "C":
+            COperations.push(expandOperation);
+            break;
+        }
+      }
+      group.operations.forEach((op) => {
+        if (op.tbr) {
+          const tbrOperation = {
+            ...op
+          };
+          if (op.hideToolbarCaption)
+            tbrOperation.caption = "";
+          switch (op.tbr) {
+            case "A":
+              AOperations.push(tbrOperation);
+              break;
+            case "B":
+              BOperations.push(tbrOperation);
+              break;
+            case "C":
+              COperations.push(tbrOperation);
+              break;
+          }
+        }
+      });
+    });
+    leftOperations = [...AOperations, ...BOperations];
+    rightOperations = [...COperations];
   } else {
     leftOperations = operations.filter((o) => !o.right);
     rightOperations = operations.filter((o) => o.right == true);
   }
+  hasOperations = leftOperations.length > 0 || rightOperations.length > 0;
 }
 function on_click(e, operation) {
   if (!operation)
@@ -49,6 +94,8 @@ function on_click(e, operation) {
   let owner = e.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
   if (operation.action) {
     operation.action(owner);
     return;
@@ -74,7 +121,8 @@ function isOperationActivated(operation) {
 }
 </script>
 
-<section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
+{#if hasOperations}
+<section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
         
@@ -85,16 +133,17 @@ function isOperationActivated(operation) {
                     {#each operation.toolbox as operation}
                         <button type="button" 
                                 class="py-2.5 px-4 
-                                text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                                hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                                border-stone-200 focus:outline-none dark:border-stone-600
+                                text-sm font-thin 
+                                text-stone-800 hover:bg-stone-700 active:bg-stone-300 border-stone-200
+                                dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                                focus:outline-none 
                                 inline-flex items-center"
                                 class:bg-stone-700={isActive}
                                 class:dark:bg-stone-800={isActive}
                                 on:click={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown}>
                             {#if operation.icon}
-                                <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                                <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
                                 <span class="ml-1">{operation.caption}</span>
@@ -105,16 +154,17 @@ function isOperationActivated(operation) {
                 
                     <button type="button" 
                             class="py-2.5 px-4
-                            text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                            hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                            border-stone-200 focus:outline-none dark:border-stone-600
+                            text-sm font-thin 
+                            text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                            dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                            focus:outline-none 
                             inline-flex items-center"
                             class:bg-stone-700={isActive}
                             class:dark:bg-stone-800={isActive}
                             on:click={(e) => {on_click(e, operation)}}
                             on:mousedown={mousedown}>
                         {#if operation.icon}
-                            <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                            <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
                             <span class="ml-1">{operation.caption}</span>
@@ -133,16 +183,17 @@ function isOperationActivated(operation) {
             {@const isActive=isOperationActivated(operation)}
                 <button type="button" 
                         class="py-2.5 px-4 
-                        text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                        hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                        border-stone-200 focus:outline-none dark:border-stone-600
+                        text-sm font-thin 
+                        text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                        dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                        focus:outline-none 
                         inline-flex items-center"
                         class:bg-stone-700={isActive}
                         class:dark:bg-stone-800={isActive}
                         on:click={(e) => {on_click(e, operation)}}
                         on:mousedown={mousedown}>
                     {#if operation.icon}
-                        <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                        <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                     {/if}
                     {#if operation.caption}
                         <span class="ml-1">{operation.caption}</span>
@@ -152,6 +203,7 @@ function isOperationActivated(operation) {
         {/each}
     </div>
 </section>
+{/if}
 
 <style>
     @media print

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.17",
+  "version": "1.4.1",
   "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.5",
+    "@humandialog/auth.svelte": "^1.8.8",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -43,6 +43,7 @@
     "@tiptap/suggestion": "^2.11.0",
     "flowbite-svelte": "^0.44.4",
     "pdfjs-dist": "^4.10.38",
+    "qs": "^6.14.0",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"
   },
@@ -125,6 +126,7 @@
     "./components/list/list.static.svelte": "./components/list/list.static.svelte",
     "./components/list/list.summary.svelte": "./components/list/list.summary.svelte",
     "./components/list/list.svelte": "./components/list/list.svelte",
+    "./components/list/list.tags.svelte": "./components/list/list.tags.svelte",
     "./components/list/list.title.svelte": "./components/list/list.title.svelte",
     "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",

package/stores.d.ts

@@ -5,6 +5,7 @@ export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;
 export function reloadMainContentPage(): void;
 export function reloadWholeApp(): void;
+export function reloadVisibleTags(): void;
 export function set_dark_mode_default(value: any): void;
 export function set_default_tools_visible(value: any, force: any): void;
 export function restore_defults(): void;
@@ -35,7 +36,9 @@ 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 const tagsReloader: import("svelte/store").Writable<number>;
 export function addAlert(txt: any): void;
+export function removeAlert(alert: 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>;

package/stores.js

@@ -1,6 +1,6 @@
 
 import {writable, get} from 'svelte/store';
-import {SCREEN_SIZES} from './utils.js'
+import {SCREEN_SIZES, randomString} from './utils.js'
 
 export const data_tick_store = writable(1);
 export const contextItemsStore = writable({focused:'', data: null, sel: null})
@@ -14,6 +14,7 @@ export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
 export const wholeAppReloader = writable(1)
 export const alerts = writable([])
+export const tagsReloader = writable(1)
 
 
 let toolsActionsOperationsStack = []
@@ -42,10 +43,26 @@ export function popToolsActionsOperations()
 
 export const addAlert = (txt) => {
     let al = get(alerts)
-    al = [txt, ...al];
+    const alert = {
+        msg: txt,
+        id: randomString(6),
+        timeoutId: setTimeout(() => removeAlert(alert), 10000)
+    }
+    al = [alert, ...al];
     alerts.set(al);
 }
 
+export const removeAlert = (alert) => {
+    let al = get(alerts)
+    const idx = al.findIndex((a) => a.id == alert.id)
+    if(idx >= 0)
+    {
+        clearTimeout(alert.timeoutId)
+        al.splice(idx, 1)
+        alerts.set(al)
+    }
+}
+
 export const onErrorShowAlert = addAlert;
 
 export function setNavigatorTitle(key, title)
@@ -81,6 +98,12 @@ export function reloadWholeApp()
     wholeAppReloader.set(val);
 }
 
+export function reloadVisibleTags()
+{
+    let val = get(tagsReloader);
+    val += 1;
+    tagsReloader.set(val);
+}
 
 let has_saved_dark_mode = false;
 function create_dark_mode_store()