@humandialog/forms.svelte 0.5.4 → 0.5.6

package/components/inputbox.ltop.svelte.d.ts

@@ -1,52 +1,52 @@
-/** @typedef {typeof __propDef.props}  InputboxProps */
-/** @typedef {typeof __propDef.events}  InputboxEvents */
-/** @typedef {typeof __propDef.slots}  InputboxSlots */
-export default class Inputbox extends SvelteComponentTyped<{
-    [x: string]: any;
-    invalid?: boolean | undefined;
-    label?: string | undefined;
-    context?: string | undefined;
-    self?: null | undefined;
-    c?: string | undefined;
-    typename?: string | undefined;
-    a?: string | undefined;
-    pushChangesImmediately?: boolean | undefined;
-    s?: string | undefined;
-    placeholder?: string | undefined;
-    itype?: string | undefined;
-    val?: string | undefined;
-    validateCb?: any;
-    validate?: (() => boolean) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-    get validate(): () => boolean;
-}
-export type InputboxProps = typeof __propDef.props;
-export type InputboxEvents = typeof __propDef.events;
-export type InputboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        invalid?: boolean | undefined;
-        label?: string | undefined;
-        context?: string | undefined;
-        self?: null | undefined;
-        c?: string | undefined;
-        typename?: string | undefined;
-        a?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        s?: string | undefined;
-        placeholder?: string | undefined;
-        itype?: string | undefined;
-        val?: string | undefined;
-        validateCb?: any;
-        validate?: (() => boolean) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  InputboxProps */
+/** @typedef {typeof __propDef.events}  InputboxEvents */
+/** @typedef {typeof __propDef.slots}  InputboxSlots */
+export default class Inputbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    invalid?: boolean | undefined;
+    label?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    typename?: string | undefined;
+    a?: string | undefined;
+    pushChangesImmediately?: boolean | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    itype?: string | undefined;
+    val?: string | undefined;
+    validateCb?: any;
+    validate?: (() => boolean) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get validate(): () => boolean;
+}
+export type InputboxProps = typeof __propDef.props;
+export type InputboxEvents = typeof __propDef.events;
+export type InputboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        invalid?: boolean | undefined;
+        label?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        typename?: string | undefined;
+        a?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        itype?: string | undefined;
+        val?: string | undefined;
+        validateCb?: any;
+        validate?: (() => boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/kanban/Kanban.d.ts

@@ -1,23 +1,43 @@
-export declare class rKanban_column {
-    id: number;
-    title: string;
-    width: string;
-    self: object | undefined;
-    a: string;
-    objects: object[] | undefined;
-    context: string;
-}
-export declare class rKanban_definition {
-    columns: rKanban_column[];
-    titleAttrib: string;
-    titleOnChange: Function | undefined;
-    summaryAttrib: string;
-    onUp: Function | undefined;
-    onDown: Function | undefined;
-    onAdd: Function | undefined;
-    onRemove: Function | undefined;
-    onReplace: Function | undefined;
-    onOpen: Function | undefined;
-}
-export declare const KanbanColumnTop = -1;
-export declare const KanbanColumnBottom = -2;
+import type { rList_property } from "../list/List";
+export declare const KanbanCardTop = 1;
+export declare const KanbanCardMiddle = 2;
+export declare const KanbanCardBottom = 3;
+export declare class rKanban_column {
+    id: number;
+    title: string;
+    width: string;
+    state: any;
+    finishing: boolean;
+    operations: object[] | undefined;
+    onTitleChanged: Function | undefined;
+}
+export declare class rKanban_definition {
+    columns: rKanban_column[];
+    titleAttrib: string;
+    titleOnChange: Function | undefined;
+    titleReadOnly: boolean;
+    summaryAttrib: string;
+    summaryOnChange: Function | undefined;
+    summaryReadOnly: boolean;
+    properties: rList_property[];
+    self: object | undefined;
+    a: string;
+    objects: object[] | undefined;
+    context: string;
+    key: string;
+    typename: string;
+    stateAttrib: string;
+    orderAttrib: string;
+    onUp: Function | undefined;
+    onDown: Function | undefined;
+    onAdd: Function | undefined;
+    onRemove: Function | undefined;
+    onReplace: Function | undefined;
+    onOpen: Function | undefined;
+    getCardOperations: Function | undefined;
+    private items;
+    getItems(): object[];
+    clear(): void;
+}
+export declare const KanbanColumnTop = -1;
+export declare const KanbanColumnBottom = -2;

package/components/kanban/Kanban.js

@@ -1,23 +1,79 @@
-export class rKanban_column {
-    id;
-    title = '';
-    width = 'w-[240px]';
-    self = undefined;
-    a = '';
-    objects = undefined;
-    context = '';
-}
-export class rKanban_definition {
-    columns = [];
-    titleAttrib = '';
-    titleOnChange = undefined;
-    summaryAttrib = '';
-    onUp = undefined;
-    onDown = undefined;
-    onAdd = undefined;
-    onRemove = undefined;
-    onReplace = undefined;
-    onOpen = undefined;
-}
-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

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, tick } from "svelte";
 import {
   contextItemsStore,
   isActive,
@@ -6,23 +6,24 @@ import {
   activateItem,
   selectable,
   editable,
-  showFloatingToolbar
+  showFloatingToolbar,
+  informModification,
+  pushChanges
 } from "../../..";
-import { FaArrowsAlt, FaTrash, FaPlus, FaAlignLeft } from "svelte-icons/fa";
+import { FaArrowsAlt, FaTrash, FaPlus, FaExternalLinkAlt } from "svelte-icons/fa";
 import MoveOperations from "./kanban.move.menu.svelte";
+import Properties from "./kanban.props.svelte";
+import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "../Kanban";
 export let item;
-export let showMoveOperationsForItem = void 0;
-export let scrollViewToCard = void 0;
-export let runInserter = void 0;
 let definition = getContext("rKanban-definition");
 $:
-  is_row_active = calculate_active(item, $contextItemsStore);
+  isCardActive = calculate_active(item, $contextItemsStore);
 $:
-  is_row_selected = selected(item, $contextItemsStore);
+  isCardSelected = selected(item, $contextItemsStore);
 $:
-  selected_class = is_row_selected ? "!border-blue-300" : "";
+  selectedClass = isCardSelected ? "!border-blue-300" : "";
 $:
-  focused_class = is_row_active ? "bg-stone-100 dark:bg-stone-700" : "";
+  focusedClass = isCardActive ? "bg-stone-100 dark:bg-stone-700" : "";
 function calculate_active(...args) {
   return isActive("props", item);
 }
@@ -35,47 +36,19 @@ export function activate(e) {
   if (isActive("props", item)) {
     return;
   }
+  let operations = getOperations();
   activateItem("props", item, operations);
 }
-let operations = [
-  {
-    caption: "",
-    icon: FaPlus,
-    action: (f) => {
-      if (runInserter)
-        runInserter(item);
-    }
-  },
-  {
-    caption: "",
-    icon: FaArrowsAlt,
-    toolbar: MoveOperations,
-    props: {
-      definition,
-      item,
-      afterActionOperation: scrollViewToCard
-    }
-  },
-  {
-    caption: "",
-    icon: FaTrash,
-    action: (f) => definition.onRemove(item)
+function getOperations() {
+  let operations = [];
+  const getCustomOperations = definition.getCardOperations;
+  if (getCustomOperations) {
+    const cutomOperations = getCustomOperations(item);
+    cutomOperations.forEach((o) => operations.push(o));
   }
-];
-let moveButton;
-let card;
-export function showMoveOperations() {
-  let rect = moveButton.getBoundingClientRect();
-  showFloatingToolbar(
-    rect,
-    MoveOperations,
-    {
-      definition,
-      item,
-      afterActionOperation: showMoveOperationsForItem
-    }
-  );
+  return operations;
 }
+let card;
 export function _scrollViewToCard() {
   card?.scrollIntoView(
     {
@@ -85,74 +58,179 @@ export function _scrollViewToCard() {
     }
   );
 }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selected_class} {focused_class}"
-     class:cursor-pointer={!is_row_active}
-     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={!is_row_active}
-                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}
-    
-
-    <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) => definition.titleOnChange(text, item), 
-                    active: true}}>
-        {item[definition.titleAttrib]}
-        
-        {#if definition.onOpen}
-            <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
-                    class:hidden={!is_row_active}
-                    on:click={(e) => definition.onOpen(item)}>
-                <FaAlignLeft/>
-            </button>
-        {/if}
-    </h3>
-
-    {#if $$slots.kanbanCardMiddleProps}
-        <section class="w-full flex flex-row">
-             <slot name="kanbanCardMiddleProps" element={item} />
-        </section>
-    {/if}
-
-    {#if item[definition.summaryAttrib]}
-        <summary class="  sm:text-xs sm:min-h-[1rem]
-                    text-base min-h-[1.5rem]
-                    text-stone-400
-                    max-h-[75px] sm:max-h-[64px]
-                    text-ellipsis overflow-hidden">
-            {item[definition.summaryAttrib]}
-        </summary>
-    {/if}
-
-    {#if $$slots.kanbanCardBottomProps}
-        <slot name="kanbanCardBottomProps" element={item} />
-    {/if}
+function onTitleChanged(text) {
+  if (definition.titleOnChange)
+    definition.titleOnChange(text, item);
+  else {
+    item[definition.titleAttrib] = text;
+    informModification(item, definition.titleAttrib);
+    pushChanges();
+  }
+}
+function onSummaryChanged(text) {
+  if (definition.summaryOnChange)
+    definition.summaryOnChange(text, item);
+  else {
+    item[definition.summaryAttrib] = text;
+    informModification(item, definition.summaryAttrib);
+    pushChanges();
+  }
+}
+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 topProps;
+let middleProps;
+let bottomProps;
+let titleElement;
+let summaryElement;
+let summaryPlaceholder = false;
+export async function editProperty(field) {
+  if (field == "Title") {
+    titleElement.focus();
+    await tick();
+    setSelectionAtEnd(titleElement);
+  } else if (field == "Summary") {
+    if (!!summaryElement) {
+      summaryElement.focus();
+      await tick();
+      setSelectionAtEnd(summaryElement);
+    } else {
+      summaryPlaceholder = true;
+      await tick();
+      if (!!summaryElement)
+        summaryElement.focus();
+    }
+  } else {
+    const property = definition.properties.find((p) => p.name == field);
+    if (!property)
+      return;
+    switch (property.position) {
+      case KanbanCardTop:
+        topProps.editProperty(field);
+        break;
+      case KanbanCardMiddle:
+        middleProps.editProperty(field);
+        break;
+      case KanbanCardBottom:
+        bottomProps.editProperty(field);
+        break;
+    }
+  }
+}
+</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}"
+     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}
+                <summary 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]}
+                </summary>
+            {:else}
+                <summary 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]}
+                </summary>
+            {/if}
+        {/key}
+    {/if}
+
+    {#if $$slots.kanbanCardBottomProps}
+        <slot name="kanbanCardBottomProps" element={item} />
+    {/if}
+
+    <Properties position={KanbanCardBottom} {item} bind:this={bottomProps}/>
 </li>