@humandialog/forms.svelte 0.5.3 → 0.5.5

package/operations.svelte

@@ -4,11 +4,15 @@ export let mobile = false;
 $:
   update($pageToolbarOperations, $contextToolbarOperations);
 let operations = [];
+let leftOperations = [];
+let rightOperations = [];
 function update(...args) {
   if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
     operations = $contextToolbarOperations;
   else
     operations = $pageToolbarOperations;
+  leftOperations = operations.filter((o) => !o.right);
+  rightOperations = operations.filter((o) => o.right == true);
 }
 function on_click(e, operation) {
   if (!operation)
@@ -38,30 +42,55 @@ function mousedown(e) {
 }
 </script>
 
-<div    class="no-print w-full h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs flex flex-row"
-        class:flex-row-reverse={mobile}>
-    
-    {#each operations as operation}
-        {#if !operation.separator}
+<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 ">
+    <div    class="flex flex-row"
+            class:flex-row-reverse={mobile}>
+        
+        {#each leftOperations as operation}
+            {#if !operation.separator}
 
-            <button type="button" 
-                    class="py-2.5 px-5 
-                    text-xs font-medium 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"
-                    on:click={(e) => {on_click(e, operation)}}
-                    on:mousedown={mousedown}>
-                {#if operation.icon}
-                    <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
-                {/if}
-                {#if operation.caption}
-                    <span>{operation.caption}</span>
-                {/if}
-            </button>    
-        {/if}
-    {/each}
-</div>
+                <button type="button" 
+                        class="py-2.5 px-5 
+                        text-xs font-medium 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"
+                        on:click={(e) => {on_click(e, operation)}}
+                        on:mousedown={mousedown}>
+                    {#if operation.icon}
+                        <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                    {/if}
+                    {#if operation.caption}
+                        <span>{operation.caption}</span>
+                    {/if}
+                </button>    
+            {/if}
+        {/each}
+    </div>
+
+    <div class="ml-auto flex flex-row">
+        {#each rightOperations as operation}
+            {#if !operation.separator}
+
+                <button type="button" 
+                        class="py-2.5 px-5 
+                        text-xs font-medium 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"
+                        on:click={(e) => {on_click(e, operation)}}
+                        on:mousedown={mousedown}>
+                    {#if operation.icon}
+                        <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                    {/if}
+                    {#if operation.caption}
+                        <span>{operation.caption}</span>
+                    {/if}
+                </button>    
+            {/if}
+        {/each}
+    </div>
+</section>
 
 <style>
     @media print

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -79,10 +79,16 @@
     "./components/kanban/internal/kanban.column.svelte": "./components/kanban/internal/kanban.column.svelte",
     "./components/kanban/internal/kanban.inserter.svelte": "./components/kanban/internal/kanban.inserter.svelte",
     "./components/kanban/internal/kanban.move.menu.svelte": "./components/kanban/internal/kanban.move.menu.svelte",
+    "./components/kanban/internal/kanban.props.svelte": "./components/kanban/internal/kanban.props.svelte",
     "./components/kanban/kanban.callbacks.svelte": "./components/kanban/kanban.callbacks.svelte",
     "./components/kanban/kanban.column.svelte": "./components/kanban/kanban.column.svelte",
+    "./components/kanban/kanban.combo.svelte": "./components/kanban/kanban.combo.svelte",
+    "./components/kanban/kanban.date.svelte": "./components/kanban/kanban.date.svelte",
+    "./components/kanban/kanban.source.svelte": "./components/kanban/kanban.source.svelte",
+    "./components/kanban/kanban.static.svelte": "./components/kanban/kanban.static.svelte",
     "./components/kanban/kanban.summary.svelte": "./components/kanban/kanban.summary.svelte",
     "./components/kanban/kanban.svelte": "./components/kanban/kanban.svelte",
+    "./components/kanban/kanban.tags.svelte": "./components/kanban/kanban.tags.svelte",
     "./components/kanban/kanban.title.svelte": "./components/kanban/kanban.title.svelte",
     "./components/list/List": "./components/list/List.js",
     "./components/list/internal/list.element.props.svelte": "./components/list/internal/list.element.props.svelte",
@@ -108,6 +114,8 @@
     "./components/table/item.svelte": "./components/table/item.svelte",
     "./components/table/table.svelte": "./components/table/table.svelte",
     "./components/table/table": "./components/table/table.js",
+    "./components/tag.svelte": "./components/tag.svelte",
+    "./components/tags.svelte": "./components/tags.svelte",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
     "./components/tile.title.svelte": "./components/tile.title.svelte",
     "./desk.svelte": "./desk.svelte",

package/page.svelte

@@ -22,7 +22,7 @@
 	export let c = '';
 
 	export let toolbarOperations = undefined;
-	export let clears_context = '';
+	export let clearsContext = '';
 	export let title = '';
 
 	switch (c) {
@@ -96,9 +96,9 @@
 
 	function clear_selection(e) {
 		//console.log('page click', chnages.just_changed_context)
-		if (!clears_context) return;
+		if (!clearsContext) return;
 
-		let contexts = clears_context.split(' ');
+		let contexts = clearsContext.split(' ');
 		contexts.forEach((c) => {
 			$contextItemsStore[c] = null;
 			$context_info_store[c] = '';

package/page.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  PageEvents */
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
+    clearsContext?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     c?: string | undefined;
@@ -10,7 +11,6 @@ export default class Page extends SvelteComponentTyped<{
     focused_only?: boolean | undefined;
     inContext?: string | undefined;
     toolbarOperations?: any;
-    clears_context?: string | undefined;
     title?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -24,6 +24,7 @@ export type PageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        clearsContext?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         c?: string | undefined;
@@ -32,7 +33,6 @@ declare const __propDef: {
         focused_only?: boolean | undefined;
         inContext?: string | undefined;
         toolbarOperations?: any;
-        clears_context?: string | undefined;
         title?: string | undefined;
     };
     events: {

package/tenant.members.svelte

@@ -426,7 +426,7 @@
 <Page   self={data_item} 
         cl="!bg-white dark:!bg-stone-900 w-full h-full flex flex-col overflow-y-auto overflow-x-hidden py-1 px-1 border-0" 
         toolbarOperations={page_operations}
-        clears_context='props sel'>
+        clearsContext='props sel'>
     <!--a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a-->
 
     {#if reef_users && reef_users.length > 0}

package/updates.d.ts

@@ -1,3 +1,4 @@
 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 informItem(itm: any, type_name?: undefined): boolean;
 export function pushChanges(): void;

package/updates.js

@@ -34,6 +34,22 @@ export function informModification(itm, field_name, type_name=undefined)
     return true;
 };
 
+export function informModificationEx(typeName, itemId, attribName, attribValue)
+{
+    let item_entry = {
+        Id: [typeName] + itemId,
+        type_name: typeName,
+        item: { [typeName]: 
+                {
+                    Id: itemId,
+                    [attribName]: attribValue
+                } },
+    };
+    
+    modified_item_store.set(item_entry);
+    return true;
+}
+
 export function informItem(itm, type_name=undefined)
 {
     if(type_name == undefined)

package/utils.js

@@ -102,11 +102,16 @@ export function editable(node, params)
     let action;
     let active = false;
     let onRemove = undefined;
+    let onFinish = undefined;
     if(params instanceof Object)
     {
         action = params.action ?? params;
         active = params.active ?? false;
         onRemove = params.remove ?? undefined
+        onFinish = params.onFinish ?? undefined
+
+        if(params.readonly)
+            return;
     }
     else
         action = params;
@@ -246,6 +251,11 @@ export function editable(node, params)
     {
         node.contentEditable = "true"
         node.addEventListener('focus', focus_listener);
+
+        if(onFinish)
+        {
+            node.addEventListener("finish", (e) => { onFinish(e.detail) })
+        }
     }
     else
     {
@@ -455,7 +465,7 @@ export function removeAt(array, index)
 export function remove(array, element)
 {
     let idx = array.findIndex((t) => t == element);
-    return array.removeAt(idx);
+    return removeAt(array, idx);
 }
 
 export function swapElements(array, e1, e2)

package/vertical.toolbar.svelte

@@ -17,13 +17,20 @@
             tools_visible_store,
             bottom_bar_visible_store, 
             right_sidebar_visible_store,
-            main_sidebar_visible_store} from "./stores.js";     
+            main_sidebar_visible_store,
+            contextItemsStore,
+            context_info_store,
+            contextToolbarOperations,
+            data_tick_store
+        } from "./stores.js";     
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 	import { push } from 'svelte-spa-router';
+    
 
     export let appConfig;
     export let mobile=false;
+    export let clearsContext = 'sel props'
     
     
     let tabs = new Array();
@@ -163,17 +170,35 @@
         let pt = new DOMPoint(rect.right, rect.top)
         showMenu(pt, options);    
     }
+
+    function clearSelection()
+    {
+        if (!clearsContext) return;
+
+		let contexts = clearsContext.split(' ');
+		contexts.forEach((c) => {
+			$contextItemsStore[c] = null;
+			$context_info_store[c] = '';
+		});
+
+		//e.stopPropagation();
+
+		$contextToolbarOperations = [];
+		$data_tick_store = $data_tick_store + 1;
+    }
     
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 
-    <div class="no-print px-0 w-10">
+<section class="no-print flex flex-col w-full h-full" on:click={clearSelection}>
+    <div class="px-0 w-10">
         {#each tabs as tab}
             {@const isSelected = $main_sidebar_visible_store == tab.key}
             <button
                 class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 class:bg-orange-500={isSelected}
-                on:click={()=> (on_tab_clicked(tab.key))}>
+                on:click|stopPropagation={()=> (on_tab_clicked(tab.key))}>
                 
                 <Icon size={6} component={tab.icon}/>
             </button>
@@ -182,18 +207,18 @@
 
     {#if !mobile}
     
-        <div class="no-print mt-auto h-auto items-center w-full">
+        <div class="mt-auto h-auto items-center w-full">
             
             <button
                 class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
-                on:click={show_options}>
+                on:click|stopPropagation={show_options}>
 
                 <Icon size={4} component={FaCog} />
             </button>
 
         </div>
     {/if} <!-- !mobile -->
-
+</section>
 
     <!--Menu bind:this={menu}/-->
 

package/vertical.toolbar.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Vertical extends SvelteComponentTyped<{
     appConfig: any;
     mobile?: boolean | undefined;
+    clearsContext?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,6 +17,7 @@ declare const __propDef: {
     props: {
         appConfig: any;
         mobile?: boolean | undefined;
+        clearsContext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;