@humandialog/forms.svelte 0.4.45 → 0.5.2

package/horizontal.toolbar.svelte

@@ -10,7 +10,7 @@
     import FaBars from 'svelte-icons/fa/FaBars.svelte'
     import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
     import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
-    import {show_menu} from './components/menu'
+    import {showMenu} from './components/menu'
     import {push} from 'svelte-spa-router'
     //import Menu from './components/contextmenu.svelte'
 
@@ -32,12 +32,12 @@
 
     } from "./stores.js";
     import Icon from './components/icon.svelte';
-    import {session, signin_href, signout_href} from '@humandialog/auth.svelte'
+    import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 
     import VerticalToolbar from './vertical.toolbar.svelte'
     
 
-    export let app_config;
+    export let appConfig;
     
     let config = null;
     let has_selection_details = false;
@@ -52,19 +52,19 @@
 
     $:
     {
-        config = app_config.mainToolbar;
-        has_selection_details = app_config.selectionDetails;
-        is_logged_in = $session.is_active;
+        config = appConfig.mainToolbar;
+        has_selection_details = appConfig.selectionDetails;
+        is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
-        sign_in_href = $signin_href;
-        sign_out_href = $signout_href;
+        sign_in_href = $signInHRef;
+        sign_out_href = $signOutHRef;
 
-        tabs = Object.keys(app_config.sidebar);
+        tabs = Object.keys(appConfig.sidebar);
         if(tabs.length > 1)
             icon = FaBars;
         else    
         {
-            let first_tab = app_config.sidebar[tabs[0]];
+            let first_tab = appConfig.sidebar[tabs[0]];
             icon = first_tab.icon;
         }
     }
@@ -96,7 +96,7 @@
             if(sidebar == "*")
             {
                 if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
-                    sidebar = Object.keys(app_config.sidebar)[0];
+                    sidebar = Object.keys(appConfig.sidebar)[0];
                 else
                     sidebar = previously_visible_sidebar;
             }
@@ -191,14 +191,14 @@
         }
         
         let pt = new DOMPoint(rect.left, rect.bottom)
-        show_menu(pt, options);    
+        showMenu(pt, options);    
     }
 
 </script>
 
-<div class="flex flex-row w-full">
+<div class="print flex flex-row w-full">
     <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-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
+        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={toggle_navigator}>
             <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
         </button>
     </div>
@@ -210,7 +210,7 @@
 
     <div class="flex-none ml-auto flex h-12 sm:h-10">        
         <button
-            class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
+            class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click={show_options}>
 
             <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
@@ -220,11 +220,20 @@
 </div>
 
 {#if tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
-    <div  class="flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
-        <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
-            <VerticalToolbar {app_config} mobile={true}/>
+    <div  class="print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
+        <div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
+            <VerticalToolbar {appConfig} mobile={true}/>
         </div>    
     </div>    
 {/if}
 
-<!--Menu bind:this={menu}/-->
+<!--Menu bind:this={menu}/-->
+
+<style>
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+</style>

package/horizontal.toolbar.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  HorizontalEvents */
 /** @typedef {typeof __propDef.slots}  HorizontalSlots */
 export default class Horizontal extends SvelteComponentTyped<{
-    app_config: any;
+    appConfig: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type HorizontalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        app_config: any;
+        appConfig: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -22,12 +22,13 @@ export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
-export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
+export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Sidebar } from './components/sidebar/sidebar.svelte';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
 export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
 export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { default as SidebarList } from './components/sidebar/sidebar.list.svelte';
 export { default as List } from './components/list/list.svelte';
 export { default as ListTitle } from './components/list/list.title.svelte';
 export { default as ListSummary } from './components/list/list.summary.svelte';
@@ -37,7 +38,15 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
-export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
-export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
-export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores';
-export { inform_modification, inform_item, push_changes } from './updates';
+export { default as Kanban } from './components/kanban/kanban.svelte';
+export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
+export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
+export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
+export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
+export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
+export { mainViewReloader, reloadMainView } from './stores.js';
+export { data_tick_store, // tmp
+hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
+export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
+export { informModification, informItem, pushChanges } from './updates';

package/index.js

@@ -28,12 +28,13 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
-export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
+export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Sidebar } from './components/sidebar/sidebar.svelte';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
 export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
 export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { default as SidebarList } from './components/sidebar/sidebar.list.svelte';
 export { default as List } from './components/list/list.svelte';
 export { default as ListTitle } from './components/list/list.title.svelte';
 export { default as ListSummary } from './components/list/list.summary.svelte';
@@ -43,7 +44,15 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
-export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
-export { data_tick_store, has_selected_item, has_data_item, set_navigator_title } from "./stores";
-export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores'; // tmp
-export { inform_modification, inform_item, push_changes } from './updates'; // tmp
+export { default as Kanban } from './components/kanban/kanban.svelte';
+export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
+export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
+export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
+export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
+export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
+export { mainViewReloader, reloadMainView } from './stores.js';
+export { data_tick_store, // tmp
+hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
+export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
+export { informModification, informItem, pushChanges } from './updates'; // tmp

package/modal.svelte

@@ -8,10 +8,10 @@ export const OK = 0;
 export const OKCancel = 1;
 export const Custom = 2;
 export let mode = OKCancel;
-export let ok_caption = "OK";
-export let cancel_caption = "Cancel";
-export let on_ok_callback = void 0;
-export let on_cancel_callback = void 0;
+export let okCaption = "OK";
+export let cancelCaption = "Cancel";
+export let onOkCallback = void 0;
+export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
@@ -30,15 +30,15 @@ afterUpdate(
 );
 let close_callback = void 0;
 function on_ok(event) {
-  if (on_ok_callback)
-    on_ok_callback();
+  if (onOkCallback)
+    onOkCallback();
   if (close_callback)
     close_callback("OK");
 }
 function on_cancel(event) {
   open = false;
-  if (on_cancel_callback)
-    on_cancel_callback();
+  if (onCancelCallback)
+    onCancelCallback();
   if (close_callback)
     close_callback("Cancel");
 }
@@ -56,7 +56,7 @@ function on_cancel(event) {
         From: "opacity-100"
         To: "opacity-0"
     -->
-    <div class="fixed w-screen h-screen inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+    <div class="fixed w-screen h-screen inset-0 bg-stone-500 bg-opacity-75 transition-opacity"></div>
   
     <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -76,14 +76,14 @@ function on_cancel(event) {
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                 {#if icon}
-                    <Icon component={icon} size={6} class="text-gray-700"/>
+                    <Icon component={icon} size={6} class="text-stone-700"/>
                 {/if}
               </div>
               <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{title}</h3>
+                <h3 class="text-base font-semibold leading-6 text-stone-900" id="modal-title">{title}</h3>
                 <div class="mt-2">
                     {#if content}
-                        <p class="text-sm text-gray-500">{content}</p>
+                        <p class="text-sm text-stone-500">{content}</p>
                     {:else}
                         <slot/>
                     {/if}
@@ -91,18 +91,18 @@ function on_cancel(event) {
               </div>
             </div>
           </div>
-          <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+          <div class="bg-stone-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
             {#if mode == OK}
                 <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
                         on:click={on_ok}>
-                        {ok_caption}</button>
+                        {okCaption}</button>
             {:else if mode == OKCancel}
                 <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
                         on:click={on_ok}>
-                        {ok_caption}</button>
-                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                        {okCaption}</button>
+                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50 sm:mt-0 sm:w-auto"
                         on:click={on_cancel}>
-                        {cancel_caption}</button>
+                        {cancelCaption}</button>
             {:else if mode == Custom}
                 <slot name="footer"/>
             {/if}

package/modal.svelte.d.ts

@@ -9,10 +9,10 @@ declare const __propDef: {
         OKCancel?: 1 | undefined;
         Custom?: 2 | undefined;
         mode?: number | undefined;
-        ok_caption?: string | undefined;
-        cancel_caption?: string | undefined;
-        on_ok_callback?: Function | undefined;
-        on_cancel_callback?: Function | undefined;
+        okCaption?: string | undefined;
+        cancelCaption?: string | undefined;
+        onOkCallback?: Function | undefined;
+        onCancelCallback?: Function | undefined;
         show?: ((on_close_callback?: Function | undefined) => void) | undefined;
     };
     events: {

package/operations.svelte

@@ -1,22 +1,22 @@
-<script>import { show_floating_toolbar, show_menu, show_grid_menu } from "./components/menu.js";
-import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
+<script>import { showFloatingToolbar, showMenu, showGridMenu } from "./components/menu.js";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "./stores.js";
 export let mobile = false;
 $:
-  update($page_toolbar_operations, $context_toolbar_operations);
+  update($pageToolbarOperations, $contextToolbarOperations);
 let operations = [];
 function update(...args) {
-  if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
-    operations = $context_toolbar_operations;
+  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+    operations = $contextToolbarOperations;
   else
-    operations = $page_toolbar_operations;
+    operations = $pageToolbarOperations;
 }
 function on_click(e, operation) {
   if (!operation)
     return;
   if (operation.action) {
     let focused_item = null;
-    if ($context_items_store.focused)
-      focused_item = $context_items_store[$context_items_store.focused];
+    if ($contextItemsStore.focused)
+      focused_item = $contextItemsStore[$contextItemsStore.focused];
     operation.action(focused_item);
     return;
   }
@@ -27,32 +27,47 @@ function on_click(e, operation) {
     return;
   let rect = owner.getBoundingClientRect();
   if (operation.menu)
-    show_menu(rect, operation.menu);
+    showMenu(rect, operation.menu);
   else if (operation.toolbar)
-    show_floating_toolbar(rect, operation.toolbar);
+    showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
   else if (operation.grid)
-    show_grid_menu(rect, operation.grid);
+    showGridMenu(rect, operation.grid);
+}
+function mousedown(e) {
+  e.preventDefault();
 }
 </script>
 
-<div    class="bg-slate-100 w-full h-10 dark:bg-slate-800 overflow-x-clip overflow-y-hidden py-0 text-xs flex flex-row"
+<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}
-        <button type="button" 
-                class="py-2.5 px-5 
-                text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white 
-                bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
-                border-gray-200 focus:outline-none dark:border-gray-600
-                inline-flex items-center"
-                class:border-r={!mobile}
-                class:border-l={mobile}
-                on:click={(e) => {on_click(e, operation)}}>
-            <div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
-            <span class="ml-1">{operation.caption}</span>
-        </button>    
-    {/each}
+        {#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>
 
-</div>
+<style>
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.45",
+  "version": "0.5.2",
   "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.2.11",
+    "@humandialog/auth.svelte": "^1.4.0",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"
@@ -74,6 +74,16 @@
     "./components/icon.svelte": "./components/icon.svelte",
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
+    "./components/kanban/Kanban": "./components/kanban/Kanban.js",
+    "./components/kanban/internal/kanban.card.svelte": "./components/kanban/internal/kanban.card.svelte",
+    "./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/kanban.callbacks.svelte": "./components/kanban/kanban.callbacks.svelte",
+    "./components/kanban/kanban.column.svelte": "./components/kanban/kanban.column.svelte",
+    "./components/kanban/kanban.summary.svelte": "./components/kanban/kanban.summary.svelte",
+    "./components/kanban/kanban.svelte": "./components/kanban/kanban.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",
     "./components/list/internal/list.element.summary.svelte": "./components/list/internal/list.element.summary.svelte",
@@ -91,6 +101,7 @@
     "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
     "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
     "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",
+    "./components/sidebar/sidebar.list.svelte": "./components/sidebar/sidebar.list.svelte",
     "./components/sidebar/sidebar.svelte": "./components/sidebar/sidebar.svelte",
     "./components/simple.table.svelte": "./components/simple.table.svelte",
     "./components/table/column.svelte": "./components/table/column.svelte",