@humandialog/forms.svelte 1.3.16 → 1.4.0

package/components/sidebar/sidebar.item.svelte

@@ -11,7 +11,8 @@ import {
   activateItem,
   startEditing,
   getActive,
-  isOnNavigationPage
+  isOnNavigationPage,
+  UI
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -71,7 +72,17 @@ function calculateIsRowActive(...args) {
   if (!item)
     return active;
   const activeItem = getActive("props");
-  if (activeItem == item)
+  if (item.$ref) {
+    if (activeItem) {
+      return item.$ref == activeItem.$ref;
+    } else
+      return false;
+  } else if (item.Id) {
+    if (activeItem) {
+      return item.Id == activeItem.Id;
+    } else
+      return false;
+  } else if (activeItem == item)
     return true;
   else
     return false;
@@ -108,15 +119,22 @@ function on_link_clicked(e) {
   e.preventDefault();
   if (isOnPage) {
     if (isRowActive) {
-      if (href2)
-        push(href2);
+      redirect_to(href2);
     }
   } else {
     auto_hide_sidebar();
-    if (href2)
-      push(href2);
+    redirect_to(href2);
   }
 }
+function redirect_to(href2) {
+  if (!href2)
+    return;
+  let absolute_pattern = /^https?:\/\//i;
+  if (!absolute_pattern.test(href2))
+    push(href2);
+  else
+    window.location.href = href2;
+}
 function on_contextmenu(e) {
   if (!operations)
     return;
@@ -187,7 +205,6 @@ function activateRow(e) {
     <div
         on:click
         on:click={activateRow}
-        on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
         class="     mb-2
@@ -197,7 +214,7 @@ function activateRow(e) {
         class:sm:dark:hover:bg-stone-700={!!href}
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
-        class:selected={selected(selectable, context_data)}>
+        class:selected={selected(selectable, context_data)}>  <!-- on:contextmenu={on_contextmenu} -->
             <div class="flex flex-row justify-between
                         text-base font-semibold">
                 {#if href}

package/components/tags.svelte

@@ -3,7 +3,7 @@ import Tag from "./tag.svelte";
 import FaPlus from "svelte-icons/fa/FaPlus.svelte";
 import Combo from "./combo/combo.svelte";
 import ComboItem from "./combo/combo.item.svelte";
-import { contextItemsStore, data_tick_store, contextTypesStore } from "../stores.js";
+import { contextItemsStore, data_tick_store, contextTypesStore, tagsReloader } from "../stores.js";
 import { informModification, pushChanges } from "../updates.js";
 export let tags = "";
 export let getGlobalTags;
@@ -17,6 +17,8 @@ export let canChangeColor = false;
 export let compact = true;
 export let inContext = "";
 export let pushChangesImmediately = true;
+export let allowNewTags = true;
+export let readOnly = false;
 export let changed = void 0;
 export let s = "sm";
 let userClass = $$props.class ?? "";
@@ -24,9 +26,9 @@ let item = null;
 let ctx = context ? context : getContext("ctx");
 let tagsTable = [];
 let globalTagsTable = [];
-let isEditable = true;
+let isEditable = !readOnly;
 $:
-  setup($data_tick_store, $contextItemsStore);
+  setup($data_tick_store, $contextItemsStore, $tagsReloader);
 function setup(...args) {
   const globalTags = getGlobalTags();
   globalTagsTable = decomposeTags(globalTags);
@@ -51,17 +53,17 @@ function setup(...args) {
   if (compact) {
     isEditable = false;
     if (!inContext)
-      isEditable = true;
+      isEditable = !readOnly;
     else {
       let contexts = inContext.split(" ");
       contexts.forEach((ctx2) => {
         const selectedItem = $contextItemsStore[ctx2];
         if (selectedItem && selectedItem.Id == item.Id)
-          isEditable = true;
+          isEditable = !readOnly;
       });
     }
   } else
-    isEditable = true;
+    isEditable = !readOnly;
 }
 let addComboVisible = false;
 let addCombo;
@@ -113,6 +115,12 @@ function onNewTagCreated(key, name) {
   applyChange();
   onUpdateAllTags(globalTags);
 }
+function getCreateTagCallback() {
+  if (allowNewTags)
+    return onNewTagCreated;
+  else
+    return void 0;
+}
 function onColorizeTag(name, color) {
   let globalTags = getGlobalTags();
   globalTagsTable = decomposeTags(globalTags);
@@ -218,7 +226,7 @@ switch (s) {
             <Combo  compact={true} 
                     inContext='data'
                     onSelect={onSelectTag}
-                    onNewItemCreated={onNewTagCreated}
+                    onNewItemCreated={getCreateTagCallback()}
                     s={s}
                     filtered
                     bind:this={addCombo}>

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'
@@ -213,6 +213,8 @@
     }
 
     onMount( () => {
+        
+
         window.addEventListener('resize', on_resize)
         
         const vp = window.visualViewport;
@@ -223,6 +225,7 @@
         //document.addEventListener('focusout', onFocusOut)
 
         return () => {
+            
           //  document.removeEventListener('focusout', onFocusOut)
             document.removeEventListener('selectionchange', onSelectionChanged)
             vp?.removeEventListener('resize', onViewportResize)
@@ -268,7 +271,7 @@
 
     function onSelectionChanged(e)
     {
-        console.log('onSelectionChanged')
+        //console.log('onSelectionChanged')
         determineFABVisibilityAsync();
     }
 
@@ -429,7 +432,7 @@
                                     z-0 overflow-x-hidden 
                                     {content_height} sm:overflow-y-auto" 
                                     >
-                            <Configurable config={layout.mainContent} min_h_class="min-h-full">
+                            <Configurable config={layout.mainContent} min_h_class="min-h-screen">
                                 <div slot='alt'></div>
                             </Configurable>
                     </div>    
@@ -456,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/index.d.ts

@@ -39,6 +39,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 +57,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 } 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

@@ -45,6 +45,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 +63,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 } 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,6 +121,7 @@ function isOperationActivated(operation) {
 }
 </script>
 
+{#if hasOperations}
 <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">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
@@ -85,7 +133,7 @@ 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 
+                                text-sm 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
                                 inline-flex items-center"
@@ -94,7 +142,7 @@ function isOperationActivated(operation) {
                                 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,7 +153,7 @@ 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 
+                            text-sm 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
                             inline-flex items-center"
@@ -114,7 +162,7 @@ function isOperationActivated(operation) {
                             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,7 +181,7 @@ 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 
+                        text-sm 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
                         inline-flex items-center"
@@ -142,7 +190,7 @@ function isOperationActivated(operation) {
                         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 +200,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.16",
+  "version": "1.4.0",
   "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()