@humandialog/forms.svelte 0.5.4 → 0.5.6

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

@@ -1,35 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        item: object;
-        showMoveOperationsForItem?: Function | undefined;
-        scrollViewToCard?: Function | undefined;
-        runInserter?: Function | undefined;
-        activate?: ((e: any) => void) | undefined;
-        showMoveOperations?: (() => void) | undefined;
-        _scrollViewToCard?: (() => 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 showMoveOperations(): () => void;
-    get _scrollViewToCard(): () => 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

@@ -1,24 +1,20 @@
 <script>import { getContext, afterUpdate, tick } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../../stores";
-import { getActive, activateItem } from "../../../utils.js";
+import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing } from "../../../utils.js";
 import Card from "./kanban.card.svelte";
 import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
 import Inserter from "./kanban.inserter.svelte";
-import { FaPlus } from "svelte-icons/fa";
-export let title = "";
-export let width = "w-[240px]";
-export let self = void 0;
-export let a = "";
-export let objects = void 0;
-export let context = "";
-export let key = "";
+import { FaPlus, FaCheck } from "svelte-icons/fa";
 export let currentColumnIdx;
-export let showMoveOperationsForItem = void 0;
-export let scrollViewToCard = void 0;
+export let onInsert;
 let column_element;
 export function getHeight() {
   return column_element.getBoundingClientRect().height;
 }
+let titleElement;
+export function editName(onFinish = void 0) {
+  startEditing(titleElement, onFinish);
+}
 export const SET_LEFT = 0;
 export const SET_RIGHT = 1;
 export const CLEAR_LEFT = 2;
@@ -40,58 +36,70 @@ export function setBorder(what_to_do) {
   }
 }
 let definition = getContext("rKanban-definition");
-let item = null;
-let items = void 0;
-let ctx = context ? context : getContext("ctx");
-let last_tick = -1;
-let item_key = "";
-let width_class = width ? `w-11/12 sm:${width}` : "w-11/12 sm:w-[240px]";
+let columnDef = definition.columns[currentColumnIdx];
+let column_items = void 0;
+let width_class = columnDef.width ? `w-11/12 sm:${columnDef.width}` : "w-11/12 sm:w-[240px]";
 $:
-  setup($data_tick_store, $contextItemsStore);
-function setup(...args) {
-  last_tick = $data_tick_store;
-  item = self ?? $contextItemsStore[ctx];
-  items = void 0;
-  if (objects) {
-    items = objects;
-  } else if (item && a)
-    items = item[a];
-  if (items == void 0)
-    items = [];
-  if (items.length > 0) {
-    let first_element = items[0];
-    let keys = Object.keys(first_element);
-    if (key)
-      item_key = key;
-    else if (keys.includes("Id"))
-      item_key = "Id";
-    else if (keys.includes("$ref"))
-      item_key = "$ref";
-    else if (keys.length > 0)
-      item_key = keys[0];
-    else
-      item_key = "";
-  }
+  setup_data();
+$:
+  is_row_active = calculate_active($contextItemsStore);
+$:
+  is_row_selected = selected($contextItemsStore);
+$:
+  selected_class = is_row_selected ? "!border-blue-300" : "";
+$:
+  focused_class = is_row_active ? "bg-stone-50 dark:bg-stone-700" : "";
+$:
+  force_rerender($data_tick_store, $contextItemsStore);
+export function reload() {
+  let allItems = definition.getItems();
+  if (definition.stateAttrib)
+    column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+}
+function setup_data(...args) {
+  reload();
+}
+function force_rerender(...args) {
+  column_items = [...column_items];
+}
+function calculate_active(...args) {
+  if (!!columnDef.operations)
+    return isActive("props", columnDef);
+  else
+    return false;
+}
+function selected(...args) {
+  if (!!columnDef.operations)
+    return isSelected(columnDef);
+  else
+    return false;
 }
 let cards = [];
-export function findCardByItem(item2) {
+export function findCardByItem(item) {
   if (!cards)
     return null;
-  const item_idx = items?.findIndex((i) => i == item2);
-  if (item_idx >= 0) {
-    return cards[item_idx];
+  const itemIdx = column_items?.findIndex((i) => i == item);
+  if (itemIdx >= 0) {
+    return cards[itemIdx];
   } else
     return null;
 }
+export function activateByItemId(id) {
+  const itemIdx = column_items?.findIndex((e) => e.Id == id);
+  if (itemIdx >= 0) {
+    const card = cards[itemIdx];
+    card.activate();
+  }
+}
 let inserter;
 const None = 0;
-let showInserterAfter = None;
+let showInserterAfterId = None;
 let activateAfterDomUpdate = null;
 let lastActivatedElement = null;
 export async function add(after = KanbanColumnTop) {
   if (!definition.onAdd)
     return;
-  showInserterAfter = after ?? KanbanColumnTop;
+  showInserterAfterId = after.Id ?? KanbanColumnTop;
   if (activateAfterDomUpdate)
     activateAfterDomUpdate = null;
   lastActivatedElement = getActive("props");
@@ -101,81 +109,117 @@ export async function add(after = KanbanColumnTop) {
   if (!inserter)
     return;
   inserter.run(async (detail) => {
-    showInserterAfter = None;
+    showInserterAfterId = None;
     if (detail.cancel)
       activateAfterDomUpdate = lastActivatedElement;
     else {
       if (detail.incremental) {
         let currentActive = activateAfterDomUpdate ?? getActive("props");
-        await add(currentActive);
+        if (currentActive)
+          await add(currentActive);
       }
     }
   });
 }
-async function insert(title2, after) {
-  let newElement = await definition.onAdd(title2, currentColumnIdx, after);
-  if (!newElement)
-    return;
-  activateAfterDomUpdate = newElement;
-}
 afterUpdate(() => {
   if (activateAfterDomUpdate) {
-    let activateAfterDomUpdateIdx = items.findIndex((e) => e == activateAfterDomUpdate);
+    let activateAfterDomUpdateIdx = column_items.findIndex((e) => e == activateAfterDomUpdate);
     activateAfterDomUpdate = null;
     if (activateAfterDomUpdateIdx >= 0) {
       cards[activateAfterDomUpdateIdx].activate();
     }
   }
 });
-</script>
-
-
-<section class="flex-none sm:flex-1 sm:min-w-[180px] sm:max-w-[240px] {width_class}">
-    <header>
-        <h2 class="mb-2 text-lg sm:text-xs uppercase w-full text-center whitespace-nowrap relative">{title}
-            <button class="absolute right-2 w-4 sm:w-2.5"
-                    on:click={(e) => add(KanbanColumnTop)}>
-                <FaPlus/>
-            </button>
-        </h2>
-    </header>
-    <ul class="w-full border-stone-700" bind:this={column_element}>
-        {#if showInserterAfter === KanbanColumnTop}
-            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnTop)}}
-                        bind:this={inserter} />
-        {/if}
-
-        {#if items && items.length > 0}
-            {#each items as element, item_idx (element[item_key])}
-                <Card   item={element} 
-                        {showMoveOperationsForItem}
-                        {scrollViewToCard}
-                        runInserter={add}
-                        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 showInserterAfter == element}
-                    <Inserter   onInsert={async (text) => {await insert(text, showInserterAfter)}}
-                                bind:this={inserter} />
-                {/if}
-            {/each}
-        {/if}
-
-        {#if showInserterAfter === KanbanColumnBottom}
-            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnBottom)}}
-                        bind:this={inserter} />
-        {/if}
-
-    </ul>
+function getItemKey(item) {
+  if (definition.key)
+    return item[definition.key];
+  else if (item.Id)
+    return item.Id;
+  else if (item.$ref)
+    return item.$ref;
+  else
+    return 0;
+}
+function onTitleChanged(text) {
+  if (columnDef.onTitleChanged)
+    columnDef.onTitleChanged(text);
+}
+let rootElement;
+export function activate(e) {
+  if (e)
+    e.stopPropagation();
+  if (!columnDef.operations)
+    return;
+  if (isActive("props", columnDef)) {
+    return;
+  }
+  activateItem("props", columnDef, columnDef.operations);
+  rootElement?.scrollIntoView();
+}
+</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>
 </section>

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

@@ -1,51 +1,51 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        width?: string | undefined;
-        self?: object | undefined;
-        a?: string | undefined;
-        objects?: object[] | undefined;
-        context?: string | undefined;
-        key?: string | undefined;
-        currentColumnIdx: number;
-        showMoveOperationsForItem?: Function | undefined;
-        scrollViewToCard?: Function | undefined;
-        getHeight?: (() => number) | undefined;
-        SET_LEFT?: 0 | undefined;
-        SET_RIGHT?: 1 | undefined;
-        CLEAR_LEFT?: 2 | undefined;
-        CLEAR_RIGHT?: 3 | undefined;
-        setBorder?: ((what_to_do: number) => void) | undefined;
-        findCardByItem?: ((item: object) => any) | undefined;
-        add?: ((after?: object | number) => 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 getHeight(): () => number;
-    get SET_LEFT(): 0;
-    get SET_RIGHT(): 1;
-    get CLEAR_LEFT(): 2;
-    get CLEAR_RIGHT(): 3;
-    get setBorder(): (what_to_do: number) => void;
-    get findCardByItem(): (item: object) => any;
-    get add(): (after?: number | object) => Promise<void>;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        currentColumnIdx: number;
+        onInsert: Function;
+        getHeight?: (() => number) | undefined;
+        editName?: ((onFinish?: Function | undefined) => void) | undefined;
+        SET_LEFT?: 0 | undefined;
+        SET_RIGHT?: 1 | undefined;
+        CLEAR_LEFT?: 2 | undefined;
+        CLEAR_RIGHT?: 3 | undefined;
+        setBorder?: ((what_to_do: number) => void) | undefined;
+        reload?: (() => void) | undefined;
+        findCardByItem?: ((item: object) => any) | undefined;
+        activateByItemId?: ((id: number) => void) | undefined;
+        add?: ((after?: object | number) => Promise<void>) | undefined;
+        activate?: ((e: any) => 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 getHeight(): () => number;
+    get editName(): (onFinish?: Function | undefined) => void;
+    get SET_LEFT(): 0;
+    get SET_RIGHT(): 1;
+    get CLEAR_LEFT(): 2;
+    get CLEAR_RIGHT(): 3;
+    get setBorder(): (what_to_do: number) => void;
+    get reload(): () => void;
+    get findCardByItem(): (item: object) => any;
+    get activateByItemId(): (id: number) => void;
+    get add(): (after?: number | object) => Promise<void>;
+    get activate(): (e: any) => void;
+}
+export {};

package/components/kanban/internal/kanban.inserter.svelte

@@ -7,18 +7,18 @@ export function run(onclose) {
   startEditing(insertion_paragraph, onclose);
 }
 let insertion_paragraph;
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
-            bg-stone-100 dark:bg-stone-700">
-
-    <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 w-full sm:flex-none sm:w-2/3"
-                use:editable={onInsert}
-                bind:this={insertion_paragraph}>
-        
-    </h3>
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
+            bg-stone-100 dark:bg-stone-700">
+
+    <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 w-full sm:flex-none "
+                use:editable={onInsert}
+                bind:this={insertion_paragraph}>
+        
+    </h3>
 </li>

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

@@ -1,18 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        onInsert: any;
-        run?: ((onclose: any) => void) | 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> {
-    get run(): (onclose: any) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onInsert: any;
+        run?: ((onclose: any) => void) | 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> {
+    get run(): (onclose: any) => void;
+}
+export {};