@humandialog/forms.svelte 0.5.6 → 0.5.7

package/components/list/List.d.ts

@@ -1,44 +1,44 @@
-import { rCombo_definition } from '../combo/combo';
-export declare enum rList_property_type {
-    Hidden = 0,
-    Text = 1,
-    Date = 2,
-    Combo = 3,
-    Static = 4,
-    Tags = 5
-}
-export declare class rList_property {
-    constructor(type: rList_property_type);
-    type: rList_property_type;
-    name: string;
-    a: string;
-    onSelect: Function | undefined;
-    position: number | string | undefined;
-}
-export declare class rList_property_combo extends rList_property {
-    constructor();
-    association: boolean;
-    combo_definition: rCombo_definition;
-}
-export declare class rList_property_tags extends rList_property {
-    constructor();
-    onCreate: Function | undefined;
-    getAllTags: Function | undefined;
-}
-export declare class rList_definition {
-    title: string;
-    title_editable: boolean;
-    on_title_changed: Function | undefined;
-    title_readonly: boolean;
-    title_href: string | undefined;
-    title_href_func: Function | undefined;
-    summary: string;
-    summary_editable: boolean;
-    on_summary_changed: Function | undefined;
-    summary_readonly: boolean;
-    can_insert: boolean;
-    onInsert: Function | undefined;
-    inserter_icon: boolean;
-    onOpen: Function | undefined;
-    properties: rList_property[];
-}
+import { rCombo_definition } from '../combo/combo';
+export declare enum rList_property_type {
+    Hidden = 0,
+    Text = 1,
+    Date = 2,
+    Combo = 3,
+    Static = 4,
+    Tags = 5
+}
+export declare class rList_property {
+    constructor(type: rList_property_type);
+    type: rList_property_type;
+    name: string;
+    a: string;
+    onSelect: Function | undefined;
+    position: number | string | undefined;
+}
+export declare class rList_property_combo extends rList_property {
+    constructor();
+    association: boolean;
+    combo_definition: rCombo_definition;
+}
+export declare class rList_property_tags extends rList_property {
+    constructor();
+    onCreate: Function | undefined;
+    getAllTags: Function | undefined;
+}
+export declare class rList_definition {
+    title: string;
+    title_editable: boolean;
+    on_title_changed: Function | undefined;
+    title_readonly: boolean;
+    title_href: string | undefined;
+    title_href_func: Function | undefined;
+    summary: string;
+    summary_editable: boolean;
+    on_summary_changed: Function | undefined;
+    summary_readonly: boolean;
+    can_insert: boolean;
+    onInsert: Function | undefined;
+    inserter_icon: boolean;
+    onOpen: Function | undefined;
+    properties: rList_property[];
+}

package/components/list/List.js

@@ -1,52 +1,52 @@
-import { rCombo_definition } from '../combo/combo';
-export var rList_property_type;
-(function (rList_property_type) {
-    rList_property_type[rList_property_type["Hidden"] = 0] = "Hidden";
-    rList_property_type[rList_property_type["Text"] = 1] = "Text";
-    rList_property_type[rList_property_type["Date"] = 2] = "Date";
-    rList_property_type[rList_property_type["Combo"] = 3] = "Combo";
-    rList_property_type[rList_property_type["Static"] = 4] = "Static";
-    rList_property_type[rList_property_type["Tags"] = 5] = "Tags";
-})(rList_property_type || (rList_property_type = {}));
-export class rList_property {
-    constructor(type) {
-        this.type = type;
-    }
-    type = rList_property_type.Hidden;
-    name = '';
-    a = '';
-    onSelect = undefined;
-    position = undefined;
-}
-export class rList_property_combo extends rList_property {
-    constructor() {
-        super(rList_property_type.Combo);
-        this.combo_definition = new rCombo_definition;
-    }
-    association = false;
-    combo_definition;
-}
-export class rList_property_tags extends rList_property {
-    constructor() {
-        super(rList_property_type.Tags);
-    }
-    onCreate = undefined;
-    getAllTags = undefined;
-}
-export class rList_definition {
-    title = '';
-    title_editable = false;
-    on_title_changed = undefined;
-    title_readonly = false;
-    title_href = undefined;
-    title_href_func = undefined;
-    summary = '';
-    summary_editable = false;
-    on_summary_changed = undefined;
-    summary_readonly = false;
-    can_insert = false;
-    onInsert = undefined;
-    inserter_icon = false;
-    onOpen = undefined;
-    properties = [];
-}
+import { rCombo_definition } from '../combo/combo';
+export var rList_property_type;
+(function (rList_property_type) {
+    rList_property_type[rList_property_type["Hidden"] = 0] = "Hidden";
+    rList_property_type[rList_property_type["Text"] = 1] = "Text";
+    rList_property_type[rList_property_type["Date"] = 2] = "Date";
+    rList_property_type[rList_property_type["Combo"] = 3] = "Combo";
+    rList_property_type[rList_property_type["Static"] = 4] = "Static";
+    rList_property_type[rList_property_type["Tags"] = 5] = "Tags";
+})(rList_property_type || (rList_property_type = {}));
+export class rList_property {
+    constructor(type) {
+        this.type = type;
+    }
+    type = rList_property_type.Hidden;
+    name = '';
+    a = '';
+    onSelect = undefined;
+    position = undefined;
+}
+export class rList_property_combo extends rList_property {
+    constructor() {
+        super(rList_property_type.Combo);
+        this.combo_definition = new rCombo_definition;
+    }
+    association = false;
+    combo_definition;
+}
+export class rList_property_tags extends rList_property {
+    constructor() {
+        super(rList_property_type.Tags);
+    }
+    onCreate = undefined;
+    getAllTags = undefined;
+}
+export class rList_definition {
+    title = '';
+    title_editable = false;
+    on_title_changed = undefined;
+    title_readonly = false;
+    title_href = undefined;
+    title_href_func = undefined;
+    summary = '';
+    summary_editable = false;
+    on_summary_changed = undefined;
+    summary_readonly = false;
+    can_insert = false;
+    onInsert = undefined;
+    inserter_icon = false;
+    onOpen = undefined;
+    properties = [];
+}

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

@@ -66,69 +66,69 @@ async function edit_date(field, prop_idx) {
       });
   }
 }
-</script>
-
-<div class="text-xs grid-{definition.properties.length}">
-    {#each definition.properties as prop, prop_index}
-        <p class="col-span-1 w-full mr-auto mt-0.5">
-            {#if item[prop.a] || placeholder == prop.name}
-                <span role="gridcell" tabindex="0">
-                    {#if prop.type == rList_property_type.Date}
-                        <DatePicker self={item} 
-                                    a={prop.a}
-                                    compact={true}
-                                    onSelect={prop.onSelect}
-                                    s="xs"
-                                    inContext="props sel"
-                                    bind:this={props[prop_index]}
-                                    changed={(value)=>{on_date_changed(value, prop.a)}}
-                        />
-                    {:else if prop.type == rList_property_type.Combo}
-                        <Combo  self={item} 
-                                inContext="props sel" 
-                                compact={true} 
-                                a={prop.a}
-                                onSelect={prop.onSelect}
-                                isAssociation={prop.association}
-                                icon={false} 
-                                bind:this={props[prop_index]}
-                                definition={prop.combo_definition}
-                                changed={(key,name)=>{on_combo_changed(key, name, prop)}}
-                                s='xs'/>
-                    {:else if prop.type == rList_property_type.Static}
-                        <span class="dark:text-white text-stone-400 truncate px-2.5 bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
-                            {item[prop.a]}
-                        </span>
-                    {/if}
-                </span>
-            {/if}
-        </p>
-    {/each}
-</div>
-
-<style>
-    .grid-1
-    {
-        display: grid;
-        grid-template-columns: 100%;
-    }
-
-    .grid-2
-    {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    .grid-3
-    {
-        display: grid;
-        grid-template-columns: 33% 33% 33%;
-    }
-
-    .grid-4
-    {
-        display: grid;
-        grid-template-columns: 25% 25% 25% 25%;
-    }
-
+</script>
+
+<div class="text-xs grid-{definition.properties.length}">
+    {#each definition.properties as prop, prop_index}
+        <p class="col-span-1 w-full mr-auto mt-0.5">
+            {#if item[prop.a] || placeholder == prop.name}
+                <span role="gridcell" tabindex="0">
+                    {#if prop.type == rList_property_type.Date}
+                        <DatePicker self={item} 
+                                    a={prop.a}
+                                    compact={true}
+                                    onSelect={prop.onSelect}
+                                    s="xs"
+                                    inContext="props sel"
+                                    bind:this={props[prop_index]}
+                                    changed={(value)=>{on_date_changed(value, prop.a)}}
+                        />
+                    {:else if prop.type == rList_property_type.Combo}
+                        <Combo  self={item} 
+                                inContext="props sel" 
+                                compact={true} 
+                                a={prop.a}
+                                onSelect={prop.onSelect}
+                                isAssociation={prop.association}
+                                icon={false} 
+                                bind:this={props[prop_index]}
+                                definition={prop.combo_definition}
+                                changed={(key,name)=>{on_combo_changed(key, name, prop)}}
+                                s='xs'/>
+                    {:else if prop.type == rList_property_type.Static}
+                        <span class="dark:text-white text-stone-400 truncate px-2.5 bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
+                            {item[prop.a]}
+                        </span>
+                    {/if}
+                </span>
+            {/if}
+        </p>
+    {/each}
+</div>
+
+<style>
+    .grid-1
+    {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+
+    .grid-2
+    {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .grid-3
+    {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .grid-4
+    {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+    }
+
 </style>

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

@@ -1,21 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
-import { rList_definition } from '../List';
-declare const __propDef: {
-    props: {
-        definition: rList_definition;
-        item: object;
-        placeholder?: string | undefined;
-        editProperty?: ((field: string) => 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 editProperty(): (field: string) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+import { rList_definition } from '../List';
+declare const __propDef: {
+    props: {
+        definition: rList_definition;
+        item: object;
+        placeholder?: string | undefined;
+        editProperty?: ((field: string) => 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 editProperty(): (field: string) => void;
+}
+export {};

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,20 @@ 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);
 }
 </script>
 
@@ -241,16 +249,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,29 @@
-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;
+    };
+    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 {};