@humandialog/forms.svelte 0.5.3 → 0.5.5

package/components/Fab.svelte

@@ -136,9 +136,11 @@ function mousedown(e) {
                             <li class="flex flex-row px-0 py-0 justify-end group"
                                 on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown}>
-                                <div>
-                                    <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
-                                </div>
+                                {#if operation.caption}
+                                    <div>
+                                        <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
+                                    </div>
+                                {/if}
                                 <button class=" bg-transparent
                                                 mx-0 mb-4 w-[55px] h-[55px] 
                                                 flex items-center justify-center

package/components/combo/combo.svelte

@@ -45,7 +45,7 @@ let label_mb = "mb-1";
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
 let font_size = "text-lg sm:text-sm";
-let line_h = "h-5";
+let line_h = "h-6 sm:h-5";
 let chevron_mt = "mt-2 sm:mt-0";
 switch (s) {
   case "md":

package/components/document/rich.edit.svelte

@@ -26,7 +26,7 @@ export function run(onStop = void 0) {
   onBlur = onStop;
   editable_div?.focus();
 }
-export function get_formatting_operations() {
+export function getFormattingOperations() {
   let result = [];
   commands.forEach((c2) => {
     result.push({
@@ -884,23 +884,45 @@ function navigate_command_palette(key) {
 }
 function on_selection_changed() {
 }
+let intervalId = 0;
+function on_focus() {
+  if (pushChangesImmediately) {
+    intervalId = setInterval(
+      () => {
+        saveData();
+      },
+      2e3
+    );
+  }
+}
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = 0;
+  }
   if (onBlur) {
     onBlur();
     onBlur = void 0;
   }
+  if (saveData()) {
+    last_tick = $data_tick_store + 1;
+    $data_tick_store = last_tick;
+  }
+}
+function saveData() {
   if (item && a && has_changed_value) {
     item[a] = changed_value;
     has_changed_value = false;
-    if (typename) {
+    if (typename)
       informModification(item, a, typename);
-      if (pushChangesImmediately)
-        pushChanges();
-    }
-    last_tick = $data_tick_store + 1;
-    $data_tick_store = last_tick;
+    else
+      informModification(item, a);
+    if (pushChangesImmediately)
+      pushChanges();
+    return true;
   }
+  return false;
 }
 let commands = [
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaFont, on_choice: () => {
@@ -940,6 +962,7 @@ let commands = [
         class="{cs}     {appearance_class} 
                         prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto"
         on:blur={on_blur}
+        on:focus={on_focus}
         on:focus
         on:blur
         >

package/components/document/rich.edit.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
         run?: ((onStop?: undefined) => void) | undefined;
-        get_formatting_operations?: (() => any[]) | undefined;
+        getFormattingOperations?: (() => any[]) | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -27,6 +27,6 @@ export type RichEvents = typeof __propDef.events;
 export type RichSlots = typeof __propDef.slots;
 export default class Rich extends SvelteComponentTyped<RichProps, RichEvents, RichSlots> {
     get run(): (onStop?: undefined) => void;
-    get get_formatting_operations(): () => any[];
+    get getFormattingOperations(): () => any[];
 }
 export {};

package/components/kanban/Kanban.d.ts

@@ -1,23 +1,43 @@
+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;
-    self: object | undefined;
-    a: string;
-    objects: object[] | undefined;
-    context: 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 const KanbanCardTop = 1;
+export const KanbanCardMiddle = 2;
+export const KanbanCardBottom = 3;
 export class rKanban_column {
     id;
     title = '';
     width = 'w-[240px]';
-    self = undefined;
-    a = '';
-    objects = undefined;
-    context = '';
+    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,12 +58,81 @@ export function _scrollViewToCard() {
     }
   );
 }
+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 {selected_class} {focused_class}"
-     class:cursor-pointer={!is_row_active}
+<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}>
@@ -98,7 +140,7 @@ export function _scrollViewToCard() {
     <!--  -->
     <!--section class="h-6 w-full flex flex-row ">
         <button class="h-3 w-3"
-                class:hidden={!is_row_active}
+                class:hidden={!isCardActive}
                 on:click={(e) => showMoveOperations()}
                 bind:this={moveButton}>
             <FaArrowsAlt/>
@@ -116,25 +158,39 @@ export function _scrollViewToCard() {
             <slot name="kanbanCardTopProps" element={item}/>
         </section>
     {/if}
+    <Properties position={KanbanCardTop} {item} bind:this={topProps}/>
     
 
-    <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 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"
-                    class:hidden={!is_row_active}
                     on:click={(e) => definition.onOpen(item)}>
-                <FaAlignLeft/>
+                <FaExternalLinkAlt/>
             </button>
         {/if}
-    </h3>
+        </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">
@@ -142,17 +198,39 @@ export function _scrollViewToCard() {
         </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>
+    <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>

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

@@ -2,12 +2,9 @@ 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;
+        editProperty?: ((field: string) => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -29,7 +26,7 @@ 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;
+    get editProperty(): (field: string) => Promise<void>;
 }
 export {};