@humandialog/forms.svelte 1.3.11 → 1.3.13

package/components/menu.js

@@ -1,57 +1,57 @@
-import Menu from './contextmenu.svelte';
-import Floating_container from './Floating_container.svelte';
-import Grid from './Grid.menu.svelte';
-let menu_comopnent = null;
-let toolbar_component = null;
-export function showMenu(around, operations) {
-    let menu_element = document.getElementById("__hd_svelte_contextmenu");
-    if (!menu_element) {
-        let app_div = document.getElementById("__hd_svelte_layout_root");
-        menu_comopnent = new Menu({
-            target: app_div,
-            props: {}
-        });
-        menu_comopnent.show(around, operations);
-    }
-    else if (menu_comopnent) {
-        if (menu_comopnent.isVisible())
-            menu_comopnent.hide();
-        else
-            menu_comopnent.show(around, operations);
-    }
-    else
-        console.error('what now?');
-}
-export function hideWholeContextMenu() {
-    if (menu_comopnent) {
-        if (menu_comopnent.isVisible())
-            menu_comopnent.hide();
-    }
-}
-export function showFloatingToolbar(around, toolbar, props = {}) {
-    let floating_container = document.getElementById("__hd_svelte_floating_container");
-    if (!floating_container) {
-        let app_div = document.getElementById("__hd_svelte_layout_root");
-        toolbar_component = new Floating_container({
-            target: app_div,
-            props: {}
-        });
-        toolbar_component.show(around, toolbar, props);
-    }
-    else if (toolbar_component) {
-        //if(toolbar_component.isVisible())
-        //{
-        //    toolbar_component.hide();
-        //}
-        //else
-        //{
-        toolbar_component.show(around, toolbar, props);
-        //}
-    }
-    else
-        console.error('what now?');
-    return toolbar_component;
-}
-export function showGridMenu(around, operations) {
-    showFloatingToolbar(around, Grid, { operations: operations });
-}
+import Menu from './contextmenu.svelte';
+import Floating_container from './Floating_container.svelte';
+import Grid from './Grid.menu.svelte';
+let menu_comopnent = null;
+let toolbar_component = null;
+export function showMenu(around, operations) {
+    let menu_element = document.getElementById("__hd_svelte_contextmenu");
+    if (!menu_element) {
+        let app_div = document.getElementById("__hd_svelte_layout_root");
+        menu_comopnent = new Menu({
+            target: app_div,
+            props: {}
+        });
+        menu_comopnent.show(around, operations);
+    }
+    else if (menu_comopnent) {
+        if (menu_comopnent.isVisible())
+            menu_comopnent.hide();
+        else
+            menu_comopnent.show(around, operations);
+    }
+    else
+        console.error('what now?');
+}
+export function hideWholeContextMenu() {
+    if (menu_comopnent) {
+        if (menu_comopnent.isVisible())
+            menu_comopnent.hide();
+    }
+}
+export function showFloatingToolbar(around, toolbar, props = {}) {
+    let floating_container = document.getElementById("__hd_svelte_floating_container");
+    if (!floating_container) {
+        let app_div = document.getElementById("__hd_svelte_layout_root");
+        toolbar_component = new Floating_container({
+            target: app_div,
+            props: {}
+        });
+        toolbar_component.show(around, toolbar, props);
+    }
+    else if (toolbar_component) {
+        //if(toolbar_component.isVisible())
+        //{
+        //    toolbar_component.hide();
+        //}
+        //else
+        //{
+        toolbar_component.show(around, toolbar, props);
+        //}
+    }
+    else
+        console.error('what now?');
+    return toolbar_component;
+}
+export function showGridMenu(around, operations) {
+    showFloatingToolbar(around, Grid, { operations: operations });
+}

package/components/radio.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value: any;
-        disabled?: boolean | undefined;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        c?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
-export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: any;
+        disabled?: boolean | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RadioProps = typeof __propDef.props;
+export type RadioEvents = typeof __propDef.events;
+export type RadioSlots = typeof __propDef.slots;
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
+}
+export {};

package/components/sidebar/sidebar.brand.svelte.d.ts

@@ -1,33 +1,33 @@
-/** @typedef {typeof __propDef.props}  SidebarProps */
-/** @typedef {typeof __propDef.events}  SidebarEvents */
-/** @typedef {typeof __propDef.slots}  SidebarSlots */
-export default class Sidebar extends SvelteComponentTyped<{
-    [x: string]: any;
-    img?: string | undefined;
-    href?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    summary: {};
-}> {
-}
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        img?: string | undefined;
-        href?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        summary: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    [x: string]: any;
+    img?: string | undefined;
+    href?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    summary: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        img?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        summary: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.group.svelte

@@ -36,11 +36,11 @@
 {/if}
 
 {#if !collapsable}
-    <ul class="space-y-2 {list_border}">
+    <ul class= "{list_border}">
         <slot/>
     </ul>
 {:else if !collapsed}
-    <ul class="space-y-2 {list_border}">
+    <ul class="{list_border}">
         <slot/>
     </ul>
 {/if}

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -1,33 +1,33 @@
-/** @typedef {typeof __propDef.props}  SidebarProps */
-/** @typedef {typeof __propDef.events}  SidebarEvents */
-/** @typedef {typeof __propDef.slots}  SidebarSlots */
-export default class Sidebar extends SvelteComponentTyped<{
-    title?: string | undefined;
-    border?: boolean | undefined;
-    collapsable?: boolean | undefined;
-    onExpand?: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        border?: boolean | undefined;
-        collapsable?: boolean | undefined;
-        onExpand?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    title?: string | undefined;
+    border?: boolean | undefined;
+    collapsable?: boolean | undefined;
+    onExpand?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        border?: boolean | undefined;
+        collapsable?: boolean | undefined;
+        onExpand?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.item.svelte

@@ -2,6 +2,7 @@
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisH } from "svelte-icons/fa";
+import { link, push } from "svelte-spa-router";
 import {
   selectable as _selectable,
   isSelected,
@@ -9,7 +10,8 @@ import {
   handleSelect,
   activateItem,
   startEditing,
-  getActive
+  getActive,
+  isOnNavigationPage
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -95,14 +97,24 @@ function on_link_clicked(e) {
     handleSelect(e);
   else if (item)
     handleSelect(e);
+  if (!e.target)
+    return;
+  let linkNode = e.target;
+  while (linkNode && linkNode.tagName != "A")
+    linkNode = linkNode.parentElement;
+  if (!linkNode)
+    return;
+  const href2 = linkNode.getAttribute("href");
+  e.preventDefault();
   if (isOnPage) {
-    if (!isRowActive) {
-      e.preventDefault();
-    } else
-      e.stopPropagation();
+    if (isRowActive) {
+      if (href2)
+        push(href2);
+    }
   } else {
-    e.stopPropagation();
     auto_hide_sidebar();
+    if (href2)
+      push(href2);
   }
 }
 function on_contextmenu(e) {
@@ -144,14 +156,26 @@ function activateRow(e) {
     return;
   if (!isOnPage)
     return;
-  let operationsContainer = [];
+  let operationsContainer;
   if (operations) {
     let operationsList = operations(root);
-    operationsContainer.push({
-      icon: FaEllipsisH,
-      menu: operationsList
-    });
-  }
+    operationsContainer = {
+      opver: 1,
+      operations: [
+        {
+          caption: "View",
+          operations: [
+            {
+              icon: FaEllipsisH,
+              menu: operationsList,
+              fab: "M10"
+            }
+          ]
+        }
+      ]
+    };
+  } else
+    operationsContainer = [];
   activateItem("props", item, operationsContainer);
   if (e)
     e.stopPropagation();
@@ -166,24 +190,24 @@ function activateRow(e) {
         on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
-        class="     border border-transparent rounded-lg
-                    text-lg sm:text-base font-normal 
+        class="     mb-2
+                    border border-transparent rounded-lg
                     text-stone-900 dark:text-white  {user_class}"
         class:sm:hover:bg-stone-100={!!href}
         class:sm:dark:hover:bg-stone-700={!!href}
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
         class:selected={selected(selectable, context_data)}>
-            <div class="flex flex-row justify-between">
+            <div class="flex flex-row justify-between
+                        text-base font-semibold">
                 {#if href}
                     <a  href={href} 
                         on:click={on_link_clicked} 
-                        class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group"
-                        class:mb-3={!summary}
-                        class:sm:mb-2={!summary}
+                        class="flex-1 ml-2 inline-flex items-center group"
                         >
                         {#if icon}
-                            <Icon class="w-5 h-5" component={icon}/>
+                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
+                            
                         {/if}
                         <span   class="ml-3 group-hover:underline"
                                 use:editable_if_needed={editable}>
@@ -191,12 +215,10 @@ function activateRow(e) {
                         </span>
                     </a>
                 {:else}
-                    <p  class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group cursor-default"
-                        class:mb-3={!summary}
-                        class:sm:mb-2={!summary}
+                    <p  class="flex-1 ml-2 inline-flex items-center group cursor-default"
                         use:selectable_if_needed={selectable}>
                         {#if icon}
-                            <Icon class="w-5 h-5" component={icon}/>
+                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
                         {/if}
                         <span   class="ml-3"
                                 use:editable_if_needed={editable}>
@@ -205,11 +227,11 @@ function activateRow(e) {
                     </p>
                 {/if}
 
-                {#if !isOnPage}
-                <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
+                {#if  !isOnPage}
+                <section    class="flex-0 w-20 sm:w-12 flex-0 flex flex-row"
                             use:selectable_if_needed={selectable}>
                     {#if can_show_context_menu(selectable, context_data)}
-                        <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
+                        <button class="w-5 h-5 mt-0.5 mr-3 ml-auto" on:click={on_show_menu}>
                             <FaBars/>
                         </button>
                     {/if}
@@ -217,10 +239,11 @@ function activateRow(e) {
                 {/if}
             </div>
 
-            {#if summary}
-                <p class="text-xs ml-10 mb-2 mr-2
+            {#if summaryText}
+                <p class="ml-14 mt-1
                         text-stone-900 dark:text-stone-400
-                        cursor-default"
+                        cursor-default
+                        text-sm   "
                     use:selectable_if_needed={selectable}
                     use:editable_if_needed={summaryEditable}
                     bind:this={summaryElement}>

package/components/sidebar/sidebar.item.svelte.d.ts

@@ -1,32 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href: string;
-        icon?: any | undefined;
-        active?: boolean | undefined;
-        selectable?: any | undefined;
-        editable?: any | undefined;
-        operations?: any | undefined;
-        item?: object | undefined;
-        summary?: string | object | undefined;
-        editSummary?: (() => Promise<void>) | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
-export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
-    get editSummary(): () => Promise<void>;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        icon?: any | undefined;
+        active?: boolean | undefined;
+        selectable?: any | undefined;
+        editable?: any | undefined;
+        operations?: any | undefined;
+        item?: object | undefined;
+        summary?: string | object | undefined;
+        editSummary?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get editSummary(): () => Promise<void>;
+}
+export {};

package/components/sidebar/sidebar.list.svelte

@@ -100,12 +100,14 @@ function onBlurInserter() {
 {/each }
 
 {#if inserter}
-    <Edit   class="p-3 sm:p-2 text-lg sm:text-base font-normal text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
+    <Edit   class=" mb-2 ml-2
+            text-base font-normal 
+            text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
             onEnter={onNewElement} 
             placeholder={inserterPlaceholder} 
             inserter={true}
             onBlur={onBlurInserter}
             bind:this={inserterElement}>
-        <Icon size={5} component={FaPlus} class="mr-3"/>
+        <Icon component={FaPlus} class="w-5 h-5 mt-0.5 ml-2.5 pr-0.5 mr-4"/>
     </Edit>
 {/if}

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

@@ -1,38 +1,38 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        objects: object[];
-        orderAttrib?: string | undefined;
-        inserter?: Function | undefined;
-        inserterPlaceholder?: string | undefined;
-        ORDER_STEP?: 64 | undefined;
-        MIN_ORDER?: 0 | undefined;
-        reload?: ((_objects: object[]) => void) | undefined;
-        moveUp?: ((element: object) => void) | undefined;
-        moveTop?: ((element: object) => void) | undefined;
-        moveDown?: ((element: object) => void) | undefined;
-        add?: ((onAddHandler: Function) => Promise<void>) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            item: object;
-            idx: any;
-        };
-    };
-};
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
-export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
-    get ORDER_STEP(): 64;
-    get MIN_ORDER(): 0;
-    get reload(): (_objects: object[]) => void;
-    get moveUp(): (element: object) => void;
-    get moveTop(): (element: object) => void;
-    get moveDown(): (element: object) => void;
-    get add(): (onAddHandler: Function) => Promise<void>;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        objects: object[];
+        orderAttrib?: string | undefined;
+        inserter?: Function | undefined;
+        inserterPlaceholder?: string | undefined;
+        ORDER_STEP?: 64 | undefined;
+        MIN_ORDER?: 0 | undefined;
+        reload?: ((_objects: object[]) => void) | undefined;
+        moveUp?: ((element: object) => void) | undefined;
+        moveTop?: ((element: object) => void) | undefined;
+        moveDown?: ((element: object) => void) | undefined;
+        add?: ((onAddHandler: Function) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: object;
+            idx: any;
+        };
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get ORDER_STEP(): 64;
+    get MIN_ORDER(): 0;
+    get reload(): (_objects: object[]) => void;
+    get moveUp(): (element: object) => void;
+    get moveTop(): (element: object) => void;
+    get moveDown(): (element: object) => void;
+    get add(): (onAddHandler: Function) => Promise<void>;
+}
+export {};