@humandialog/forms.svelte 0.5.5 → 0.5.6

package/components/kanban/kanban.tags.svelte.d.ts

@@ -1,23 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name?: string | undefined;
-        a?: string | undefined;
-        allTags?: string | undefined;
-        onCreate?: Function | undefined;
-        onSelect?: Function | undefined;
-        top?: boolean | undefined;
-        middle?: boolean | undefined;
-        bottom?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type KanbanProps = typeof __propDef.props;
-export type KanbanEvents = typeof __propDef.events;
-export type KanbanSlots = typeof __propDef.slots;
-export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        a?: string | undefined;
+        getAllTags?: Function | undefined;
+        onCreate?: Function | undefined;
+        onSelect?: Function | undefined;
+        top?: boolean | undefined;
+        middle?: boolean | undefined;
+        bottom?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KanbanProps = typeof __propDef.props;
+export type KanbanEvents = typeof __propDef.events;
+export type KanbanSlots = typeof __propDef.slots;
+export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
+}
+export {};

package/components/kanban/kanban.title.svelte

@@ -6,5 +6,5 @@ let definition = getContext("rKanban-definition");
 definition.titleAttrib = a;
 definition.titleOnChange = onChange;
 definition.titleReadOnly = readOnly;
-</script>
-
+</script>
+

package/components/kanban/kanban.title.svelte.d.ts

@@ -1,18 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        a: string;
-        onChange?: Function | undefined;
-        readOnly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type KanbanProps = typeof __propDef.props;
-export type KanbanEvents = typeof __propDef.events;
-export type KanbanSlots = typeof __propDef.slots;
-export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: string;
+        onChange?: Function | undefined;
+        readOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KanbanProps = typeof __propDef.props;
+export type KanbanEvents = typeof __propDef.events;
+export type KanbanSlots = typeof __propDef.slots;
+export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
+}
+export {};

package/components/list/List.d.ts

@@ -1,43 +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;
-    allTags: string;
-}
-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;
-    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,51 +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;
-    allTags = '';
-}
-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;
-    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

@@ -9,46 +9,46 @@ 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={editable}
+            on:click>
+    </p>
+{/if}
+    

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

@@ -1,25 +1,25 @@
-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;
+        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 {};

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

@@ -15,6 +15,7 @@ import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 import { push } from "svelte-spa-router";
+import { FaExternalLinkAlt } from "svelte-icons/fa/";
 export let item;
 export let title = "";
 export let summary = "";
@@ -213,6 +214,13 @@ async function force_editing(field) {
                             readonly: definition.title_readonly,
                         }}> 
                             {element_title}
+
+                        {#if definition.onOpen}
+                            <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
+                                    on:click={(e) => definition.onOpen(item)}>
+                                <FaExternalLinkAlt/>
+                            </button>
+                        {/if}
                     </p>
                 {/key}
            {:else}