@humandialog/forms.svelte 0.5.9 → 0.5.11

package/components/kanban/Kanban.js

@@ -1,79 +1,79 @@
-export const KanbanCardTop = 1;
-export const KanbanCardMiddle = 2;
-export const KanbanCardBottom = 3;
-export class rKanban_column {
-    id;
-    title = '';
-    width = 'w-[240px]';
-    state = '';
-    finishing = false;
-    operations = undefined;
-    onTitleChanged = undefined;
-}
-export class rKanban_definition {
-    columns = [];
-    titleAttrib = '';
-    titleOnChange = undefined;
-    titleReadOnly = false;
-    summaryAttrib = '';
-    summaryOnChange = undefined;
-    summaryReadOnly = false;
-    properties = [];
-    self = undefined;
-    a = '';
-    objects = undefined;
-    context = '';
-    key = '';
-    typename = '';
-    stateAttrib = '';
-    orderAttrib = '';
-    onUp = undefined;
-    onDown = undefined;
-    onAdd = undefined;
-    onRemove = undefined;
-    onReplace = undefined;
-    onOpen = undefined;
-    getCardOperations = undefined;
-    items = null;
-    getItems() {
-        if (this.items == null) {
-            let item = this.self;
-            this.items = null;
-            if (this.objects)
-                this.items = this.objects;
-            else if (item && this.a)
-                this.items = item[this.a];
-            if (this.items == null)
-                this.items = [];
-        }
-        return this.items;
-    }
-    clear() {
-        this.columns = [];
-        this.titleAttrib = '';
-        this.titleOnChange = undefined;
-        this.titleReadOnly = false;
-        this.summaryAttrib = '';
-        this.summaryOnChange = undefined;
-        this.summaryReadOnly = false;
-        this.properties = [];
-        this.self = undefined;
-        this.a = '';
-        this.objects = undefined;
-        this.context = '';
-        this.key = '';
-        this.typename = '';
-        this.stateAttrib = '';
-        this.orderAttrib = '';
-        this.onUp = undefined;
-        this.onDown = undefined;
-        this.onAdd = undefined;
-        this.onRemove = undefined;
-        this.onReplace = undefined;
-        this.onOpen = undefined;
-        this.getCardOperations = undefined;
-        this.items = null;
-    }
-}
-export const KanbanColumnTop = -1;
-export const KanbanColumnBottom = -2;
+export const KanbanCardTop = 1;
+export const KanbanCardMiddle = 2;
+export const KanbanCardBottom = 3;
+export class rKanban_column {
+    id;
+    title = '';
+    width = 'w-[240px]';
+    state = '';
+    finishing = false;
+    operations = undefined;
+    onTitleChanged = undefined;
+}
+export class rKanban_definition {
+    columns = [];
+    titleAttrib = '';
+    titleOnChange = undefined;
+    titleReadOnly = false;
+    summaryAttrib = '';
+    summaryOnChange = undefined;
+    summaryReadOnly = false;
+    properties = [];
+    self = undefined;
+    a = '';
+    objects = undefined;
+    context = '';
+    key = '';
+    typename = '';
+    stateAttrib = '';
+    orderAttrib = '';
+    onUp = undefined;
+    onDown = undefined;
+    onAdd = undefined;
+    onRemove = undefined;
+    onReplace = undefined;
+    onOpen = undefined;
+    getCardOperations = undefined;
+    items = null;
+    getItems() {
+        if (this.items == null) {
+            let item = this.self;
+            this.items = null;
+            if (this.objects)
+                this.items = this.objects;
+            else if (item && this.a)
+                this.items = item[this.a];
+            if (this.items == null)
+                this.items = [];
+        }
+        return this.items;
+    }
+    clear() {
+        this.columns = [];
+        this.titleAttrib = '';
+        this.titleOnChange = undefined;
+        this.titleReadOnly = false;
+        this.summaryAttrib = '';
+        this.summaryOnChange = undefined;
+        this.summaryReadOnly = false;
+        this.properties = [];
+        this.self = undefined;
+        this.a = '';
+        this.objects = undefined;
+        this.context = '';
+        this.key = '';
+        this.typename = '';
+        this.stateAttrib = '';
+        this.orderAttrib = '';
+        this.onUp = undefined;
+        this.onDown = undefined;
+        this.onAdd = undefined;
+        this.onRemove = undefined;
+        this.onReplace = undefined;
+        this.onOpen = undefined;
+        this.getCardOperations = undefined;
+        this.items = null;
+    }
+}
+export const KanbanColumnTop = -1;
+export const KanbanColumnBottom = -2;

package/components/kanban/internal/kanban.card.svelte

@@ -127,110 +127,110 @@ export async function editProperty(field) {
     }
   }
 }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass} scroll-mt-[50px] sm:scroll-mt-[40px]"
-     class:cursor-pointer={!isCardActive}
-     on:click={activate}
-     use:selectable={item} 
-     bind:this={card}>
-
-    <!--  -->
-    <!--section class="h-6 w-full flex flex-row ">
-        <button class="h-3 w-3"
-                class:hidden={!isCardActive}
-                on:click={(e) => showMoveOperations()}
-                bind:this={moveButton}>
-            <FaArrowsAlt/>
-        </button>
-        
-        {#if $$slots.kanbanCardTopProps}
-            <div class="ml-auto flex flex-row gap-2">
-                <slot name="kanbanCardTopProps" element={item}/>
-            </div>
-        {/if}
-    </section-->
-
-    {#if $$slots.kanbanCardTopProps}
-        <section class="flex flex-row justify-between">
-            <slot name="kanbanCardTopProps" element={item}/>
-        </section>
-    {/if}
-    <Properties position={KanbanCardTop} {item} bind:this={topProps}/>
-    
-
-    {#if isCardActive}
-        <h3  class=" text-lg font-semibold min-h-[1.75rem]
-                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                    whitespace-nowrap overflow-clip truncate w-full sm:flex-none
-                    relative"
-                    use:editable={{
-                        action: (text) => onTitleChanged(text), 
-                        active: true,
-                        readonly: definition.titleReadOnly,
-                        onFinish: (d) => {titleElement.blur()}}}
-                    bind:this={titleElement}>
-            {item[definition.titleAttrib]}
-
-        {#if definition.onOpen}
-            <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
-                    on:click={(e) => definition.onOpen(item)}>
-                <FaExternalLinkAlt/>
-            </button>
-        {/if}
-        </h3>
-    {:else}
-        <h3  class=" text-lg font-semibold min-h-[1.75rem]
-                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                    whitespace-nowrap overflow-clip truncate w-full sm:flex-none
-                    relative">
-            {item[definition.titleAttrib]}
-
-        </h3>
-    {/if}
-
-
-    {#if $$slots.kanbanCardMiddleProps}
-        <section class="w-full flex flex-row">
-             <slot name="kanbanCardMiddleProps" element={item} />
-        </section>
-    {/if}
-
-    <Properties position={KanbanCardMiddle} {item} bind:this={middleProps}/>
-
-    {#if item[definition.summaryAttrib] || summaryPlaceholder}
-        {#key item[definition.summaryAttrib]}
-            {#if isCardActive}
-                <p class="  sm:text-xs sm:min-h-[1rem]
-                            text-base min-h-[1.5rem]
-                            text-stone-400
-                            max-h-[75px] sm:max-h-[64px]
-                            overflow-hidden"
-                            use:editable={{
-                                action: (text) => onSummaryChanged(text), 
-                                active: true,
-                                readonly: definition.summaryReadOnly,
-                                onFinish: (d) => {summaryPlaceholder = false}}}
-                            bind:this={summaryElement}>
-                    {item[definition.summaryAttrib]}
-                </p>
-            {:else}
-                <p class="  sm:text-xs sm:min-h-[1rem]
-                                text-base min-h-[1.5rem]
-                                text-stone-400
-                                max-h-[75px] sm:max-h-[64px]
-                                overflow-hidden">
-                    {item[definition.summaryAttrib]}
-                </p>
-            {/if}
-        {/key}
-    {/if}
-
-    {#if $$slots.kanbanCardBottomProps}
-        <slot name="kanbanCardBottomProps" element={item} />
-    {/if}
-
-    <Properties position={KanbanCardBottom} {item} bind:this={bottomProps}/>
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass} scroll-mt-[50px] sm:scroll-mt-[40px]"
+     class:cursor-pointer={!isCardActive}
+     on:click={activate}
+     use:selectable={item} 
+     bind:this={card}>
+
+    <!--  -->
+    <!--section class="h-6 w-full flex flex-row ">
+        <button class="h-3 w-3"
+                class:hidden={!isCardActive}
+                on:click={(e) => showMoveOperations()}
+                bind:this={moveButton}>
+            <FaArrowsAlt/>
+        </button>
+        
+        {#if $$slots.kanbanCardTopProps}
+            <div class="ml-auto flex flex-row gap-2">
+                <slot name="kanbanCardTopProps" element={item}/>
+            </div>
+        {/if}
+    </section-->
+
+    {#if $$slots.kanbanCardTopProps}
+        <section class="flex flex-row justify-between">
+            <slot name="kanbanCardTopProps" element={item}/>
+        </section>
+    {/if}
+    <Properties position={KanbanCardTop} {item} bind:this={topProps}/>
+    
+
+    {#if isCardActive}
+        <h3  class=" text-lg font-semibold min-h-[1.75rem]
+                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                    whitespace-nowrap overflow-clip truncate w-full sm:flex-none
+                    relative"
+                    use:editable={{
+                        action: (text) => onTitleChanged(text), 
+                        active: true,
+                        readonly: definition.titleReadOnly,
+                        onFinish: (d) => {titleElement.blur()}}}
+                    bind:this={titleElement}>
+            {item[definition.titleAttrib]}
+
+        {#if definition.onOpen}
+            <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
+                    on:click={(e) => definition.onOpen(item)}>
+                <FaExternalLinkAlt/>
+            </button>
+        {/if}
+        </h3>
+    {:else}
+        <h3  class=" text-lg font-semibold min-h-[1.75rem]
+                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                    whitespace-nowrap overflow-clip truncate w-full sm:flex-none
+                    relative">
+            {item[definition.titleAttrib]}
+
+        </h3>
+    {/if}
+
+
+    {#if $$slots.kanbanCardMiddleProps}
+        <section class="w-full flex flex-row">
+             <slot name="kanbanCardMiddleProps" element={item} />
+        </section>
+    {/if}
+
+    <Properties position={KanbanCardMiddle} {item} bind:this={middleProps}/>
+
+    {#if item[definition.summaryAttrib] || summaryPlaceholder}
+        {#key item[definition.summaryAttrib]}
+            {#if isCardActive}
+                <p class="  sm:text-xs sm:min-h-[1rem]
+                            text-base min-h-[1.5rem]
+                            text-stone-400
+                            max-h-[75px] sm:max-h-[64px]
+                            overflow-hidden"
+                            use:editable={{
+                                action: (text) => onSummaryChanged(text), 
+                                active: true,
+                                readonly: definition.summaryReadOnly,
+                                onFinish: (d) => {summaryPlaceholder = false}}}
+                            bind:this={summaryElement}>
+                    {item[definition.summaryAttrib]}
+                </p>
+            {:else}
+                <p class="  sm:text-xs sm:min-h-[1rem]
+                                text-base min-h-[1.5rem]
+                                text-stone-400
+                                max-h-[75px] sm:max-h-[64px]
+                                overflow-hidden">
+                    {item[definition.summaryAttrib]}
+                </p>
+            {/if}
+        {/key}
+    {/if}
+
+    {#if $$slots.kanbanCardBottomProps}
+        <slot name="kanbanCardBottomProps" element={item} />
+    {/if}
+
+    <Properties position={KanbanCardBottom} {item} bind:this={bottomProps}/>
 </li>

package/components/kanban/internal/kanban.card.svelte.d.ts

@@ -1,32 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        item: object;
-        activate?: ((e: any) => void) | undefined;
-        _scrollViewToCard?: (() => void) | undefined;
-        editProperty?: ((field: string) => Promise<void>) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        kanbanCardTopProps: {
-            element: object;
-        };
-        kanbanCardMiddleProps: {
-            element: object;
-        };
-        kanbanCardBottomProps: {
-            element: object;
-        };
-    };
-};
-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> {
-    get activate(): (e: any) => void;
-    get _scrollViewToCard(): () => void;
-    get editProperty(): (field: string) => Promise<void>;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        item: object;
+        activate?: ((e: any) => void) | undefined;
+        _scrollViewToCard?: (() => void) | undefined;
+        editProperty?: ((field: string) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        kanbanCardTopProps: {
+            element: object;
+        };
+        kanbanCardMiddleProps: {
+            element: object;
+        };
+        kanbanCardBottomProps: {
+            element: object;
+        };
+    };
+};
+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> {
+    get activate(): (e: any) => void;
+    get _scrollViewToCard(): () => void;
+    get editProperty(): (field: string) => Promise<void>;
+}
+export {};

package/components/kanban/internal/kanban.column.svelte

@@ -99,7 +99,10 @@ let lastActivatedElement = null;
 export async function add(after = KanbanColumnTop) {
   if (!definition.onAdd)
     return;
-  showInserterAfterId = after.Id ?? KanbanColumnTop;
+  if (after === KanbanColumnTop || after === KanbanColumnBottom)
+    showInserterAfterId = after;
+  else
+    showInserterAfterId = after.Id;
   if (activateAfterDomUpdate)
     activateAfterDomUpdate = null;
   lastActivatedElement = getActive("props");
@@ -144,7 +147,7 @@ function onTitleChanged(text) {
   if (columnDef.onTitleChanged)
     columnDef.onTitleChanged(text);
 }
-let rootElement;
+let headerElement;
 export function activate(e) {
   if (e)
     e.stopPropagation();
@@ -154,72 +157,84 @@ export function activate(e) {
     return;
   }
   activateItem("props", columnDef, columnDef.operations);
-  rootElement?.scrollIntoView();
+  if (!e)
+    headerElement?.scrollIntoView(
+      {
+        block: "nearest",
+        inline: "nearest"
+      }
+    );
 }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<section class="snap-center sm:snap-align-none flex-none sm:flex-1 sm:min-w-[180px] sm:max-w-[240px] rounded-md border border-transparent  {width_class} {selected_class} {focused_class}"
-        bind:this={rootElement}>
-    <header class:cursor-pointer={!is_row_active && columnDef.operations}
-            use:selectable={columnDef}
-            on:click={activate}>
-        <h2 class="mt-2 mb-2 text-lg sm:text-xs uppercase w-full min-h-[1rem] text-center whitespace-nowrap relative">
-            <span 
-                use:editable={{
-                    action: (text) => onTitleChanged(text),
-                    active: false
-                }}
-                bind:this={titleElement}>
-                {columnDef.title}
-            </span>
-            
-            {#if columnDef.finishing}
-                <div class="inline-block text-green-600 h-3 w-3 ml-2">
-                    <FaCheck/>
-                </div>
-            {/if}
-            <button class="absolute right-2 w-4 sm:w-2.5"
-                    on:click|stopPropagation={(e) => add(KanbanColumnTop)}>
-                <FaPlus/>
-            </button>
-        </h2>
-    </header>
-    <ul class="w-full border-stone-700" bind:this={column_element}>
-        {#if showInserterAfterId === KanbanColumnTop}
-            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnTop)}}
-                        bind:this={inserter} />
-        {/if}
-
-        {#if column_items && column_items.length > 0}
-            {#each column_items as element, item_idx (getItemKey(element))}
-                <Card   item={element} 
-                        bind:this={cards[item_idx]}>
-                    <svelte:fragment slot="kanbanCardTopProps" let:element>
-                        <slot name="kanbanCardTopProps" {element}/>
-                    </svelte:fragment>
-                
-                    <svelte:fragment slot="kanbanCardMiddleProps" let:element>
-                        <slot name="kanbanCardMiddleProps" {element}/>
-                    </svelte:fragment>
-                
-                    <svelte:fragment slot="kanbanCardBottomProps" let:element>
-                        <slot name="kanbanCardBottomProps" {element}/>
-                    </svelte:fragment>
-                </Card>
-
-                {#if showInserterAfterId == element.Id}
-                    <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, showInserterAfterId)}}
-                                bind:this={inserter} />
-                {/if}
-            {/each}
-        {/if}
-
-        {#if showInserterAfterId === KanbanColumnBottom}
-            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnBottom)}}
-                        bind:this={inserter} />
-        {/if}
-
-    </ul>
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<section class="    snap-center 
+                    sm:snap-align-none 
+                    flex-none sm:flex-1
+                    sm:min-w-[180px] sm:max-w-[240px]
+                    sm:min-h-[calc(100vh-8rem)] 
+                    min-h-[calc(100vh-5rem)] 
+                    rounded-md border border-transparent  
+                    {width_class} {selected_class} {focused_class}"
+        use:selectable={columnDef}
+        on:click={activate}>
+    <header class:cursor-pointer={!is_row_active && columnDef.operations} bind:this={headerElement}>
+        <h2 class="mt-2 mb-2 text-lg sm:text-xs uppercase w-full min-h-[1rem] text-center whitespace-nowrap relative">
+            <span 
+                use:editable={{
+                    action: (text) => onTitleChanged(text),
+                    active: false
+                }}
+                bind:this={titleElement}>
+                {columnDef.title}
+            </span>
+            
+            {#if columnDef.finishing}
+                <div class="inline-block text-green-600 h-3 w-3 ml-2">
+                    <FaCheck/>
+                </div>
+            {/if}
+            <!--button class="absolute right-2 w-4 sm:w-2.5"
+                    on:click|stopPropagation={(e) => add(KanbanColumnTop)}>
+                <FaPlus/>
+            </button-->
+        </h2>
+    </header>
+    <ul class="w-full border-stone-700 pb-20" bind:this={column_element}>
+        {#if showInserterAfterId === KanbanColumnTop}
+            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnTop)}}
+                        bind:this={inserter} />
+        {/if}
+
+        {#if column_items && column_items.length > 0}
+            {#each column_items as element, item_idx (getItemKey(element))}
+                <Card   item={element} 
+                        bind:this={cards[item_idx]}>
+                    <svelte:fragment slot="kanbanCardTopProps" let:element>
+                        <slot name="kanbanCardTopProps" {element}/>
+                    </svelte:fragment>
+                
+                    <svelte:fragment slot="kanbanCardMiddleProps" let:element>
+                        <slot name="kanbanCardMiddleProps" {element}/>
+                    </svelte:fragment>
+                
+                    <svelte:fragment slot="kanbanCardBottomProps" let:element>
+                        <slot name="kanbanCardBottomProps" {element}/>
+                    </svelte:fragment>
+                </Card>
+
+                {#if showInserterAfterId == element.Id}
+                    <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, showInserterAfterId)}}
+                                bind:this={inserter} />
+                {/if}
+            {/each}
+        {/if}
+
+        {#if showInserterAfterId === KanbanColumnBottom}
+            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnBottom)}}
+                        bind:this={inserter} />
+        {/if}
+
+    </ul>
 </section>