@humandialog/forms.svelte 1.6.6 → 1.6.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ObjectReef
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/Floating_container.svelte

@@ -68,6 +68,7 @@ export function hide() {
   if (false)
     popToolsActionsOperations();
   visible = false;
+  toolbar = null;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   rootElement?.removeEventListener("click", on_before_container_click, true);
@@ -76,6 +77,8 @@ export function isSameToolbar(_toolbar) {
   return _toolbar == toolbar;
 }
 async function onSizeChanged() {
+  if (!visible)
+    return;
   cssPosition = calculatePosition(x, y, around_rect, true, true);
   await tick();
   cssPosition = calculatePosition(x, y, around_rect, true, false);
@@ -169,6 +172,8 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         </button>
     {/if}
 
-    <svelte:component this={toolbar} {...props} bind:this={internalElement} />
+    {#if toolbar}
+        <svelte:component this={toolbar} {...props} bind:this={internalElement} />
+    {/if}
 </div>
 

package/components/breadcrumb.svelte

@@ -1,29 +1,44 @@
 <script>
     import {location, link, querystring} from 'svelte-spa-router'
-	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
+    import {randomString, isDeviceSmallerThan} from '../utils'
 	
     export let path;
     export let collapseLonger = false
 
     let segments = []
     let userClass = $$props.class ?? ''
-
+    
     $: init($location, $querystring)
 
     function init(...args)
     {
-        segments = breadcrumbParse(path);
+        if(path && Array.isArray(path) && path.length > 0)
+        {
+            path.forEach(el => 
+                segments.push({
+                    name: el.Name,
+                    href: el.href ?? '',
+                    uniqueKey: randomString(5)
+                })
+            )
+        }
+        else
+            segments = []
+
     }
 
-    function getSegmentHRef(href, idx)
+    
+    function shouldBeCollapsed(idx)
     {
-        let prevSegments = []
-        if(idx > 0)
-            prevSegments = segments.slice(0, idx)
-        
-        const prevPath = breadcrumbStringify(prevSegments)
-        return `${href}?path=${prevPath}` 
+        const isSmall = isDeviceSmallerThan("sm")
+        const entriesNo = segments.length
+        const maxEntriesNo = isSmall ? 2 : 5        //todo: depending on elements real widths
+        const isCollaspable = collapseLonger && entriesNo > maxEntriesNo
+
+        if(!isCollaspable)
+            return false
 
+        return idx < entriesNo-maxEntriesNo
     }
 
 </script>
@@ -32,18 +47,17 @@
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
     
         {#if (segments && segments.length > 1)}
-            {#each segments as segment, idx (segment.href)}
+            {#each segments as segment, idx (segment.uniqueKey)}
                 {@const isFirst = idx == 0}
                 {@const isLast = idx == segments.length-1}
-                {@const collapsable = collapseLonger && segments.length > 5}
-                {@const isCollapsed = collapsable && idx > 0 && idx < segments.length-3}
-                {@const isFirstCollapsed = isCollapsed && idx == 1}
+                {@const isCollapsed = shouldBeCollapsed(idx)}
+                {@const isFirstCollapsed = isCollapsed && idx == 0}
                 
                 {#if isCollapsed}
                     {#if isFirstCollapsed}
-                        <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                        <!--svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-                        </svg>
+                        </svg-->
                         <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
                             ...
                         </span>
@@ -61,9 +75,15 @@
                                     {segment.name}
                                 </span>
                             {:else}
-                                <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
-                                    {segment.name}
-                                </a>
+                                {#if segment.href}
+                                    <a href={segment.href} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                        {segment.name}
+                                    </a>
+                                {:else}
+                                    <span class="ms-1 text-sm font-medium md:ms-2 text-stone-700  dark:text-stone-400 whitespace-nowrap">
+                                        {segment.name}
+                                    </span>
+                                {/if}
                             {/if}
                         </div>
                     </li>

package/components/breadcrumb2.svelte

@@ -0,0 +1,78 @@
+<script>
+    import {location, link, querystring} from 'svelte-spa-router'
+	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
+	
+    export let path = '';
+    export let collapseLonger = false
+
+    let segments = []
+    let userClass = $$props.class ?? ''
+
+    $: init($location, $querystring)
+
+    function init(...args)
+    {
+        if(path)
+            segments = breadcrumbParse(path);
+        else
+            segments = []
+    }
+
+    function getSegmentHRef(href, idx)
+    {
+        let prevSegments = []
+        if(idx > 0)
+            prevSegments = segments.slice(0, idx)
+        
+        const prevPath = breadcrumbStringify(prevSegments)
+        return `${href}?path=${prevPath}` 
+
+    }
+
+</script>
+
+<nav class="flex {userClass}" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
+    
+        {#if (segments && segments.length > 1)}
+            {#each segments as segment, idx (segment.href)}
+                {@const isFirst = idx == 0}
+                {@const isLast = idx == segments.length-1}
+                {@const collapsable = collapseLonger && segments.length > 5}
+                {@const isCollapsed = collapsable && idx > 0 && idx < segments.length-3}
+                {@const isFirstCollapsed = isCollapsed && idx == 1}
+                
+                {#if isCollapsed}
+                    {#if isFirstCollapsed}
+                        <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                        </svg>
+                        <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                            ...
+                        </span>
+                    {/if}
+                {:else}
+                    <li>
+                        <div class="flex items-center">
+                            {#if !isFirst}
+                                <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                                </svg>
+                            {/if}
+                            {#if isLast}
+                                <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                                    {segment.name}
+                                </span>
+                            {:else}
+                                <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                    {segment.name}
+                                </a>
+                            {/if}
+                        </div>
+                    </li>
+                {/if}
+            {/each}
+        {/if}
+    
+  </ol>
+</nav>

package/components/breadcrumb2.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  Breadcrumb2Props */
+/** @typedef {typeof __propDef.events}  Breadcrumb2Events */
+/** @typedef {typeof __propDef.slots}  Breadcrumb2Slots */
+export default class Breadcrumb2 extends SvelteComponentTyped<{
+    [x: string]: any;
+    path?: string | undefined;
+    collapseLonger?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type Breadcrumb2Props = typeof __propDef.props;
+export type Breadcrumb2Events = typeof __propDef.events;
+export type Breadcrumb2Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        path?: string | undefined;
+        collapseLonger?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/list/internal/list.element.svelte

@@ -5,18 +5,20 @@ import {
   selectable,
   activateItem,
   isActive,
-  getActive,
   editable,
-  startEditing
+  startEditing,
+  addActiveItem,
+  removeActiveItem
 } from "../../../utils";
 import { showGridMenu, showMenu } from "../../menu";
 import { pushChanges, informModification } from "../../../updates";
 import Summary from "./list.element.summary.svelte";
 import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
+import Icon from "../../icon.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
-import { FaExternalLinkAlt } from "svelte-icons/fa/";
+import { FaExternalLinkAlt, FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
 import Tags from "../../tags.svelte";
 import { ext } from "../../../i18n";
 export let item;
@@ -25,7 +27,10 @@ export let summary = "";
 export let typename = void 0;
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
+export let multiselecOperations = (items) => [];
 export let key = "";
+export let selectionKey = "props";
+export let multiselect = false;
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
@@ -69,15 +74,9 @@ function calc_horz_division() {
   }
 }
 function calculate_active(...args) {
-  const activeItem = getActive("props");
-  if (!activeItem)
-    return false;
-  const activeKey = getItemKey(activeItem);
-  const itemKey = getItemKey(item);
-  if (activeKey == itemKey) {
-    return true;
-  } else
-    return false;
+  const key2 = getItemKeyName(item);
+  const active = isActive(selectionKey, item, key2);
+  return active;
 }
 function selected(...args) {
   return isSelected(item);
@@ -92,6 +91,19 @@ function getItemKey(item2) {
   else
     return 0;
 }
+function getItemKeyName(item2) {
+  if (key)
+    return key;
+  else {
+    const keys = Object.keys(item2);
+    if (keys.findIndex((e) => e == "$ref") >= 0)
+      return "$ref";
+    else if (keys.findIndex((e) => e == "Id") >= 0)
+      return "Id";
+    else
+      return "";
+  }
+}
 async function change_name(text) {
   if (definition.on_title_changed) {
     definition.on_title_changed(item, text, title);
@@ -167,11 +179,11 @@ function getHRef() {
 function activate_row(e, item2) {
   const openable = !!definition.title_href || !!definition.title_href_func;
   if (toolbarOperations) {
-    activateItem("props", item2, toolbarOperations(item2));
+    activateItem(selectionKey, item2, toolbarOperations(item2));
     if (e)
       e.stopPropagation();
-  } else if (openable) {
-    activateItem("props", item2, []);
+  } else {
+    activateItem(selectionKey, item2, []);
     if (e)
       e.stopPropagation();
   }
@@ -252,6 +264,14 @@ export function scrollToView() {
     }
   );
 }
+function onToggleMultiSelect(e) {
+  if (!is_row_active)
+    addActiveItem(selectionKey, item, multiselecOperations);
+  else
+    removeActiveItem(selectionKey, item, multiselecOperations);
+  if (e)
+    e.stopPropagation();
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -263,6 +283,13 @@ export function scrollToView() {
             tabindex="-1"
             bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
 
+    {#if multiselect}
+        {@const icon=is_row_active ? FaRegCheckSquare : FaRegSquare}
+         <Icon  component={icon} 
+                class="flex-none h-5 w-5 sm:h-4 sm:w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-2 sm:mt-1.5 ml-2 mr-3 "
+                on:click={onToggleMultiSelect}/>
+    {/if}
+    
     <slot name="left" element={item}/>
     
     <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>   <!-- just to force tailwind classes including -->

package/components/list/internal/list.element.svelte.d.ts

@@ -7,7 +7,10 @@ declare const __propDef: {
         typename?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
+        multiselecOperations?: ((items: any) => never[]) | undefined;
         key?: string | undefined;
+        selectionKey?: string | undefined;
+        multiselect?: boolean | undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;

package/components/list/list.svelte

@@ -1,6 +1,8 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
-import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter } from "../../utils";
+import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem } from "../../utils";
+import Icon from "../icon.svelte";
+import { FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
 import Inserter from "./internal/list.inserter.svelte";
@@ -15,7 +17,10 @@ export let typename = "";
 export let c = "";
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
+export let multiselecOperations = (items2) => [];
 export let key = "";
+export let selectionKey = "props";
+export let multiselect = false;
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
 export const SELECT_PREVIOUS = -2;
@@ -37,7 +42,7 @@ let rows = [];
 let activate_after_dom_update = null;
 let inserter;
 if (toolbarOperations)
-  clearActiveItem("props");
+  clearActiveItem(selectionKey);
 let last_tick = -1;
 $:
   setup($data_tick_store, $contextItemsStore);
@@ -78,7 +83,7 @@ export function rereder() {
   setup();
 }
 export function reload(data, selectElement = KEEP_SELECTION) {
-  let currentSelectedItem = getActive("props");
+  let currentSelectedItem = getActive(selectionKey);
   let currentSelectedItemKey = currentSelectedItem ? getItemKey(currentSelectedItem) : null;
   let selectElementId = null;
   let altSelectElementId = null;
@@ -169,9 +174,9 @@ export async function addRowAfter(after = null) {
   if (!definition.can_insert)
     return;
   show_insertion_row_after_element = after ?? END_OF_LIST;
-  last_activated_element = getActive("props");
+  last_activated_element = getActive(selectionKey);
   let fake_item = {};
-  activateItem("props", fake_item);
+  activateItem(selectionKey, fake_item);
   await tick();
   if (!inserter)
     return;
@@ -183,14 +188,14 @@ export async function addRowAfter(after = null) {
       activate_after_dom_update = last_activated_element;
     else {
       if (detail.incremental) {
-        let current_active = getActive("props");
+        let current_active = getActive(selectionKey);
         await addRowAfter(current_active);
       }
     }
   });
 }
 function scrollToSelectedElement() {
-  const activeItem = getActive("props");
+  const activeItem = getActive(selectionKey);
   if (!activeItem)
     return;
   const activeItemKey = getItemKey(activeItem);
@@ -202,12 +207,12 @@ export function remove(element) {
   let removing_idx = items?.findIndex((e) => e == element);
   if (removing_idx < 0)
     return;
-  let active_element = getActive("props");
+  let active_element = getActive(selectionKey);
   if (active_element == element) {
     if (removing_idx + 1 < items.length)
       rows[removing_idx + 1].activate();
     else
-      activateItem("props", null, []);
+      activateItem(selectionKey, null, []);
   }
   items = items.filter((t) => t != element);
 }
@@ -217,6 +222,17 @@ export function edit(element, property_name) {
     return;
   rows[editing_idx].editProperty(property_name);
 }
+export function toggleMultiselection() {
+  multiselect = !multiselect;
+  let lastSelectedItem = getActive(selectionKey);
+  if (lastSelectedItem) {
+    let ops = [];
+    if (toolbarOperations)
+      ops = toolbarOperations(lastSelectedItem);
+    activateItem(selectionKey, lastSelectedItem, ops);
+  } else
+    clearActiveItem(selectionKey);
+}
 function reorderElements(items2, from = null) {
   let fromIdx;
   let fromOrder;
@@ -275,6 +291,26 @@ async function insert(title2, summary, after) {
     items = [...items, insertedElement];
   activate_after_dom_update = insertedElement;
 }
+const SELECT_ALL = 0;
+const UNSELECT_ALL = 1;
+function calcMultiSelectionMode(...args) {
+  const multiselectionCount = getActiveCount(selectionKey);
+  if (multiselectionCount > 0)
+    return UNSELECT_ALL;
+  else
+    return SELECT_ALL;
+}
+$:
+  multiselectionMode = calcMultiSelectionMode($contextItemsStore);
+function toggleSelectAll(e) {
+  if (multiselectionMode == UNSELECT_ALL)
+    clearActiveItem(selectionKey);
+  else {
+    const operations = multiselecOperations(items);
+    items?.forEach((itm) => addActiveItem(selectionKey, itm, operations));
+  }
+  e.stopPropagation();
+}
 </script>
 
 <slot/> <!-- Launch definition settings -->
@@ -289,12 +325,21 @@ async function insert(title2, summary, after) {
 
 
     {#if items && items.length > 0 }
+        {#if multiselect}
+            {@const icon = (multiselectionMode == SELECT_ALL) ? FaRegSquare : FaRegCheckSquare}
+            <Icon component={icon} class="h-5 w-5 sm:h-4 sm:w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-2 sm:mt-1.5 ml-2 mr-3"
+                    on:click={toggleSelectAll}/>
+        {/if}
+        
         {#each items as element, i (getItemKey(element))}
             
             <List_element   item={element} 
                             {toolbarOperations}
                             {contextMenu}
                             {key}
+                            {multiselect}
+                            {multiselecOperations}
+                            {selectionKey}
                             bind:this={rows[i]}
                             >
             

package/components/list/list.svelte.d.ts

@@ -11,7 +11,10 @@ declare const __propDef: {
         c?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
+        multiselecOperations?: ((items: any) => never[]) | undefined;
         key?: string | undefined;
+        selectionKey?: string | undefined;
+        multiselect?: boolean | undefined;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;
         SELECT_PREVIOUS?: -2 | undefined;
@@ -26,6 +29,7 @@ declare const __propDef: {
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
+        toggleMultiselection?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -55,5 +59,6 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
+    get toggleMultiselection(): () => void;
 }
 export {};

package/index.d.ts

@@ -60,7 +60,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/index.js

@@ -66,7 +66,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -71,6 +71,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./components/breadcrumb.svelte": "./components/breadcrumb.svelte",
+    "./components/breadcrumb2.svelte": "./components/breadcrumb2.svelte",
     "./components/breadcrumb_utils": "./components/breadcrumb_utils.js",
     "./components/button.svelte": "./components/button.svelte",
     "./components/checkbox.svelte": "./components/checkbox.svelte",

package/stores.d.ts

@@ -18,6 +18,7 @@ export const contextItemsStore: import("svelte/store").Writable<{
     focused: string;
     data: null;
     sel: null;
+    props: null;
 }>;
 export const context_info_store: import("svelte/store").Writable<{
     data: string;

package/stores.js

@@ -5,7 +5,7 @@ import {navGetKey} from './utils.js'
 import { location } from 'svelte-spa-router';
 
 export const data_tick_store = writable(1);
-export const contextItemsStore = writable({focused:'', data: null, sel: null})
+export const contextItemsStore = writable({focused:'', data: null, sel: null, props: null})
 export const context_info_store = writable({data: '', sel: ''})
 export const contextTypesStore = writable({focused:'', data: null, sel: null})
 export const contextToolbarOperations = writable([]);

package/utils.d.ts

@@ -2,10 +2,14 @@ export function isDeviceSmallerThan(br: any): boolean;
 export function selectItem(itm: any): void;
 export function activateItem(context_level: any, itm: any, operations?: null): void;
 export function clearActiveItem(context_level: any): void;
-export function refreshToolbarOperations(): void;
+export function addActiveItem(context_level: any, itm: any, operations?: null): void;
+export function removeActiveItem(context_level: any, itm: any, operations?: null): void;
 export function isSelected(itm: any): boolean;
-export function isActive(context_level: any, itm: any): boolean;
+export function isActive(context_level: any, itm: any, key?: undefined): boolean;
 export function getActive(context_level: any): any;
+export function getActiveItems(context_level: any): any[];
+export function getActiveCount(context_level: any): number;
+export function refreshToolbarOperations(): void;
 export function editable(node: any, params: any): {
     destroy(): void;
 } | undefined;

package/utils.js

@@ -17,9 +17,6 @@ export function isDeviceSmallerThan(br)
     return window.innerWidth < SCREEN_SIZES[br]
 }
 
-//export const chnages = {
-//    just_changed_context: false
-//}
 
 export function selectItem(itm)
 {
@@ -56,7 +53,7 @@ export function activateItem(context_level, itm, operations=null)
 
     //chnages.just_changed_context = true;
 
-    if(operations)
+    if(operations && context_level == 'props')
     { 
         if(Array.isArray(operations))
             contextToolbarOperations.set( [...operations] )
@@ -70,6 +67,7 @@ export function clearActiveItem(context_level)
     let data_context = get(contextItemsStore);
     data_context[context_level] = null;
     data_context.focused = context_level;
+    data_context.sel = null
     contextItemsStore.set( {...data_context} )
 
     
@@ -79,9 +77,187 @@ export function clearActiveItem(context_level)
 
     //chnages.just_changed_context = true;
 
-    contextToolbarOperations.set( [] )
+    if(context_level == 'props')
+        contextToolbarOperations.set( [] )
 }
 
+export function addActiveItem(context_level, itm, operations = null)
+{
+    let data_context = get(contextItemsStore);
+    data_context['sel'] = itm; //null;
+    
+    let multi = data_context[context_level]
+    
+    if(multi && Array.isArray(multi))
+        multi = [...multi, itm]
+    else if(multi instanceof Object)
+        multi = [multi, itm]
+    else
+        multi = [itm]
+
+    data_context[context_level] = multi;
+    data_context.focused = context_level;
+    contextItemsStore.set( {...data_context} )
+
+    
+    let ticket = get(data_tick_store)
+    ticket++;
+    data_tick_store.set(ticket)
+
+    //chnages.just_changed_context = true;
+
+    if(operations && context_level == 'props')
+    { 
+        if(typeof operations === 'function')
+        {
+            const calculatedOps = operations(multi)
+            contextToolbarOperations.set(calculatedOps)
+        }
+        else if(Array.isArray(operations))
+            contextToolbarOperations.set( [...operations] )
+        else
+            contextToolbarOperations.set( {...operations} )
+    }
+
+}
+
+export function removeActiveItem(context_level, itm, operations = null)
+{
+    let data_context = get(contextItemsStore);
+    let multi = data_context[context_level]
+
+    if(multi && Array.isArray(multi))
+    {
+        const idx = multi.findIndex(el => el == itm)
+        if(idx >= 0)
+            multi.splice(idx, 1)
+    }
+    else
+        multi = []
+
+    if(multi.length == 1)
+        multi = multi[0]
+
+    data_context[context_level] = multi;
+
+    contextItemsStore.set( {...data_context} )
+
+    let ticket = get(data_tick_store)
+    ticket++;
+    data_tick_store.set(ticket)
+
+
+    if(context_level == 'props')
+    {
+        if(multi.length == 0)
+            contextToolbarOperations.set( [] )
+        else
+        {
+            if(operations)
+            { 
+                if(typeof operations === 'function')
+                {
+                    const calculatedOps = operations(multi)
+                    contextToolbarOperations.set(calculatedOps)
+                }
+                else if(Array.isArray(operations))
+                    contextToolbarOperations.set( [...operations] )
+                else
+                    contextToolbarOperations.set( {...operations} )
+            }
+        }
+    }
+
+}
+
+
+export function isSelected(itm)
+{
+    let data_context = get(contextItemsStore);
+    if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function isActive(context_level, itm, key = undefined)
+{
+    let data_context = get(contextItemsStore);
+
+    if(!data_context)
+        return false
+
+    const slot = data_context[context_level];
+    if(!slot)
+        return false
+
+    if(Array.isArray(slot))
+    {
+        const idx = slot.findIndex(el => {
+            if(key)
+                return el[key] == itm[key]
+            else
+                return el == itm
+        })
+        return idx >= 0
+    }
+    else if(key)
+        return slot[key] == itm[key]
+    else
+        return slot == itm
+}
+
+export function getActive(context_level)
+{
+    let data_context = get(contextItemsStore);
+    if(data_context != undefined)
+    {
+        const prop = data_context[context_level]
+        if(prop && Array.isArray(prop) && prop.length > 0)
+            return prop[prop.length-1]
+        else
+            return prop; 
+    }
+    else
+        return null;
+}
+
+export function getActiveItems(context_level)
+{
+    let data_context = get(contextItemsStore);
+    if(data_context != undefined)
+    {
+        const prop = data_context[context_level]
+        if(prop && Array.isArray(prop))
+            return prop
+        else if(prop)
+            return [prop]
+        else
+            return [] 
+    }
+    else
+        return [];
+}
+
+export function getActiveCount(context_level)
+{
+    let data_context = get(contextItemsStore);
+
+    if(!data_context)
+        return 0
+
+    const slot = data_context[context_level];
+    if(!slot)
+        return 0
+
+    if(Array.isArray(slot))
+        return slot.length
+    else
+        return 1
+}
+
+
 export function refreshToolbarOperations()
 {
     
@@ -135,34 +311,6 @@ export function refreshToolbarOperations()
     }
 }
 
-export function isSelected(itm)
-{
-    let data_context = get(contextItemsStore);
-    if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
-        return true;
-    else
-        return false;
-}
-
-
-export function isActive(context_level, itm)
-{
-    let data_context = get(contextItemsStore);
-    if(data_context != undefined && data_context[context_level] != undefined && data_context[context_level] == itm)
-        return true;
-    else
-        return false;
-}
-
-export function getActive(context_level)
-{
-    let data_context = get(contextItemsStore);
-    if(data_context != undefined)
-        return data_context[context_level]
-    else
-        return null;
-}
-
 export let currentEditable = null;
 
 export function editable(node, params)