@humandialog/forms.svelte 0.5.8 → 0.5.10

package/components/sidebar/sidebar.item.svelte

@@ -1,11 +1,14 @@
-<script>import Icon from "../icon.svelte";
+<script>import { getContext } from "svelte";
+import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
-import FaBars from "svelte-icons/fa/FaBars.svelte";
+import { FaBars, FaEllipsisH } from "svelte-icons/fa";
 import {
   selectable as _selectable,
   isSelected,
   editable as _editable,
-  handleSelect
+  handleSelect,
+  activateItem,
+  getActive
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -14,13 +17,30 @@ export let active = false;
 export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
+export let item = void 0;
+let isOnPage = getContext("rIs-page-component");
 $:
   context_data = $contextItemsStore;
+$:
+  isRowActive = calculateIsRowActive($contextItemsStore);
 let user_class = $$props.class ?? "";
 let root;
+function calculateIsRowActive(...args) {
+  if (!isOnPage)
+    return active;
+  if (!item)
+    return active;
+  const activeItem = getActive("props");
+  if (activeItem == item)
+    return true;
+  else
+    return false;
+}
 function selectable_if_needed(node, selectable2) {
   if (selectable2)
     _selectable(node, selectable2);
+  else if (item)
+    _selectable(node, item);
 }
 function selected(itm, context_data2) {
   if (isSelected(itm))
@@ -36,7 +56,15 @@ function on_link_clicked(e) {
   auto_hide_sidebar();
   if (selectable)
     handleSelect(e);
-  e.stopPropagation();
+  else if (item)
+    handleSelect(e);
+  if (isOnPage) {
+    if (!isRowActive) {
+      e.preventDefault();
+    } else
+      e.stopPropagation();
+  } else
+    e.stopPropagation();
 }
 function on_contextmenu(e) {
   if (!operations)
@@ -50,6 +78,8 @@ function on_contextmenu(e) {
   e.preventDefault();
 }
 function can_show_context_menu(itm, context_data2) {
+  if (isOnPage)
+    return false;
   if (!selected(itm, context_data2))
     return false;
   if (!operations)
@@ -70,12 +100,30 @@ function on_show_menu(e) {
     return;
   showMenu(rect, operations_list);
 }
+function activateRow(e) {
+  if (!item)
+    return;
+  if (!isOnPage)
+    return;
+  let operationsContainer = [];
+  if (operations) {
+    let operationsList = operations(root);
+    operationsContainer.push({
+      icon: FaEllipsisH,
+      menu: operationsList
+    });
+  }
+  activateItem("props", item, operationsContainer);
+  if (e)
+    e.stopPropagation();
+}
 </script>
 
 <li bind:this={root}>
     <!--svelte-ignore a11y-click-events-have-key-events -->
     <div
         on:click
+        on:click={activateRow}
         on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
@@ -84,8 +132,8 @@ function on_show_menu(e) {
                     text-stone-900 sm:hover:bg-stone-100  
                     dark:text-white sm:dark:hover:bg-stone-700 {user_class}
                     flex flex-row justify-between"
-        class:bg-stone-200={active}
-        class:dark:bg-stone-700={active}
+        class:bg-stone-200={isRowActive}
+        class:dark:bg-stone-700={isRowActive}
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked} 
@@ -99,6 +147,7 @@ function on_show_menu(e) {
                 </span>
             </a>
 
+            {#if !isOnPage}
             <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
                         use:selectable_if_needed={selectable}>
                 {#if can_show_context_menu(selectable, context_data)}
@@ -107,6 +156,7 @@ function on_show_menu(e) {
                     </button>
                 {/if}
             </section>
+            {/if}
         </div>
 </li>
 

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

@@ -1,28 +1,29 @@
-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;
-    };
-    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> {
-}
-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;
+    };
+    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> {
+}
+export {};

package/components/sidebar/sidebar.list.svelte

@@ -3,12 +3,14 @@ import Edit from "../edit.field.svelte";
 import { FaPlus } from "svelte-icons/fa";
 import { getPrev, getNext, swapElements, getLast } from "../../utils";
 import { informModification, pushChanges } from "../../updates";
+import { tick } from "svelte";
 export let objects;
 export let orderAttrib = void 0;
 export let inserter = void 0;
 export let inserterPlaceholder = "New";
 export const ORDER_STEP = 64;
 export const MIN_ORDER = 0;
+let temporaryInserter = false;
 export function reload(_objects) {
   objects = _objects;
 }
@@ -40,6 +42,13 @@ export function moveDown(element) {
     pushChanges();
   }
 }
+let inserterElement;
+export async function add(onAddHandler) {
+  temporaryInserter = true;
+  inserter = onAddHandler;
+  await tick();
+  inserterElement?.run();
+}
 function onNewElement(text) {
   if (orderAttrib) {
     let newElementOrder;
@@ -51,20 +60,32 @@ function onNewElement(text) {
     inserter(text, newElementOrder);
   } else
     inserter(text);
+  if (temporaryInserter) {
+    temporaryInserter = false;
+    inserter = void 0;
+  }
+}
+function onBlurInserter() {
+  if (temporaryInserter) {
+    temporaryInserter = false;
+    inserter = void 0;
+  }
 }
-</script>
-
-{#each objects as item (item.Id)}
-    {#key item}             <!-- Forces to fully rerender when item changed to fire use: callbacks again -->
-        <slot {item}/>
-    {/key}
-{/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" 
-            onEnter={onNewElement} 
-            placeholder={inserterPlaceholder} 
-            inserter={true}>
-        <Icon size={5} component={FaPlus} class="mr-3"/>
-    </Edit>
+</script>
+
+{#each objects as item (item.Id)}
+    {#key item}             <!-- Forces to fully rerender when item changed to fire use: callbacks again -->
+        <slot {item}/>
+    {/key}
+{/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" 
+            onEnter={onNewElement} 
+            placeholder={inserterPlaceholder} 
+            inserter={true}
+            onBlur={onBlurInserter}
+            bind:this={inserterElement}>
+        <Icon size={5} component={FaPlus} class="mr-3"/>
+    </Edit>
 {/if}

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

@@ -1,33 +1,35 @@
-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;
-        moveDown?: ((element: object) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            item: object;
-        };
-    };
-};
-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 moveDown(): (element: object) => 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;
+        moveDown?: ((element: object) => void) | undefined;
+        add?: ((onAddHandler: Function) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: object;
+        };
+    };
+};
+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 moveDown(): (element: object) => void;
+    get add(): (onAddHandler: Function) => Promise<void>;
+}
+export {};

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

@@ -1,27 +1,27 @@
-/** @typedef {typeof __propDef.props}  SidebarProps */
-/** @typedef {typeof __propDef.events}  SidebarEvents */
-/** @typedef {typeof __propDef.slots}  SidebarSlots */
-export default class Sidebar extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [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: {
-        [x: string]: never;
-    };
-    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<{
+    [x: string]: never;
+}, {
+    [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: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/simple.table.svelte.d.ts

@@ -1,41 +1,41 @@
-/** @typedef {typeof __propDef.props}  SimpleProps */
-/** @typedef {typeof __propDef.events}  SimpleEvents */
-/** @typedef {typeof __propDef.slots}  SimpleSlots */
-export default class Simple extends SvelteComponentTyped<{
-    focus?: boolean | undefined;
-    select?: string | undefined;
-    context?: string | undefined;
-    self?: null | undefined;
-    nav?: boolean | undefined;
-    collection?: string | undefined;
-    objects?: null | undefined;
-    headers?: any[] | undefined;
-    fields?: any[] | undefined;
-    cinfo?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SimpleProps = typeof __propDef.props;
-export type SimpleEvents = typeof __propDef.events;
-export type SimpleSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        focus?: boolean | undefined;
-        select?: string | undefined;
-        context?: string | undefined;
-        self?: null | undefined;
-        nav?: boolean | undefined;
-        collection?: string | undefined;
-        objects?: null | undefined;
-        headers?: any[] | undefined;
-        fields?: any[] | undefined;
-        cinfo?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  SimpleProps */
+/** @typedef {typeof __propDef.events}  SimpleEvents */
+/** @typedef {typeof __propDef.slots}  SimpleSlots */
+export default class Simple extends SvelteComponentTyped<{
+    focus?: boolean | undefined;
+    select?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
+    nav?: boolean | undefined;
+    collection?: string | undefined;
+    objects?: null | undefined;
+    headers?: any[] | undefined;
+    fields?: any[] | undefined;
+    cinfo?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SimpleProps = typeof __propDef.props;
+export type SimpleEvents = typeof __propDef.events;
+export type SimpleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        focus?: boolean | undefined;
+        select?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
+        nav?: boolean | undefined;
+        collection?: string | undefined;
+        objects?: null | undefined;
+        headers?: any[] | undefined;
+        fields?: any[] | undefined;
+        cinfo?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/table/_template.table.svelte.d.ts

@@ -1,57 +1,57 @@
-/** @typedef {typeof __propDef.props}  TemplateProps */
-/** @typedef {typeof __propDef.events}  TemplateEvents */
-/** @typedef {typeof __propDef.slots}  TemplateSlots */
-export default class Template extends SvelteComponentTyped<{
-    focus?: boolean | undefined;
-    select?: string | undefined;
-    context?: string | undefined;
-    self?: null | undefined;
-    nav?: boolean | undefined;
-    collection?: string | undefined;
-    objects?: null | undefined;
-    headers?: any[] | undefined;
-    fields?: any[] | undefined;
-    cinfo?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    row: {
-        item: any;
-    };
-    cell: {
-        field: any;
-        value: any;
-    };
-}> {
-}
-export type TemplateProps = typeof __propDef.props;
-export type TemplateEvents = typeof __propDef.events;
-export type TemplateSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        focus?: boolean | undefined;
-        select?: string | undefined;
-        context?: string | undefined;
-        self?: null | undefined;
-        nav?: boolean | undefined;
-        collection?: string | undefined;
-        objects?: null | undefined;
-        headers?: any[] | undefined;
-        fields?: any[] | undefined;
-        cinfo?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        row: {
-            item: any;
-        };
-        cell: {
-            field: any;
-            value: any;
-        };
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  TemplateProps */
+/** @typedef {typeof __propDef.events}  TemplateEvents */
+/** @typedef {typeof __propDef.slots}  TemplateSlots */
+export default class Template extends SvelteComponentTyped<{
+    focus?: boolean | undefined;
+    select?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
+    nav?: boolean | undefined;
+    collection?: string | undefined;
+    objects?: null | undefined;
+    headers?: any[] | undefined;
+    fields?: any[] | undefined;
+    cinfo?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    row: {
+        item: any;
+    };
+    cell: {
+        field: any;
+        value: any;
+    };
+}> {
+}
+export type TemplateProps = typeof __propDef.props;
+export type TemplateEvents = typeof __propDef.events;
+export type TemplateSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        focus?: boolean | undefined;
+        select?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
+        nav?: boolean | undefined;
+        collection?: string | undefined;
+        objects?: null | undefined;
+        headers?: any[] | undefined;
+        fields?: any[] | undefined;
+        cinfo?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        row: {
+            item: any;
+        };
+        cell: {
+            field: any;
+            value: any;
+        };
+    };
+};
+export {};

package/components/table/column.svelte.d.ts

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        header?: string | undefined;
-        field?: string | undefined;
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ColumnProps = typeof __propDef.props;
-export type ColumnEvents = typeof __propDef.events;
-export type ColumnSlots = typeof __propDef.slots;
-export default class Column extends SvelteComponentTyped<ColumnProps, ColumnEvents, ColumnSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        header?: string | undefined;
+        field?: string | undefined;
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnProps = typeof __propDef.props;
+export type ColumnEvents = typeof __propDef.events;
+export type ColumnSlots = typeof __propDef.slots;
+export default class Column extends SvelteComponentTyped<ColumnProps, ColumnEvents, ColumnSlots> {
+}
+export {};

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

@@ -1,17 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        e: any;
-        idx: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ItemProps = typeof __propDef.props;
-export type ItemEvents = typeof __propDef.events;
-export type ItemSlots = typeof __propDef.slots;
-export default class Item extends SvelteComponentTyped<ItemProps, ItemEvents, ItemSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        e: any;
+        idx: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ItemProps = typeof __propDef.props;
+export type ItemEvents = typeof __propDef.events;
+export type ItemSlots = typeof __propDef.slots;
+export default class Item extends SvelteComponentTyped<ItemProps, ItemEvents, ItemSlots> {
+}
+export {};