@humandialog/forms.svelte 0.5.4 → 0.5.6

package/stores.d.ts

@@ -1,39 +1,39 @@
-export function setNavigatorTitle(key: any, title: any): void;
-export function hasSelectedItem(): boolean;
-export function hasDataItem(): boolean;
-export function reloadMainView(): void;
-export function set_dark_mode_default(value: any): void;
-export function set_default_tools_visible(value: any): void;
-export function restore_defults(): void;
-export function toggle_sidebar(index: any): void;
-export function auto_hide_sidebar(): void;
-export function hide_sidebar(): void;
-export function show_sidebar(index: any): void;
-export const data_tick_store: import("svelte/store").Writable<number>;
-export const contextItemsStore: import("svelte/store").Writable<{
-    focused: string;
-    data: null;
-    sel: null;
-}>;
-export const context_info_store: import("svelte/store").Writable<{
-    data: string;
-    sel: string;
-}>;
-export const contextTypesStore: import("svelte/store").Writable<{
-    focused: string;
-    data: null;
-    sel: null;
-}>;
-export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
-export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
-export const page_title: import("svelte/store").Writable<string>;
-export const nav_titles: import("svelte/store").Writable<{}>;
-export const mainViewReloader: import("svelte/store").Writable<number>;
-export const dark_mode_store: import("svelte/store").Writable<any>;
-export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
-export let previously_visible_sidebar: string;
-export let sidebar_left_pos: import("svelte/store").Writable<number>;
-export const tools_visible_store: import("svelte/store").Writable<any>;
-export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
-export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
-export const visible_property_tab_store: import("svelte/store").Writable<string>;
+export function setNavigatorTitle(key: any, title: any): void;
+export function hasSelectedItem(): boolean;
+export function hasDataItem(): boolean;
+export function reloadMainView(): void;
+export function set_dark_mode_default(value: any): void;
+export function set_default_tools_visible(value: any): void;
+export function restore_defults(): void;
+export function toggle_sidebar(index: any): void;
+export function auto_hide_sidebar(): void;
+export function hide_sidebar(): void;
+export function show_sidebar(index: any): void;
+export const data_tick_store: import("svelte/store").Writable<number>;
+export const contextItemsStore: import("svelte/store").Writable<{
+    focused: string;
+    data: null;
+    sel: null;
+}>;
+export const context_info_store: import("svelte/store").Writable<{
+    data: string;
+    sel: string;
+}>;
+export const contextTypesStore: import("svelte/store").Writable<{
+    focused: string;
+    data: null;
+    sel: null;
+}>;
+export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
+export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
+export const page_title: import("svelte/store").Writable<string>;
+export const nav_titles: import("svelte/store").Writable<{}>;
+export const mainViewReloader: import("svelte/store").Writable<number>;
+export const dark_mode_store: import("svelte/store").Writable<any>;
+export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
+export let previously_visible_sidebar: string;
+export let sidebar_left_pos: import("svelte/store").Writable<number>;
+export const tools_visible_store: import("svelte/store").Writable<any>;
+export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
+export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
+export const visible_property_tab_store: import("svelte/store").Writable<string>;

package/tenant.members.svelte

@@ -53,6 +53,7 @@
             {
                 reef_users.push(
                     {
+                        Id: new_reef_user_id++,
                         [nameAttrib]: u[nameAttrib],
                         [emailAttrib]: u[emailAttrib],
                         [refAttrib]: u[refAttrib],
@@ -63,8 +64,7 @@
                         avatar_url : "",
                         invitation_not_accepted: false,
                         removed: false,
-                        membership_tag: "",
-                        __hd_internal_item_id: new_reef_user_id++
+                        membership_tag: ""
                     }
                 )
             })
@@ -90,9 +90,9 @@
             handled_no++;
             if(handled_no == reef_users.length)
             {
+                //console.log('reload', reef_users)
                 
-                
-                list?.updateObjects(reef_users);
+                list?.reload(reef_users);
             }
         } )
     }
@@ -114,7 +114,7 @@
         else
             user.membership_tag = "";
 
-        user.__hd_internal_item_id = new_reef_user_id++;
+        user.Id = new_reef_user_id++;
     }
 
     /*onMount(
@@ -362,10 +362,10 @@
         {
             reef_users.push(
                 {
+                    Id: 1000+i,
                     [nameAttrib]: names[i],
                     [emailAttrib]: 'u@fake.com',
-                    [refAttrib]: `./User/${1000+i}`,
-                    __hd_internal_item_id: 1000+i
+                    [refAttrib]: `./User/${1000+i}`
                 }
             )
         }
@@ -402,7 +402,7 @@
             set_user_info(new_reef_user, details);
 
             reef_users = [...reef_users, new_reef_user]
-            list?.updateObjects(reef_users);
+            list?.reload(reef_users);
         }
 
 
@@ -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}
@@ -434,7 +434,6 @@
                 title='Members' 
                 toolbarOperations={user_operations} 
                 contextMenu={user_context_menu}
-                key='__hd_internal_item_id'
                 bind:this={list}>
             <ListTitle a={nameAttrib} onChange={on_name_changed}/>
             <ListSummary a={emailAttrib} readonly/>
@@ -487,7 +486,7 @@
                 <div class="flex flex-row items-center">
                     <span class="">Maintainer</span>
                     <Icon id="b1" size={4} component={FaInfoCircle} class="text-stone-400 ml-5 pt-0 mt-1"/>
-                    <Popover class="w-64 text-sm font-light " title="Maintainer" triggeredBy="#b1">
+                    <Popover class="w-64 text-sm font-light" title="Maintainer" triggeredBy="#b1" color="dropdown">
                         Means that the invited user will be able to add and remove others and manage permissions in this organization.
                     </Popover>
                 </div>

package/tenant.members.svelte.d.ts

@@ -1,33 +1,33 @@
-/** @typedef {typeof __propDef.props}  TenantProps */
-/** @typedef {typeof __propDef.events}  TenantEvents */
-/** @typedef {typeof __propDef.slots}  TenantSlots */
-export default class Tenant extends SvelteComponentTyped<{
-    users?: any;
-    nameAttrib?: string | undefined;
-    emailAttrib?: string | undefined;
-    refAttrib?: string | undefined;
-    showFiles?: boolean | undefined;
-    appGroups?: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TenantProps = typeof __propDef.props;
-export type TenantEvents = typeof __propDef.events;
-export type TenantSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        users?: any;
-        nameAttrib?: string | undefined;
-        emailAttrib?: string | undefined;
-        refAttrib?: string | undefined;
-        showFiles?: boolean | undefined;
-        appGroups?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TenantProps */
+/** @typedef {typeof __propDef.events}  TenantEvents */
+/** @typedef {typeof __propDef.slots}  TenantSlots */
+export default class Tenant extends SvelteComponentTyped<{
+    users?: any;
+    nameAttrib?: string | undefined;
+    emailAttrib?: string | undefined;
+    refAttrib?: string | undefined;
+    showFiles?: boolean | undefined;
+    appGroups?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TenantProps = typeof __propDef.props;
+export type TenantEvents = typeof __propDef.events;
+export type TenantSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        users?: any;
+        nameAttrib?: string | undefined;
+        emailAttrib?: string | undefined;
+        refAttrib?: string | undefined;
+        showFiles?: boolean | undefined;
+        appGroups?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/tile.svelte.d.ts

@@ -1,33 +1,33 @@
-/** @typedef {typeof __propDef.props}  TileProps */
-/** @typedef {typeof __propDef.events}  TileEvents */
-/** @typedef {typeof __propDef.slots}  TileSlots */
-export default class Tile extends SvelteComponentTyped<{
-    context?: string | undefined;
-    self?: null | undefined;
-    c?: string | undefined;
-    cl?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TileProps = typeof __propDef.props;
-export type TileEvents = typeof __propDef.events;
-export type TileSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        context?: string | undefined;
-        self?: null | undefined;
-        c?: string | undefined;
-        cl?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  TileProps */
+/** @typedef {typeof __propDef.events}  TileEvents */
+/** @typedef {typeof __propDef.slots}  TileSlots */
+export default class Tile extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    cl?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TileProps = typeof __propDef.props;
+export type TileEvents = typeof __propDef.events;
+export type TileSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        cl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/tiles.row.svelte.d.ts

@@ -1,31 +1,31 @@
-/** @typedef {typeof __propDef.props}  TilesProps */
-/** @typedef {typeof __propDef.events}  TilesEvents */
-/** @typedef {typeof __propDef.slots}  TilesSlots */
-export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
-    cl?: string | undefined;
-    w?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TilesProps = typeof __propDef.props;
-export type TilesEvents = typeof __propDef.events;
-export type TilesSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        c?: string | undefined;
-        cl?: string | undefined;
-        w?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  TilesProps */
+/** @typedef {typeof __propDef.events}  TilesEvents */
+/** @typedef {typeof __propDef.slots}  TilesSlots */
+export default class Tiles extends SvelteComponentTyped<{
+    c?: string | undefined;
+    cl?: string | undefined;
+    w?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TilesProps = typeof __propDef.props;
+export type TilesEvents = typeof __propDef.events;
+export type TilesSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        c?: string | undefined;
+        cl?: string | undefined;
+        w?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/tiles.vertical.row.svelte.d.ts

@@ -1,29 +1,29 @@
-/** @typedef {typeof __propDef.props}  TilesProps */
-/** @typedef {typeof __propDef.events}  TilesEvents */
-/** @typedef {typeof __propDef.slots}  TilesSlots */
-export default class Tiles extends SvelteComponentTyped<{
-    c?: string | undefined;
-    cl?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TilesProps = typeof __propDef.props;
-export type TilesEvents = typeof __propDef.events;
-export type TilesSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        c?: string | undefined;
-        cl?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  TilesProps */
+/** @typedef {typeof __propDef.events}  TilesEvents */
+/** @typedef {typeof __propDef.slots}  TilesSlots */
+export default class Tiles extends SvelteComponentTyped<{
+    c?: string | undefined;
+    cl?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TilesProps = typeof __propDef.props;
+export type TilesEvents = typeof __propDef.events;
+export type TilesSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        c?: string | undefined;
+        cl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/updates.d.ts

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

@@ -1,35 +1,35 @@
-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 isSelected(itm: any): boolean;
-export function isActive(context_level: any, itm: any): boolean;
-export function getActive(context_level: any): any;
-export function editable(node: any, params: any): {
-    destroy(): void;
-} | undefined;
-export function startEditing(element: any, finish_callback: any): void;
-export function selectable(node: any, itm: any): {
-    destroy(): void;
-};
-export function handleSelect(e: any): void;
-export function parseWidthDirective(c: any): string;
-export function shouldBeComapact(): boolean;
-export function insertAt(array: any, index: any, element: any): any;
-export function insertAfter(array: any, after: any, element: any): any;
-export function getPrev(array: any, element: any): any;
-export function getNext(array: any, element: any): any;
-export function getFirst(array: any): any;
-export function getLast(array: any): any;
-export function removeAt(array: any, index: any): any;
-export function remove(array: any, element: any): any;
-export function swapElements(array: any, e1: any, e2: any): any;
-export namespace icons {
-    const symbols: null;
-}
-export namespace SCREEN_SIZES {
-    const sm: number;
-    const md: number;
-    const lg: number;
-    const xl: number;
-}
+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 isSelected(itm: any): boolean;
+export function isActive(context_level: any, itm: any): boolean;
+export function getActive(context_level: any): any;
+export function editable(node: any, params: any): {
+    destroy(): void;
+} | undefined;
+export function startEditing(element: any, finish_callback: any): void;
+export function selectable(node: any, itm: any): {
+    destroy(): void;
+};
+export function handleSelect(e: any): void;
+export function parseWidthDirective(c: any): string;
+export function shouldBeComapact(): boolean;
+export function insertAt(array: any, index: any, element: any): any;
+export function insertAfter(array: any, after: any, element: any): any;
+export function getPrev(array: any, element: any): any;
+export function getNext(array: any, element: any): any;
+export function getFirst(array: any): any;
+export function getLast(array: any): any;
+export function removeAt(array: any, index: any): any;
+export function remove(array: any, element: any): any;
+export function swapElements(array: any, e1: any, e2: any): any;
+export namespace icons {
+    const symbols: null;
+}
+export namespace SCREEN_SIZES {
+    const sm: number;
+    const md: number;
+    const lg: number;
+    const xl: number;
+}

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}/-->