@humandialog/forms.svelte 0.5.6 → 0.5.8

package/components/list/internal/list.element.summary.svelte

@@ -7,48 +7,50 @@ export let text = "";
 export let placeholder = false;
 export let active = false;
 export let editable;
-export let clickEdit;
 let user_class = $$props.class ?? "";
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-{#if readonly}
-    <p {id} class="  sm:text-xs sm:min-h-[1rem]
-                    text-base min-h-[1.5rem]
-                    text-stone-400 
-                    {user_class}"
-                    on:click>
-        {text}
-    </p>
-{:else if text}
-    {#if active}
-        <p {id} class=" sm:text-xs sm:min-h-[1rem]
-                        text-base min-h-[1.5rem]
-                        text-stone-400 
-                        {user_class}"
-                use:_editable={{
-                    action: editable,
-                    active: true
-                }}
-                on:click>
-            {text}
-        </p>
-    {:else}
-        <p {id} class=" sm:text-xs sm:min-h-[1rem]
-            text-base min-h-[1.5rem]
-            text-stone-400 
-            {user_class}"
-        on:click>
-        {text}
-        </p>
-    {/if}
-{:else if placeholder}
-    <p   {id} class="sm:text-xs sm:min-h-[1rem]
-                     text-base min-h-[1.5rem]
-                     text-stone-400 
-                     {user_class}"
-            use:_editable={editable}
-            on:click>
-    </p>
-{/if}
-    
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if readonly}
+    <p {id} class="  sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-stone-400 
+                    {user_class}"
+                    on:click>
+        {text}
+    </p>
+{:else if text}
+    {#if active}
+        <p {id} class=" sm:text-xs sm:min-h-[1rem]
+                        text-base min-h-[1.5rem]
+                        text-stone-400 
+                        {user_class}"
+                use:_editable={{
+                    action: editable,
+                    active: true
+                }}
+                on:click>
+            {text}
+        </p>
+    {:else}
+        <p {id} class=" sm:text-xs sm:min-h-[1rem]
+            text-base min-h-[1.5rem]
+            text-stone-400 
+            {user_class}"
+        on:click>
+        {text}
+        </p>
+    {/if}
+{:else if placeholder}
+    <p   {id} class="sm:text-xs sm:min-h-[1rem]
+                     text-base min-h-[1.5rem]
+                     text-stone-400 
+                     {user_class}"
+                use:_editable={{
+                action: editable,
+                active: true
+            }}
+            on:click>
+    </p>
+{/if}
+    

package/components/list/internal/list.element.summary.svelte.d.ts

@@ -1,25 +1,24 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id: string;
-        readonly?: boolean | undefined;
-        text?: string | undefined;
-        placeholder?: boolean | undefined;
-        active?: boolean | undefined;
-        editable: any;
-        clickEdit: any;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        readonly?: boolean | undefined;
+        text?: string | undefined;
+        placeholder?: boolean | undefined;
+        active?: boolean | undefined;
+        editable: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/list/internal/list.element.svelte

@@ -16,6 +16,7 @@ import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 import { push } from "svelte-spa-router";
 import { FaExternalLinkAlt } from "svelte-icons/fa/";
+import { readonly } from "svelte/store";
 export let item;
 export let title = "";
 export let summary = "";
@@ -124,10 +125,6 @@ function on_active_row_clicked(e, part) {
       if (link)
         push(link);
     } else {
-      if (part == "top" && !definition.title_readonly)
-        force_editing("Title");
-      else if (part == "bottom" && !definition.summary_readonly)
-        force_editing("Summary");
     }
   } else {
   }
@@ -177,9 +174,30 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  startEditing(element_node, () => {
-    placeholder = "";
-  });
+  element_node.focus();
+  setSelectionAtEnd(element_node);
+}
+function setSelectionAtEnd(element) {
+  const textNode = element.childNodes[0];
+  const text = textNode.textContent;
+  let range = document.createRange();
+  let end_offset = text.length;
+  let end_container = textNode;
+  range.setStart(end_container, end_offset);
+  range.setEnd(end_container, end_offset);
+  let sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+let rootElement;
+export function scrollToView() {
+  rootElement.scrollIntoView(
+    {
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }
+  );
 }
 </script>
 
@@ -187,10 +205,11 @@ async function force_editing(field) {
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="mt-3 flex flex-row my-0  w-full text-sm text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
+<section    class="mt-3 flex flex-row my-0  w-full text-sm text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
             on:contextmenu={on_contextmenu}
             role="menu"
-            tabindex="-1">
+            tabindex="-1"
+            bind:this={rootElement}>
 
     <slot name="left" element={item}/>
     
@@ -241,16 +260,43 @@ async function force_editing(field) {
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <Summary
+            {#key item[summary]}
+                
+            <!--Summary
                     id={element_id}
                     on:click={(e) => on_active_row_clicked(e, 'bottom')}
                     text={item[summary]}
                     readonly={definition.summary_readonly}
                     placeholder={placeholder == 'Summary'}
                     editable={(text) => {change_summary(text)}}
-                    clickEdit={edit}
                     active={is_row_active}
-                />
+                /-->
+
+                
+                {#if is_row_active}
+                    <p  id={element_id} 
+                        class=" sm:text-xs sm:min-h-[1rem]
+                                    text-base min-h-[1.5rem]
+                                    text-stone-400"
+                            use:editable={{
+                                action: (text) => {change_summary(text)},
+                                readonly: definition.summary_readonly,
+                                onFinish: (d) => {placeholder='';},
+                                active: true
+                            }}>
+                        {item[summary]}
+                    </p>
+                {:else}
+                    <p  id={element_id} 
+                        class=" sm:text-xs sm:min-h-[1rem]
+                                    text-base min-h-[1.5rem]
+                                    text-stone-400"
+                        on:click={(e) => on_active_row_clicked(e, 'bottom')}>
+                        {item[summary]}
+                    </p>
+                {/if}
+            {/key}
+                
         {/if}
 
         <section class="block sm:hidden w-full sm:flex-none sm:w-2/3">

package/components/list/internal/list.element.svelte.d.ts

@@ -1,29 +1,31 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        item: object;
-        title?: string | undefined;
-        summary?: string | undefined;
-        typename?: string | undefined;
-        toolbarOperations: any;
-        contextMenu: any;
-        activate?: (() => void) | undefined;
-        editProperty?: ((field: string) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        left: {
-            element: object;
-        };
-    };
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-    get activate(): () => void;
-    get editProperty(): (field: string) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        item: object;
+        title?: string | undefined;
+        summary?: string | undefined;
+        typename?: string | undefined;
+        toolbarOperations: any;
+        contextMenu: any;
+        activate?: (() => void) | undefined;
+        editProperty?: ((field: string) => void) | undefined;
+        scrollToView?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        left: {
+            element: object;
+        };
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get activate(): () => void;
+    get editProperty(): (field: string) => void;
+    get scrollToView(): () => void;
+}
+export {};

package/components/list/internal/list.inserter.svelte.d.ts

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        onInsert: any;
-        icon?: boolean | undefined;
-        run?: ((onclose: any) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-    get run(): (onclose: any) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onInsert: any;
+        icon?: boolean | undefined;
+        run?: ((onclose: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get run(): (onclose: any) => void;
+}
+export {};

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

@@ -1,21 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name: string;
-        a?: string | undefined;
-        onSelect?: undefined;
-        association?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        a?: string | undefined;
+        onSelect?: undefined;
+        association?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

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

@@ -1,18 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name: string;
-        a?: string | undefined;
-        onSelect?: undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        a?: string | undefined;
+        onSelect?: undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

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

@@ -1,17 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        action: Function;
-        icon?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        action: Function;
+        icon?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

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

@@ -1,17 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name: string;
-        a?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        a?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

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

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        a: string;
-        editable?: boolean | undefined;
-        onChange?: Function | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: string;
+        editable?: boolean | undefined;
+        onChange?: Function | undefined;
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/list/list.svelte

@@ -135,7 +135,7 @@ export function reload(data, selectElement = KEEP_SELECTION) {
   if (!activate_after_dom_update)
     activateItem("props", null, []);
 }
-export function moveUp(element) {
+export async function moveUp(element) {
   if (!orderAttrib)
     return;
   let prev = getPrev(items, element);
@@ -143,11 +143,13 @@ export function moveUp(element) {
     return;
   items = swapElements(items, element, prev);
   [element[orderAttrib], prev[orderAttrib]] = [prev[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(prev, orderAttrib);
   pushChanges();
 }
-export function moveDown(element) {
+export async function moveDown(element) {
   if (!orderAttrib)
     return;
   let next = getNext(items, element);
@@ -155,6 +157,8 @@ export function moveDown(element) {
     return;
   items = swapElements(items, element, next);
   [element[orderAttrib], next[orderAttrib]] = [next[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(next, orderAttrib);
   pushChanges();
@@ -182,6 +186,15 @@ export async function addRowAfter(after = null) {
     }
   });
 }
+function scrollToSelectedElement() {
+  const activeItem = getActive("props");
+  if (!activeItem)
+    return;
+  const activeItemKey = getItemKey(activeItem);
+  const activeIdx = items?.findIndex((i) => getItemKey(i) == activeItemKey);
+  if (activeIdx >= 0)
+    rows[activeIdx].scrollToView();
+}
 export function remove(element) {
   let removing_idx = items?.findIndex((e) => e == element);
   if (removing_idx < 0)